52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T142c,'use client'; import * as React from 'react'; import { cn } from '@/lib/utils'; export interface MetricPanelSecondary { label: React.ReactNode; value: React.ReactNode; } // inverse follows the theme (light page: dark panel, dark page: light panel). inverse-fixed scopes the dark theme to the panel, so it stays dark in both modes. const toneStyles = { inverse: { root: 'bg-background-inverse text-text-inverse', muted: 'text-text-inverse-subtle', divider: 'border-border-inverse/20' }, 'inverse-fixed': { root: 'dark bg-background-subtle text-text-default', // Border of the fixed-dark panel. Dropped with bordered={false}. border: 'border border-solid border-border-subtle', muted: 'text-text-subtle', divider: 'border-border-default', }, } as const; const sizeStyles = { md: { value: 'typography-display', secondaryLabel: 'typography-ui', secondaryValue: 'typography-ui-semibold' }, lg: { value: 'typography-digit-lg-semibold', secondaryLabel: 'typography-large', secondaryValue: 'typography-ui-lg-semibold' }, } as const; const labelWeights = { semibold: 'typography-ui-semibold', medium: 'typography-ui-medium', regular: 'typography-ui' } as const; // Label size above the weight roles. default keeps the 13px label role, md uses the 14px and lg the 16px role (weight comes from labelWeight). const labelSizes = { md: { base: 'typography-text-small', semibold: 'font-semibold', medium: 'font-medium', regular: 'font-regular' }, lg: { base: 'typography-p-ui', semibold: 'font-semibold', medium: 'font-medium', regular: 'font-regular' }, } as const; // row keeps label and value on one baseline. stacked puts the label above the value, stacked-reverse puts the value above the label. const secondaryLayouts = { row: { item: 'flex items-baseline justify-between gap-4' }, stacked: { item: 'flex flex-col gap-1' }, 'stacked-reverse': { item: 'flex flex-col-reverse gap-1' }, } as const; export interface MetricPanelProps extends Omit, 'title'> { label: React.ReactNode; // The headline result, set in the display role. value: React.ReactNode; description?: React.ReactNode; // Supporting figures below the result, rendered as a definition list. secondary?: MetricPanelSecondary[]; // Announces changes of the result politely, for calculators that recompute while typing. live?: boolean; // inverse flips with the theme. inverse-fixed keeps the panel dark in dark mode too. tone?: keyof typeof toneStyles; // lg sets the result in the large digit role and the secondary rows one step larger. size?: keyof typeof sizeStyles; // Weight of the top label. Default semibold. labelWeight?: keyof typeof labelWeights; // Size of the top label. Default keeps the 13px role, `md` is 14px and `lg` 16px. labelSize?: 'default' | keyof typeof labelSizes; // Layout of the secondary rows. row (default), stacked (label above value) or stacked-reverse (value above label). secondaryLayout?: keyof typeof secondaryLayouts; // false drops the hairline border of the inverse-fixed tone. Default true. bordered?: boolean; // Stretches the panel to the height of its container, for equal height cards in a grid. fill?: boolean; } // Large result panel on the inverse surface (calculator results, key figures). const MetricPanel = React.forwardRef( ({ className, label, value, description, secondary, live = false, tone = 'inverse', size = 'md', labelWeight = 'semibold', labelSize = 'default', secondaryLayout = 'row', bordered = true, fill = false, children, ...props }, ref) => { const id = React.useId(); const t = toneStyles[tone]; const z = sizeStyles[size]; const layout = secondaryLayouts[secondaryLayout]; return (

{label}

{value}

{description ?

{description}

: null} {secondary && secondary.length > 0 ? (

{item.label}: {item.value}

) : null} {children}

); }, ); MetricPanel.displayName = 'MetricPanel'; export { MetricPanel }; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/metric-panel.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]