4e: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"] 4f: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"] 50:T1263,"use client" import { TrendingUp, TrendingDown, Minus } from "lucide-react" import { cn } from "@/lib/utils" import { demoStats } from './demo/miscellaneous' /** * Represents a single statistic card with trend data. * @interface StatCard * @property {string} [label] - Label for the stat (e.g., "Sales", "Orders") * @property {string | number} [value] - The stat value to display * @property {number} [change] - Percentage change value * @property {string} [changeLabel] - Additional context for the change * @property {React.ReactNode} [icon] - Optional icon for the stat * @property {"up" | "down" | "neutral"} [trend] - Trend direction */ export interface StatCard { label?: string value?: string | number change?: number changeLabel?: string icon?: React.ReactNode trend?: "up" | "down" | "neutral" } /** * ═══════════════════════════════════════════════════════════════════════════ * StatCardProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for the StatCard component, which displays a grid of statistic cards * with values, trend indicators, and optional icons. */ export interface StatCardProps { data?: { /** Array of stat cards to display in the grid. */ stats?: StatCard[] } } /** * A statistics card grid displaying key metrics with trend indicators. * Shows stats in a responsive 2-3 column grid layout. * * Features: * - Trend indicators (up, down, neutral) with colors * - Percentage change display * - Optional icons per stat * - Responsive grid layout * - Optional change labels * * @component * @example * ```tsx * * ``` */ export function StatCard({ data }: StatCardProps) { const resolved: NonNullable = data ?? { stats: demoStats } const stats = resolved.stats ?? [] const getTrendIcon = (trend?: "up" | "down" | "neutral") => { switch (trend) { case "up": return case "down": return default: return } } const getTrendColor = (trend?: "up" | "down" | "neutral") => { switch (trend) { case "up": return "text-green-600" case "down": return "text-red-600" default: return "text-muted-foreground" } } return (

{stats.map((stat, index) => { return (

{(stat.label || stat.icon) && (

{stat.label && ( {stat.label} )} {stat.icon}

)} {(stat.value !== undefined || stat.change !== undefined) && (

{stat.value !== undefined && ( {stat.value} )} {stat.change !== undefined && ( {getTrendIcon(stat.trend)} {Math.abs(stat.change)}% )}

)} {stat.changeLabel && ( {stat.changeLabel} )}

) })}

) } 51:T997,// Demo data for Miscellaneous category components // This file contains sample data used for component previews and documentation export const demoStats = [ { label: 'Revenue', value: '$12,345', change: 12.5 }, { label: 'Orders', value: '1,234', change: -3.2 }, { label: 'Customers', value: '567', change: 8.1 }, ] export const demoHeroDefault = { logo1: { text: 'Acme', alt: 'Acme' }, title: 'Build beautiful chat experiences with Manifest UI', subtitle: 'Create beautiful chat experiences with our comprehensive component library designed for agentic applications.', primaryButton: { label: 'Get Started' }, secondaryButton: { label: 'GitHub' }, } export const demoHeroTwoLogos = { logo1: { text: 'Acme' }, logo2: { url: '/logo-manifest-ui.svg', urlLight: '/logo-manifest-ui-light.svg', alt: 'Manifest', }, logoSeparator: 'x', title: 'Acme x Manifest UI', subtitle: 'Combining the best of both worlds to deliver exceptional user experiences.', primaryButton: { label: 'Get Started' }, secondaryButton: { label: 'GitHub' }, } export const demoHeroWithTechLogos = { logo1: { text: 'Acme' }, title: 'Build your next project with Acme', subtitle: 'Create beautiful experiences with our comprehensive platform designed for modern applications.', primaryButton: { label: 'Get Started' }, secondaryButton: { label: 'GitHub' }, techLogosLabel: 'Built with open-source technologies', techLogos: [ { url: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg', alt: 'Next.js', name: 'Next.js', }, { url: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg', alt: 'TypeScript', name: 'TypeScript', }, { url: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg', alt: 'React', name: 'React', }, { url: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-original.svg', alt: 'Tailwind CSS', name: 'Tailwind CSS', }, { url: 'https://ui.manifest.build/demo/os-tech-mnfst.svg', alt: 'Manifest', name: 'Manifest', }, ], } export const demoHeroMinimal = { logo1: undefined, title: 'Welcome to the Future', subtitle: 'A simple, clean hero without logos or extra elements.', primaryButton: { label: 'Get Started' }, secondaryButton: undefined, } 4d:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@manifest","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/miscellaneous/stat-card.tsx","content":"$50","type":"registry:block","target":"components/ui/stat-card.tsx"},{"path":"registry/miscellaneous/demo/miscellaneous.ts","content":"$51","type":"registry:lib","target":"components/ui/demo/miscellaneous.ts"}],"className":"h-[70svh] min-h-80"}]]}]