admin-ui-starter-kit 0.1.3 → 0.1.4

package/dist/showcase/assets/menus-mK-FeNki.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,Gn as i,Ht as a,It as o,Ln as s,Sn as c,Tr as l,Un as u,Vt as d,Wt as ee,hr as f,kr as p,mr as m,pn as te,t as h,ut as g,xn as _,y as ne}from"./example-C6-_Sy6B.js";import{t as v}from"./square-pen-N0mq-vPu.js";import{t as y}from"./trash-2-_xF5j-Ya.js";import{a as b}from"./index-B8DVXCmf.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-Q1BV3wPP.js";import{t as ie}from"./Separator-guDkmky0.js";import{a as L,i as ae,n as oe,o as se,r as R,t as ce}from"./command-DQFIxPN9.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=g(),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:l,style:u,...f}=e,{setAnchor:p,actionsRef:m,internalBackdropRef:h,backdropRef:g,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=s(),k=s(),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,a(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(o(E.current),`mouseup`,e=>{if(y.current=!1,!A.current)return;k.clear(),A.current=!1;let t=c(e);_(v.current,t)||x&&t&&re(t)===x||m.current?.setOpen(!1,a(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=c(e);(_(E.current,t)||_(h.current,t)||_(g.current,t))&&e.preventDefault()}return d(o(E.current),`contextmenu`,e)},[g,T,h]),i(`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:l(`select-none`,e),...t})}function G({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:l(`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,B.jsx)(D,{"data-slot":`context-menu-label`,"data-inset":t,className:l(`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:l(`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:l(`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)(v,{className:`size-3.5`}),` Edit`]}),(0,B.jsxs)(S,{children:[(0,B.jsx)(p,{className:`size-3.5`}),` Duplicate`]}),(0,B.jsx)(w,{}),(0,B.jsxs)(S,{variant:`destructive`,children:[(0,B.jsx)(y,{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)(G,{children:[(0,B.jsx)(ue,{children:`File`}),(0,B.jsx)(q,{}),(0,B.jsxs)(K,{children:[(0,B.jsx)(v,{className:`size-3.5`}),` Rename`]}),(0,B.jsxs)(K,{children:[(0,B.jsx)(p,{className:`size-3.5`}),` Copy`]}),(0,B.jsx)(q,{}),(0,B.jsxs)(K,{variant:`destructive`,children:[(0,B.jsx)(y,{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)(m,{title:`Examples`,id:`examples`,children:[(0,B.jsx)(h,{name:`DropdownMenuExample`,source:Z,children:(0,B.jsx)(J,{})}),(0,B.jsx)(h,{name:`ContextMenuRightClick`,source:Z,children:(0,B.jsx)(Y,{})}),(0,B.jsx)(h,{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-DGTAjNJG.js

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

@@ -0,0 +1,278 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Ar as r,Cr as i,Sr as a,Tr as o,a as s,c,gr as l,hr as u,kr as d,mr as f,o as p,r as m,t as h}from"./example-C6-_Sy6B.js";import{t as g}from"./badge-check-DXDQ3SaL.js";import{t as _}from"./clock-Bn2R4aDX.js";import{t as v}from"./credit-card-BoDfW0R8.js";import{t as y}from"./external-link-Bg-_8Uq7.js";import{t as b}from"./git-branch-BO9i8XkJ.js";import{t as x}from"./globe-47T22W56.js";import{t as S}from"./info-B1KV2DkO.js";import{t as C}from"./mail-yNXDtmNr.js";import{t as ee}from"./map-pin-2WS7oVo3.js";import{t as te}from"./phone-NIZ5SwgK.js";import{t as w}from"./shield-check-Sbul0dUK.js";import{t as T}from"./user-CGcV8Ppb.js";import{D as ne,a as re,r as E}from"./index-B8DVXCmf.js";import{t as D}from"./props-table-CM_1cocj.js";import{t as O}from"./smart-card-7szg_qSt.js";import{r as k,t as A}from"./avatar-QBwg3fvR.js";import{t as j}from"./separator-DUKleOvU.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`}]]),ce={formatInfoAriaLabel:e=>`${e} info`,infoFallback:`Info`},M=t(n(),1),N=re(),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:l,titleSeparator:u=!1,className:d,gapClassName:f,labelClassName:h,valueClassName:g,descriptionClassName:_,layout:v=`vertical`,justify:y=`start`,align:b=`center`,separator:x=`: `,itemSeparator:C=!1,wrap:ee=!0,strings:te}){let w=ne(ce,te),T=M.useMemo(()=>e.filter(Boolean),[e]);if(M.useEffect(()=>{},[v,T]),T.length===0)return null;let re=le[t]??le[2],E=f??(n?`gap-4`:`gap-6`),D=n?`text-xxs`:`text-xs`,O=`text-sm`,k=l!=null,A=k&&u;if(v===`horizontal`){let e=ue[y]??ue.start,t=de[b]??de.center,u=typeof C==`string`?C:C?` | `:``,f=n?`gap-2`:`gap-3`,_=ee?`flex-wrap`:`flex-nowrap`;return(0,N.jsxs)(`div`,{className:o(`metadata-list--component`,`metadata-list-container space-y-3`,d),children:[!!k&&(0,N.jsx)(a,{tag:`h6`,className:`font-medium text-muted-foreground uppercase tracking-wide`,children:l}),!!A&&(0,N.jsx)(j,{className:`my-3`}),(0,N.jsx)(`div`,{className:o(`flex`,_,e,t,f),children:T.map((e,t)=>{let a=P(e,t),l=e.emptyLabel??r,d=e.value??l,f=e.icon,_=e.tooltip!==null&&e.tooltip!==void 0,v=typeof e.render==`function`,y=u&&t<T.length-1;return(0,N.jsxs)(M.Fragment,{children:[(0,N.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[!!f&&(0,N.jsx)(f,{className:o(`flex-shrink-0`,n?`h-3 w-3`:`h-3.5 w-3.5`,`text-muted-foreground`)}),(0,N.jsx)(i,{size:`xs`,type:`secondary`,className:o(`metadata--field tracking-wide whitespace-nowrap`,D,h),children:e.label}),!!_&&(0,N.jsxs)(s,{children:[(0,N.jsx)(c,{render:t=>(0,N.jsx)(m,{...t,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,className:o(`inline-flex items-center`,t.className),"aria-label":typeof e.label==`string`?w.formatInfoAriaLabel(e.label):w.infoFallback,children:(0,N.jsx)(S,{className:`h-3 w-3 text-muted-foreground cursor-help flex-shrink-0`})})}),(0,N.jsx)(p,{side:`top`,align:`start`,className:`max-w-xs`,children:(0,N.jsx)(i,{type:`inverse`,size:`xs`,children:e.tooltip})})]}),(0,N.jsx)(i,{size:`xs`,type:`secondary`,children:x}),v?e.render?.(e):(0,N.jsx)(i,{weight:`medium`,className:o(O,g),children:d})]}),!!y&&(0,N.jsx)(i,{size:`xs`,type:`secondary`,children:u})]},a)})})]})}if(v===`rows`){let e=n?`py-1.5`:`py-2.5`;return(0,N.jsxs)(`div`,{className:o(`metadata-list-container`,d),children:[!!k&&(0,N.jsx)(a,{tag:`h6`,className:`font-medium text-muted-foreground uppercase tracking-wide mb-2`,children:l}),!!A&&(0,N.jsx)(j,{className:`mb-2`}),(0,N.jsx)(`dl`,{className:`divide-y divide-border/50`,children:T.map((t,a)=>{let l=P(t,a),u=t.emptyLabel??r,d=t.value??u,f=t.icon,v=t.tooltip!==null&&t.tooltip!==void 0,y=typeof t.render==`function`;return(0,N.jsxs)(`div`,{className:o(`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:[!!f&&(0,N.jsx)(f,{className:o(`flex-shrink-0 text-muted-foreground`,n?`h-3 w-3`:`h-3.5 w-3.5`)}),(0,N.jsx)(i,{type:`secondary`,className:o(`truncate`,h),children:t.label}),!!v&&(0,N.jsxs)(s,{children:[(0,N.jsx)(c,{render:e=>(0,N.jsx)(m,{...e,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,className:o(`inline-flex items-center`,e.className),"aria-label":typeof t.label==`string`?w.formatInfoAriaLabel(t.label):w.infoFallback,children:(0,N.jsx)(S,{className:`h-3 w-3 text-muted-foreground cursor-help flex-shrink-0`})})}),(0,N.jsx)(p,{side:`top`,align:`start`,className:`max-w-xs`,children:(0,N.jsx)(i,{type:`inverse`,size:`xs`,children:t.tooltip})})]})]}),(0,N.jsxs)(`dd`,{className:`min-w-0`,children:[y?t.render?.(t):(0,N.jsx)(i,{weight:`medium`,className:o(`break-words`,g),children:d}),!!t.description&&(0,N.jsx)(i,{size:`xs`,type:`secondary`,className:o(`mt-0.5`,_),children:t.description})]})]},l)})})]})}return(0,N.jsxs)(`div`,{className:o(`metadata-list-container space-y-3`,d),children:[!!k&&(0,N.jsx)(a,{tag:`h6`,className:`font-medium text-muted-foreground uppercase tracking-wide`,children:l}),!!A&&(0,N.jsx)(j,{className:`my-3`}),(0,N.jsx)(`div`,{className:o(`grid`,re,E),children:T.map((e,t)=>{let a=P(e,t),l=e.emptyLabel??r,u=e.value??l,d=e.icon,f=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:[!!d&&(0,N.jsx)(d,{className:o(`flex-shrink-0`,n?`h-3 w-3`:`h-3.5 w-3.5`,`text-muted-foreground`)}),(0,N.jsx)(i,{size:`xs`,type:`secondary`,className:o(` tracking-wide`,D,h),children:e.label}),!!f&&(0,N.jsxs)(s,{children:[(0,N.jsx)(c,{render:t=>(0,N.jsx)(m,{...t,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,className:o(`inline-flex items-center`,t.className),"aria-label":typeof e.label==`string`?w.formatInfoAriaLabel(e.label):w.infoFallback,children:(0,N.jsx)(S,{className:`h-3 w-3 text-muted-foreground cursor-help flex-shrink-0`})})}),(0,N.jsx)(p,{side:`top`,align:`start`,className:`max-w-xs`,children:(0,N.jsx)(i,{type:`inverse`,size:`xs`,children:e.tooltip})})]})]}),v?e.render?.(e):(0,N.jsx)(i,{weight:`medium`,className:o(O,g),children:u}),!!e.description&&(0,N.jsx)(i,{size:`xs`,type:`secondary`,className:o(_),children:e.description})]},a)})})]})}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[n,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)(i,{tag:`span`,weight:`medium`,className:t?`font-mono tabular-nums`:`tabular-nums`,children:e}),n?(0,N.jsx)(r,{className:`size-3 text-success`,"aria-hidden":`true`}):(0,N.jsx)(d,{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)(i,{tag:`span`,weight:`medium`,children:t}),!!n&&(0,N.jsx)(i,{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:g,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:_,value:`Apr 28, 2026 · 14:32`},{id:`version`,label:`Version`,icon:b,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)(i,{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)(i,{tag:`span`,weight:`medium`,type:`success`,className:`tabular-nums`,children:`−25.00 USD`})},{id:`total`,label:`Total`,value:(0,N.jsx)(i,{tag:`span`,weight:`bold`,className:`tabular-nums`,children:`191.00 USD`})}],ge=[{id:`name`,label:`Name`,icon:T,value:`Sarah Smitha`},{id:`email`,label:`Email`,icon:C,value:(0,N.jsx)(I,{value:`maria@example.com`,mono:!1})},{id:`phone`,label:`Phone`,icon:te,value:(0,N.jsx)(I,{value:`+1 888 123 456`})},{id:`address`,label:`Address`,icon:ee,value:`ul. Vitosha 24, New York 1000`,description:`USA`}],_e=[{id:`card`,label:`Card`,icon:v,value:`Visa ending 4242`},{id:`billing`,label:`Billing address`,icon:ie,value:`ul. Slavyanska 9, Los Angeles`},{id:`verified`,label:`Verified`,icon:w,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:x,render:()=>(0,N.jsxs)(`a`,{href:`#`,className:`inline-flex items-center gap-1 text-primary hover:underline`,children:[(0,N.jsx)(i,{tag:`span`,weight:`medium`,children:`example.com`}),(0,N.jsx)(y,{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)(i,{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 { 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"
+			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)(u,{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)(h,{name:`APISurface`,source:Q,children:(0,N.jsx)(B,{})})}),(0,N.jsxs)(f,{title:`Vertical grid`,id:`vertical`,children:[(0,N.jsx)(h,{name:`Vertical2ColumnNoIcons`,source:Q,children:(0,N.jsx)(V,{})}),(0,N.jsx)(h,{name:`VerticalSingleColumnNoIcons`,source:Q,children:(0,N.jsx)(H,{})}),(0,N.jsx)(h,{name:`Example3ColumnWithIcons`,source:Q,children:(0,N.jsx)(J,{})}),(0,N.jsx)(h,{name:`Dense4ColumnOverview`,source:Q,children:(0,N.jsx)(q,{})})]}),(0,N.jsxs)(f,{title:`Two-column rows`,id:`rows`,children:[(0,N.jsx)(h,{name:`RowsTwoColumnWithHairlines`,source:Q,children:(0,N.jsx)(U,{})}),(0,N.jsx)(h,{name:`RowsReceiptStyle`,source:Q,children:(0,N.jsx)(W,{})}),(0,N.jsx)(h,{name:`RowsWithIconsTooltips`,source:Q,children:(0,N.jsx)(G,{})})]}),(0,N.jsx)(f,{title:`Horizontal pills`,id:`horizontal`,children:(0,N.jsx)(h,{name:`HorizontalPillSummary`,source:Q,children:(0,N.jsx)(Y,{})})}),(0,N.jsxs)(f,{title:`Composition`,id:`composition`,children:[(0,N.jsx)(h,{name:`SectionedMultiCard`,source:Q,children:(0,N.jsx)(K,{})}),(0,N.jsx)(h,{name:`WithTitleSeparator`,source:Q,children:(0,N.jsx)(X,{})}),(0,N.jsx)(h,{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-BWGrmyD6.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Cr as n,Sr as r,Tr as i}from"./example-C6-_Sy6B.js";import{t as a}from"./arrow-up-right-Z5sMa1HH.js";import{a as o}from"./index-B8DVXCmf.js";import{t as s}from"./smart-card-7szg_qSt.js";import{O as c,n as l,t as u}from"./AreaChart-CzBEYPbz.js";import{t as d}from"./analytics.strings-B9262Jmq.js";import{n as f,t as p}from"./format-metric-value-B94EDo8X.js";import{t as m}from"./metric-trend-chip-kLBN8u5z.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:a=!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:i(`metric-sparkline--component`,`w-full`,r),"aria-hidden":`true`}):(0,g.jsx)(`div`,{className:i(`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)(u,{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)(l,{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:i(`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:i(`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:i(`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:i(`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:i(`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:i(`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: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(t),[t]),C=(0,h.useMemo)(()=>f(t),[t]);if(u)return(0,g.jsx)(b,{variant:r,size:a,className:i(`metric--component`,y)});if(m)return(0,g.jsx)(`div`,{className:i(`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:a,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:a,size:o,showSparkline:s,showChange:c,showIcon:l,ariaLabel:u,className:d}){let f=e.icon;return(0,g.jsxs)(`div`,{className:i(`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:i(`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:a,className:i(`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:a,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:i(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:i(`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:a,className:i(`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:a,showIcon:o,ariaLabel:s,className:c}){let l=e.icon;return(0,g.jsxs)(`div`,{className:i(`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})]}),!!a&&!!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:a,ariaLabel:o,className:s}){return(0,g.jsxs)(`span`,{className:i(`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}),!!a&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:`sm`,variant:`inline`})]})}function j({data:e,formattedValue:t,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:i(`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:i(`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:a,className:w[o]}),!!e.footer&&(0,g.jsx)(n,{size:`xxs`,type:`discrete`,children:e.footer})]})}function M({data:e,formattedValue:t,trend:a,size:o,showSparkline:s,showChange:c,ariaLabel:l,className:u}){let d=e.icon;return(0,g.jsxs)(`div`,{className:i(`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:i(`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:a,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:i(`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:i(`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:i(`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-valuenow":d,"aria-valuemin":0,"aria-valuemax":100,children:Array.from({length:T},(e,t)=>(0,g.jsx)(`div`,{className:i(`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)(a,{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-grid-CewIJQvo.js

@@ -0,0 +1 @@
+import{Cr as e,Tr as t,r as n}from"./example-C6-_Sy6B.js";import{t as r}from"./calendar-oKaDsUIy.js";import{a as i}from"./index-B8DVXCmf.js";import{t as a}from"./metric-BWGrmyD6.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:`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-3 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)(n,{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:t(`metric-bar--component`,`w-full`,`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 min-w-0 flex-col overflow-hidden rounded-[11px] 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-[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:t(`metric-bar--component flex w-full flex-col overflow-hidden rounded-xl 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`;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:n=`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:t(`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:n,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-kLBN8u5z.js

@@ -0,0 +1 @@
+import{Cr as e,Tr as t}from"./example-C6-_Sy6B.js";import{t as n}from"./arrow-down-BpVaq9-H.js";import{t as r}from"./arrow-up-BpWEnkdX.js";import{t as i}from"./minus-DvrDGcTv.js";import{a}from"./index-B8DVXCmf.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-COnc7VN9.js

@@ -0,0 +1,44 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{hr as t,mr as n,t as r}from"./example-C6-_Sy6B.js";import{t as i}from"./credit-card-BoDfW0R8.js";import{t as a}from"./dollar-sign-BipUTVXC.js";import{t as o}from"./shopping-bag-EDVpxI9n.js";import{t as s}from"./users-DzgXeZbf.js";import{a as c}from"./index-B8DVXCmf.js";import{t as l}from"./props-table-CM_1cocj.js";import{n as u,t as d}from"./metric-grid-CewIJQvo.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};