{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["badge","button","card","chart","table","tooltip","@efferd/app-shell-5","@efferd/formater"],"name":"dashboard-5","description":"Web analytics dashboard with visitors chart, live users, top pages, traffic sources, and Core Web Vitals.","categories":["dashboard"],"files":[{"path":"registry/blocks/dashboard/5/audience-mix.tsx","type":"registry:component","content":"\"use client\";\n\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\tShareBarList,\n\tShareBarListContent,\n\tShareBarListFill,\n\tShareBarListItem,\n\tShareBarListLabel,\n\tShareBarListValue,\n} from \"@/components/share-bar-list\";\n\nconst segments = [\n\t{ label: \"Returning visitors\", share: 54 },\n\t{ label: \"New visitors\", share: 41 },\n\t{ label: \"Logged-in users\", share: 5 },\n] as const;\n\nexport function AudienceMix() {\n\treturn (\n\t\t<Card className=\"dark:bg-transparent\">\n\t\t\t<CardHeader className=\"border-b\">\n\t\t\t\t<CardTitle className=\"text-balance\">Audience mix</CardTitle>\n\t\t\t\t<CardDescription className=\"text-pretty\">\n\t\t\t\t\tSession split by familiarity in the last 12 months.\n\t\t\t\t</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent className=\"p-0 py-1\">\n\t\t\t\t<ShareBarList aria-label=\"Audience segments by share of sessions\">\n\t\t\t\t\t{segments.map((row) => (\n\t\t\t\t\t\t<ShareBarListItem key={row.label} value={row.share}>\n\t\t\t\t\t\t\t<ShareBarListContent>\n\t\t\t\t\t\t\t\t<ShareBarListLabel>{row.label}</ShareBarListLabel>\n\t\t\t\t\t\t\t\t<ShareBarListValue>{row.share}%</ShareBarListValue>\n\t\t\t\t\t\t\t</ShareBarListContent>\n\t\t\t\t\t\t\t<ShareBarListFill />\n\t\t\t\t\t\t</ShareBarListItem>\n\t\t\t\t\t))}\n\t\t\t\t</ShareBarList>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n"},{"path":"registry/blocks/dashboard/5/browser-share.tsx","type":"registry:component","content":"\"use client\";\n\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\tShareBarList,\n\tShareBarListContent,\n\tShareBarListFill,\n\tShareBarListItem,\n\tShareBarListLabel,\n\tShareBarListValue,\n} from \"@/components/share-bar-list\";\n\nconst browsers = [\n\t{ label: \"Chrome\", share: 58 },\n\t{ label: \"Safari\", share: 22 },\n\t{ label: \"Edge\", share: 9 },\n\t{ label: \"Firefox\", share: 7 },\n\t{ label: \"Other\", share: 4 },\n] as const;\n\nexport function BrowserShare() {\n\treturn (\n\t\t<Card className=\"dark:bg-transparent\">\n\t\t\t<CardHeader className=\"border-b\">\n\t\t\t\t<CardTitle className=\"text-balance\">Browsers</CardTitle>\n\t\t\t\t<CardDescription className=\"text-pretty\">\n\t\t\t\t\tShare of sessions by primary browser family.\n\t\t\t\t</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent className=\"p-0 py-1\">\n\t\t\t\t<ShareBarList aria-label=\"Sessions by browser\">\n\t\t\t\t\t{browsers.map((row) => (\n\t\t\t\t\t\t<ShareBarListItem key={row.label} value={row.share}>\n\t\t\t\t\t\t\t<ShareBarListContent>\n\t\t\t\t\t\t\t\t<ShareBarListLabel>{row.label}</ShareBarListLabel>\n\t\t\t\t\t\t\t\t<ShareBarListValue>{row.share}%</ShareBarListValue>\n\t\t\t\t\t\t\t</ShareBarListContent>\n\t\t\t\t\t\t\t<ShareBarListFill />\n\t\t\t\t\t\t</ShareBarListItem>\n\t\t\t\t\t))}\n\t\t\t\t</ShareBarList>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n"},{"path":"registry/blocks/dashboard/5/dashboard.tsx","type":"registry:component","content":"import { AudienceMix } from \"@/components/audience-mix\";\nimport { BrowserShare } from \"@/components/browser-share\";\nimport { OnlineNow } from \"@/components/online-now\";\nimport { TopCountries } from \"@/components/top-countries\";\nimport { TopPages } from \"@/components/top-pages\";\nimport { TopReferrers } from \"@/components/top-referrers\";\nimport { TrafficSourcesChart } from \"@/components/traffic-sources-chart\";\nimport { VisitorsChart } from \"@/components/visitors-chart\";\nimport { WebVitals } from \"@/components/web-vitals\";\n\nexport function Dashboard() {\n\treturn (\n\t\t<div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4\">\n\t\t\t<VisitorsChart />\n\t\t\t<OnlineNow />\n\t\t\t<TopPages />\n\t\t\t<TopCountries />\n\t\t\t<TrafficSourcesChart />\n\t\t\t<AudienceMix />\n\t\t\t<BrowserShare />\n\t\t\t<TopReferrers />\n\t\t\t<WebVitals />\n\t\t</div>\n\t);\n}\n"},{"path":"registry/blocks/dashboard/5/online-now.tsx","type":"registry:component","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { StatusIndicator } from \"@/components/../../components/indicator\";\nimport { Delta, DeltaIcon, DeltaValue } from \"@/components/delta\";\nimport {\n\tShareBarList,\n\tShareBarListContent,\n\tShareBarListFill,\n\tShareBarListItem,\n\tShareBarListLabel,\n\tShareBarListValue,\n} from \"@/components/share-bar-list\";\n\nconst devices = [\n\t{ label: \"Mobile\", share: 65 },\n\t{ label: \"Desktop\", share: 33 },\n\t{ label: \"Tablet\", share: 2 },\n] as const;\n\nexport function OnlineNow() {\n\treturn (\n\t\t<Card className=\"gap-0 pb-0 md:col-span-2 lg:col-span-1 dark:bg-transparent\">\n\t\t\t<CardHeader className=\"flex flex-row items-start justify-between gap-3 border-b\">\n\t\t\t\t<div className=\"flex min-w-0 flex-col gap-0\">\n\t\t\t\t\t<CardTitle className=\"font-mono text-2xl tabular-nums\">94</CardTitle>\n\t\t\t\t\t<CardDescription>\n\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"cursor-help px-1 py-px font-normal text-muted-foreground\",\n\t\t\t\t\t\t\t\t\t\t\"hover:underline-0\"\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<StatusIndicator />\n\t\t\t\t\t\t\t\t\t<span>visitors online</span>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t<TooltipContent side=\"bottom\">\n\t\t\t\t\t\t\t\tIn the last 5 minutes.\n\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</CardDescription>\n\t\t\t\t</div>\n\t\t\t\t<Delta value={14.8} variant=\"badge\">\n\t\t\t\t\t<DeltaIcon variant=\"trend\" />\n\t\t\t\t\t<DeltaValue suffix=\"%\" />\n\t\t\t\t</Delta>\n\t\t\t</CardHeader>\n\t\t\t<CardContent\n\t\t\t\tclassName={cn(\"relative flex h-full items-center px-0 py-2\")}\n\t\t\t>\n\t\t\t\t<ShareBarList>\n\t\t\t\t\t{devices.map((d) => (\n\t\t\t\t\t\t<ShareBarListItem key={d.label} value={d.share}>\n\t\t\t\t\t\t\t<ShareBarListContent>\n\t\t\t\t\t\t\t\t<ShareBarListLabel>{d.label}</ShareBarListLabel>\n\t\t\t\t\t\t\t\t<ShareBarListValue>{d.share}%</ShareBarListValue>\n\t\t\t\t\t\t\t</ShareBarListContent>\n\t\t\t\t\t\t\t<ShareBarListFill data-online-bar />\n\t\t\t\t\t\t</ShareBarListItem>\n\t\t\t\t\t))}\n\t\t\t\t</ShareBarList>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n"},{"path":"registry/blocks/dashboard/5/share-bar-list.tsx","type":"registry:component","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\n\nconst BAR_COLOR = \"var(--chart-2)\";\n\ntype ShareBarListItemContextValue = {\n\tvalue: number;\n};\n\nconst ShareBarListItemContext =\n\tReact.createContext<ShareBarListItemContextValue | null>(null);\n\nfunction useShareBarListItemContext(component: string) {\n\tconst ctx = React.useContext(ShareBarListItemContext);\n\tif (!ctx) {\n\t\tthrow new Error(\n\t\t\t`\\`${component}\\` must be used within \\`ShareBarListItem\\`.`\n\t\t);\n\t}\n\treturn ctx;\n}\n\nfunction ShareBarList({ className, ...props }: React.ComponentProps<\"ul\">) {\n\treturn (\n\t\t<ul\n\t\t\tclassName={cn(\n\t\t\t\t\"relative z-10 my-auto flex w-full flex-col gap-0.5\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tdata-slot=\"share-bar-list\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ShareBarListItem({\n\tclassName,\n\tvalue,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"li\"> & { value: number }) {\n\tconst clamped = Math.min(100, Math.max(0, value));\n\tconst ctx = React.useMemo(\n\t\t() => ({ value: clamped }) satisfies ShareBarListItemContextValue,\n\t\t[clamped]\n\t);\n\n\treturn (\n\t\t<ShareBarListItemContext.Provider value={ctx}>\n\t\t\t<li\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"group relative flex h-12 items-center gap-2 overflow-hidden px-3\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tdata-slot=\"share-bar-list-item\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</li>\n\t\t</ShareBarListItemContext.Provider>\n\t);\n}\n\nfunction ShareBarListContent({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"z-10 flex w-full items-center justify-between gap-2 text-sm\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tdata-slot=\"share-bar-list-content\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ShareBarListLabel({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"text-pretty\", className)}\n\t\t\tdata-slot=\"share-bar-list-label\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ShareBarListValue({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"font-medium tabular-nums\", className)}\n\t\t\tdata-slot=\"share-bar-list-value\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ShareBarListFill({\n\tclassName,\n\tstyle,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\tconst { value } = useShareBarListItemContext(\"ShareBarListFill\");\n\tconst borderMixPercent = Math.min(100, Math.max(36, value * 1.75));\n\tconst borderRightColor = `color-mix(in srgb, ${BAR_COLOR} ${borderMixPercent}%, transparent)`;\n\tconst fillStartColor = `color-mix(in srgb, ${BAR_COLOR} 4%, transparent)`;\n\tconst fillEndColor = `color-mix(in srgb, ${BAR_COLOR} 36%, transparent)`;\n\tconst backgroundImage = `linear-gradient(to right, ${fillStartColor}, ${fillEndColor})`;\n\n\treturn (\n\t\t<div\n\t\t\taria-hidden\n\t\t\tclassName={cn(\n\t\t\t\t\"pointer-events-none absolute top-0 left-0 h-full border-r-2 border-solid\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tdata-slot=\"share-bar-list-fill\"\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\twidth: `${value}%`,\n\t\t\t\tborderRightColor,\n\t\t\t\tbackgroundImage,\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tShareBarList,\n\tShareBarListContent,\n\tShareBarListFill,\n\tShareBarListItem,\n\tShareBarListLabel,\n\tShareBarListValue,\n};\n"},{"path":"registry/blocks/dashboard/5/top-countries.tsx","type":"registry:component","content":"import { formatInteger } from \"@/lib/formater\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\n\nconst FLAGPACK_BASE = \"https://flag.vercel.app\";\n\nconst rows = [\n\t{ code: \"US\", visits: 6120, delta: 5.2 },\n\t{ code: \"DE\", visits: 2840, delta: 8.1 },\n\t{ code: \"GB\", visits: 1960, delta: -1.4 },\n\t{ code: \"FR\", visits: 1420, delta: 3.6 },\n\t{ code: \"CA\", visits: 1180, delta: 0.9 },\n\t{ code: \"NL\", visits: 890, delta: 12.2 },\n] as const;\n\nconst regionNames = new Intl.DisplayNames([\"en\"], { type: \"region\" });\n\nfunction flagUrl(countryCode: string) {\n\treturn `${FLAGPACK_BASE}/s/${countryCode.toUpperCase()}.svg`;\n}\n\nexport function TopCountries() {\n\treturn (\n\t\t<Card className=\"relative md:col-span-2 dark:bg-transparent\">\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle className=\"text-balance\">Top countries</CardTitle>\n\t\t\t\t<CardDescription className=\"text-pretty\">\n\t\t\t\t\tTop countries in the last 12 months.\n\t\t\t\t</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent className=\"mask-b-from-50% mask-b-to-100% p-0 pb-2\">\n\t\t\t\t<Table className=\"border-t\">\n\t\t\t\t\t<TableCaption className=\"sr-only\">\n\t\t\t\t\t\tTop countries by visits with year-over-year change.\n\t\t\t\t\t</TableCaption>\n\t\t\t\t\t<TableHeader>\n\t\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t\t<TableHead className=\"pl-6\" scope=\"col\">\n\t\t\t\t\t\t\t\tCountry\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t<TableHead className=\"text-end tabular-nums\" scope=\"col\">\n\t\t\t\t\t\t\t\tVisits\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t<TableHead className=\"pr-6 text-end\" scope=\"col\">\n\t\t\t\t\t\t\t\tChange\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody>\n\t\t\t\t\t\t{rows.map((row) => (\n\t\t\t\t\t\t\t<TableRow className=\"hover:bg-transparent\" key={row.code}>\n\t\t\t\t\t\t\t\t<TableCell className=\"max-w-[220px] truncate pl-6 font-medium\">\n\t\t\t\t\t\t\t\t\t<span className=\"inline-flex max-w-full items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\talt={`Flag of ${row.code}`}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-3.5 w-5 shrink-0 rounded object-cover\"\n\t\t\t\t\t\t\t\t\t\t\theight={14}\n\t\t\t\t\t\t\t\t\t\t\tsrc={flagUrl(row.code)}\n\t\t\t\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"min-w-0 truncate text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t{regionNames.of(row.code) ?? row.code}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t<TableCell className=\"text-end text-muted-foreground text-xs tabular-nums\">\n\t\t\t\t\t\t\t\t\t{formatInteger(row.visits)}\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t<TableCell className=\"pr-6 text-end text-muted-foreground text-xs\">\n\t\t\t\t\t\t\t\t\t<span className=\"tabular-nums\">\n\t\t\t\t\t\t\t\t\t\t{row.delta > 0 ? \"+\" : \"\"}\n\t\t\t\t\t\t\t\t\t\t{row.delta}%\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</Table>\n\t\t\t</CardContent>\n\n\t\t\t<div className=\"mask-t-from-30% absolute inset-x-0 bottom-0 flex h-1/5 items-center justify-center bg-background\">\n\t\t\t\t<Button asChild className=\"relative\" variant=\"ghost\">\n\t\t\t\t\t<a href=\"#\">\n\t\t\t\t\t\tView All\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thugeicons=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tlucide=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tphosphor=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiArrowRightLine\"\n\t\t\t\t\t\t\ttabler=\"IconArrowRight\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</a>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</Card>\n\t);\n}\n"},{"path":"registry/blocks/dashboard/5/top-pages.tsx","type":"registry:component","content":"import { formatInteger } from \"@/lib/formater\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\n\nconst rows = [\n\t{ path: \"/\", visits: 18_420, delta: 4.1 },\n\t{ path: \"/pricing\", visits: 6280, delta: 12.4 },\n\t{ path: \"/blog/product-updates\", visits: 4110, delta: -2.0 },\n\t{ path: \"/docs/getting-started\", visits: 3920, delta: 6.8 },\n\t{ path: \"/changelog\", visits: 2150, delta: 0.4 },\n] as const;\n\nexport function TopPages() {\n\treturn (\n\t\t<Card className=\"relative md:col-span-2 dark:bg-transparent\">\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle className=\"text-balance\">Top pages</CardTitle>\n\t\t\t\t<CardDescription className=\"text-pretty\">\n\t\t\t\t\tFirst page in session, ranked by visits.\n\t\t\t\t</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent className=\"mask-b-from-50% mask-b-to-100% p-0 pb-2\">\n\t\t\t\t<Table className=\"border-t\">\n\t\t\t\t\t<TableCaption className=\"sr-only\">\n\t\t\t\t\t\tTop landing pages by visits with year-over-year change.\n\t\t\t\t\t</TableCaption>\n\t\t\t\t\t<TableHeader>\n\t\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t\t<TableHead className=\"pl-6\" scope=\"col\">\n\t\t\t\t\t\t\t\tPath\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t<TableHead className=\"text-end tabular-nums\" scope=\"col\">\n\t\t\t\t\t\t\t\tVisits\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t<TableHead className=\"pr-6 text-end\" scope=\"col\">\n\t\t\t\t\t\t\t\tChange\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody>\n\t\t\t\t\t\t{rows.map((row) => (\n\t\t\t\t\t\t\t<TableRow className=\"hover:bg-transparent\" key={row.path}>\n\t\t\t\t\t\t\t\t<TableCell className=\"max-w-[200px] truncate pl-6 font-medium\">\n\t\t\t\t\t\t\t\t\t<span className=\"w-max rounded border border-border bg-muted/50 px-1 py-px text-xs\">\n\t\t\t\t\t\t\t\t\t\t{row.path}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t<TableCell className=\"text-end text-muted-foreground text-xs tabular-nums\">\n\t\t\t\t\t\t\t\t\t{formatInteger(row.visits)}\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t<TableCell className=\"pr-6 text-end text-muted-foreground text-xs\">\n\t\t\t\t\t\t\t\t\t<span className=\"tabular-nums\">\n\t\t\t\t\t\t\t\t\t\t{row.delta > 0 ? \"+\" : \"\"}\n\t\t\t\t\t\t\t\t\t\t{row.delta}%\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</Table>\n\t\t\t</CardContent>\n\n\t\t\t<div className=\"mask-t-from-30% absolute inset-x-0 bottom-0 flex h-1/5 items-center justify-center bg-background\">\n\t\t\t\t<Button asChild className=\"relative\" variant=\"ghost\">\n\t\t\t\t\t<a href=\"#\">\n\t\t\t\t\t\tView All\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thugeicons=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tlucide=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tphosphor=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiArrowRightLine\"\n\t\t\t\t\t\t\ttabler=\"IconArrowRight\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</a>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</Card>\n\t);\n}\n"},{"path":"registry/blocks/dashboard/5/top-referrers.tsx","type":"registry:component","content":"import { formatInteger } from \"@/lib/formater\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\n\nconst rows = [\n\t{ host: \"news.ycombinator.com\", sessions: 1420 },\n\t{ host: \"t.co\", sessions: 980 },\n\t{ host: \"github.com\", sessions: 760 },\n\t{ host: \"producthunt.com\", sessions: 540 },\n\t{ host: \"reddit.com\", sessions: 410 },\n] as const;\n\nexport function TopReferrers() {\n\treturn (\n\t\t<Card className=\"relative dark:bg-transparent\">\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle className=\"text-balance\">Top referrers</CardTitle>\n\t\t\t\t<CardDescription className=\"text-pretty\">\n\t\t\t\t\tExternal sites sending the most attributed sessions.\n\t\t\t\t</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent className=\"mask-b-from-50% mask-b-to-100% p-0 pb-2\">\n\t\t\t\t<Table className=\"border-t\">\n\t\t\t\t\t<TableCaption className=\"sr-only\">\n\t\t\t\t\t\tTop referrer domains by attributed sessions.\n\t\t\t\t\t</TableCaption>\n\t\t\t\t\t<TableHeader>\n\t\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t\t<TableHead className=\"pl-6\" scope=\"col\">\n\t\t\t\t\t\t\t\tHost\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t<TableHead className=\"pr-6 text-end tabular-nums\" scope=\"col\">\n\t\t\t\t\t\t\t\tSessions\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody>\n\t\t\t\t\t\t{rows.map((row) => (\n\t\t\t\t\t\t\t<TableRow className=\"hover:bg-transparent\" key={row.host}>\n\t\t\t\t\t\t\t\t<TableCell className=\"max-w-[220px] truncate pl-6 font-medium\">\n\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">{row.host}</span>\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t<TableCell className=\"pr-6 text-end text-muted-foreground text-xs tabular-nums\">\n\t\t\t\t\t\t\t\t\t{formatInteger(row.sessions)}\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</Table>\n\t\t\t</CardContent>\n\n\t\t\t<div className=\"mask-t-from-30% absolute inset-x-0 bottom-0 flex h-1/5 items-center justify-center bg-background\">\n\t\t\t\t<Button asChild className=\"relative\" variant=\"ghost\">\n\t\t\t\t\t<a href=\"#\">\n\t\t\t\t\t\tView All\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thugeicons=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tlucide=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tphosphor=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiArrowRightLine\"\n\t\t\t\t\t\t\ttabler=\"IconArrowRight\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</a>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</Card>\n\t);\n}\n"},{"path":"registry/blocks/dashboard/5/traffic-sources-chart.tsx","type":"registry:component","content":"\"use client\";\n\nimport { formatCompactNumber } from \"@/lib/formater\";\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\tShareBarList,\n\tShareBarListContent,\n\tShareBarListFill,\n\tShareBarListItem,\n\tShareBarListLabel,\n\tShareBarListValue,\n} from \"@/components/share-bar-list\";\n\nconst chartData = [\n\t{ source: \"Organic search\", sessions: 4120 },\n\t{ source: \"Direct\", sessions: 2890 },\n\t{ source: \"Referral\", sessions: 1640 },\n\t{ source: \"Paid social\", sessions: 980 },\n\t{ source: \"Email\", sessions: 620 },\n] as const;\n\nconst maxSessions = Math.max(...chartData.map((d) => d.sessions));\n\nfunction barWidthPercent(sessions: number) {\n\tif (maxSessions <= 0) {\n\t\treturn 0;\n\t}\n\treturn (sessions / maxSessions) * 75;\n}\n\nexport function TrafficSourcesChart() {\n\treturn (\n\t\t<Card className=\"dark:bg-transparent\">\n\t\t\t<CardHeader className=\"border-b\">\n\t\t\t\t<CardTitle className=\"text-balance\">Sessions by source</CardTitle>\n\t\t\t\t<CardDescription className=\"text-pretty\">\n\t\t\t\t\tAttributed sessions in the last 12 months.\n\t\t\t\t</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent className=\"p-0 py-1\">\n\t\t\t\t<ShareBarList aria-label=\"Sessions by traffic source\">\n\t\t\t\t\t{chartData.map((row) => (\n\t\t\t\t\t\t<ShareBarListItem\n\t\t\t\t\t\t\tkey={row.source}\n\t\t\t\t\t\t\tvalue={barWidthPercent(row.sessions)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ShareBarListContent>\n\t\t\t\t\t\t\t\t<ShareBarListLabel>{row.source}</ShareBarListLabel>\n\t\t\t\t\t\t\t\t<ShareBarListValue>\n\t\t\t\t\t\t\t\t\t{formatCompactNumber(row.sessions)}\n\t\t\t\t\t\t\t\t</ShareBarListValue>\n\t\t\t\t\t\t\t</ShareBarListContent>\n\t\t\t\t\t\t\t<ShareBarListFill />\n\t\t\t\t\t\t</ShareBarListItem>\n\t\t\t\t\t))}\n\t\t\t\t</ShareBarList>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n"},{"path":"registry/blocks/dashboard/5/visitors-chart.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useId } from \"react\";\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\";\nimport { formatInteger } from \"@/lib/formater\";\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartTooltip,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { Delta, DeltaIcon, DeltaValue } from \"@/components/delta\";\n\nconst chartData = [\n\t{ month: \"January\", visitors: 555 },\n\t{ month: \"February\", visitors: 904 },\n\t{ month: \"March\", visitors: 727 },\n\t{ month: \"April\", visitors: 801 },\n\t{ month: \"May\", visitors: 942 },\n\t{ month: \"June\", visitors: 1048 },\n\t{ month: \"July\", visitors: 702 },\n\t{ month: \"August\", visitors: 1103 },\n\t{ month: \"September\", visitors: 879 },\n\t{ month: \"October\", visitors: 1046 },\n\t{ month: \"November\", visitors: 1407 },\n\t{ month: \"December\", visitors: 548 },\n];\n\nconst totalVisitors = chartData.reduce((sum, row) => sum + row.visitors, 0);\n\nconst chartConfig = {\n\tvisitors: {\n\t\tlabel: \"Visitors\",\n\t\tcolor: \"var(--chart-2)\",\n\t},\n} satisfies ChartConfig;\n\nexport function VisitorsChart() {\n\tconst gradientId = `visitors-area-${useId().replace(/:/g, \"\")}`;\n\n\treturn (\n\t\t<Card className=\"md:col-span-2 lg:col-span-3 dark:bg-transparent\">\n\t\t\t<CardHeader className=\"flex flex-row items-start justify-between\">\n\t\t\t\t<div className=\"flex flex-col gap-1.5\">\n\t\t\t\t\t<CardTitle className=\"font-mono text-2xl tabular-nums\">\n\t\t\t\t\t\t{formatInteger(totalVisitors)}\n\t\t\t\t\t</CardTitle>\n\t\t\t\t\t<CardDescription className=\"text-pretty\">\n\t\t\t\t\t\tTotal visitors in the last 12 months.\n\t\t\t\t\t</CardDescription>\n\t\t\t\t</div>\n\t\t\t\t<Delta value={7.2} variant=\"badge\">\n\t\t\t\t\t<DeltaIcon variant=\"trend\" />\n\t\t\t\t\t<DeltaValue suffix=\"%\" />\n\t\t\t\t\t<span>vs prior 12 months</span>\n\t\t\t\t</Delta>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<ChartContainer\n\t\t\t\t\tclassName=\"aspect-auto h-60 w-full\"\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t>\n\t\t\t\t\t<AreaChart\n\t\t\t\t\t\taccessibilityLayer\n\t\t\t\t\t\tdata={chartData}\n\t\t\t\t\t\tmargin={{\n\t\t\t\t\t\t\tleft: 12,\n\t\t\t\t\t\t\tright: 12,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t<linearGradient id={gradientId} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\toffset=\"0%\"\n\t\t\t\t\t\t\t\t\tstopColor=\"var(--color-visitors)\"\n\t\t\t\t\t\t\t\t\tstopOpacity={0.35}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\toffset=\"100%\"\n\t\t\t\t\t\t\t\t\tstopColor=\"var(--color-visitors)\"\n\t\t\t\t\t\t\t\t\tstopOpacity={0}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t<CartesianGrid vertical={false} />\n\t\t\t\t\t\t<XAxis\n\t\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\t\tdataKey=\"month\"\n\t\t\t\t\t\t\ttickFormatter={(value) => String(value).slice(0, 3)}\n\t\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\t\ttickMargin={8}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ChartTooltip\n\t\t\t\t\t\t\tcontent={<ChartTooltipContent indicator=\"dashed\" />}\n\t\t\t\t\t\t\tcursor={{\n\t\t\t\t\t\t\t\tstroke: \"var(--color-visitors)\",\n\t\t\t\t\t\t\t\tstrokeDasharray: \"3 3\",\n\t\t\t\t\t\t\t\tstrokeLinecap: \"round\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\twrapperStyle={{ outline: \"none\" }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Area\n\t\t\t\t\t\t\tdataKey=\"visitors\"\n\t\t\t\t\t\t\tdot={{\n\t\t\t\t\t\t\t\tfill: \"var(--color-visitors)\",\n\t\t\t\t\t\t\t\tr: 2.5,\n\t\t\t\t\t\t\t\tstrokeWidth: 2,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tfill={`url(#${gradientId})`}\n\t\t\t\t\t\t\tisAnimationActive={false}\n\t\t\t\t\t\t\tname={chartConfig.visitors.label}\n\t\t\t\t\t\t\tstroke=\"var(--color-visitors)\"\n\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\ttype=\"linear\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AreaChart>\n\t\t\t\t</ChartContainer>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n"},{"path":"registry/blocks/dashboard/5/web-vitals.tsx","type":"registry:component","content":"import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport { Delta, DeltaIcon, DeltaValue } from \"@/components/delta\";\n\nconst vitals = [\n\t{\n\t\tlabel: \"LCP\",\n\t\tname: \"Largest Contentful Paint\",\n\t\tvalue: \"1.9s\",\n\t\tdelta: 120,\n\t\tdeltaLabel: \"faster vs prior month\",\n\t\tsuffix: \"ms\",\n\t},\n\t{\n\t\tlabel: \"INP\",\n\t\tname: \"Interaction to Next Paint\",\n\t\tvalue: \"142ms\",\n\t\tdelta: 18,\n\t\tdeltaLabel: \"faster vs prior month\",\n\t\tsuffix: \"ms\",\n\t},\n\t{\n\t\tlabel: \"CLS\",\n\t\tname: \"Cumulative Layout Shift\",\n\t\tvalue: \"0.04\",\n\t\tdelta: 0.07,\n\t\tdeltaLabel: \"lower vs prior month\",\n\t\tsuffix: \"\",\n\t},\n] as const;\n\nexport function WebVitals() {\n\treturn (\n\t\t<Card className=\"md:col-span-2 lg:col-span-4 dark:bg-transparent\">\n\t\t\t<CardHeader className=\"border-b\">\n\t\t\t\t<CardTitle className=\"text-balance\">Core Web Vitals</CardTitle>\n\t\t\t\t<CardDescription className=\"text-pretty\">\n\t\t\t\t\tField experience on real sessions, measured at the origin.\n\t\t\t\t</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<ul className=\"grid gap-6 sm:grid-cols-3\">\n\t\t\t\t\t{vitals.map((v) => (\n\t\t\t\t\t\t<li className=\"flex flex-col gap-1\" key={v.label}>\n\t\t\t\t\t\t\t<p className=\"text-pretty font-medium text-sm\">{v.label}</p>\n\t\t\t\t\t\t\t<p className=\"text-pretty text-muted-foreground text-xs\">\n\t\t\t\t\t\t\t\t{v.name}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p className=\"text-balance font-semibold text-2xl tabular-nums\">\n\t\t\t\t\t\t\t\t{v.value}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-1.5 text-pretty text-muted-foreground text-xs\">\n\t\t\t\t\t\t\t\t<Delta value={v.delta} variant=\"default\">\n\t\t\t\t\t\t\t\t\t<DeltaIcon />\n\t\t\t\t\t\t\t\t\t<DeltaValue suffix={v.suffix} />\n\t\t\t\t\t\t\t\t</Delta>\n\t\t\t\t\t\t\t\t<span>{v.deltaLabel}</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n"},{"path":"registry/blocks/dashboard/delta.tsx","type":"registry:component","content":"\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\n\ntype DeltaIconVariant = \"default\" | \"trend\" | \"arrow\";\ntype DeltaVariant = \"default\" | \"badge\";\n\ntype DeltaContextValue = {\n\tvalue: number;\n};\n\nconst DeltaContext = React.createContext<DeltaContextValue | null>(null);\n\nfunction useDeltaValue() {\n\tconst context = React.useContext(DeltaContext);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"DeltaIcon and DeltaValue must be used inside a `Delta` component.\"\n\t\t);\n\t}\n\n\treturn context.value;\n}\n\nfunction Delta({\n\tclassName,\n\tvalue,\n\tvariant = \"default\",\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tvalue: number;\n\tvariant?: DeltaVariant;\n}) {\n\treturn (\n\t\t<DeltaContext.Provider value={{ value }}>\n\t\t\t{variant === \"badge\" ? (\n\t\t\t\t<Badge\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"gap-1 border-none tabular-nums [&_svg]:size-4 [&_svg]:shrink-0\",\n\t\t\t\t\t\tvalue > 0\n\t\t\t\t\t\t\t? \"bg-emerald-500/10 text-emerald-500\"\n\t\t\t\t\t\t\t: \"bg-red-500/10 text-red-500\",\n\t\t\t\t\t\tclassName\n\t\t\t\t\t)}\n\t\t\t\t\tdata-slot=\"delta\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t{...(props as React.ComponentProps<typeof Badge>)}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"inline-flex items-center gap-1 text-muted-foreground tabular-nums\",\n\t\t\t\t\t\t\"[&_svg]:size-3 [&_svg]:shrink-0\",\n\t\t\t\t\t\tvalue > 0 ? \"text-emerald-600 dark:text-emerald-400\" : \"\",\n\t\t\t\t\t\tvalue < 0 ? \"text-rose-600 dark:text-rose-400\" : \"\",\n\t\t\t\t\t\tclassName\n\t\t\t\t\t)}\n\t\t\t\t\tdata-slot=\"delta\"\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</DeltaContext.Provider>\n\t);\n}\n\nfunction FilledShell({\n\tvalue,\n\tchildren,\n}: {\n\tvalue: number;\n\tchildren: React.ReactNode;\n}) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex size-3 shrink-0 items-center justify-center rounded-full\",\n\t\t\t\t\"[&_svg]:size-2! [&_svg]:shrink-0 [&_svg]:stroke-3! [&_svg]:text-background\",\n\t\t\t\tvalue > 0 && \"bg-emerald-500\",\n\t\t\t\tvalue < 0 && \"bg-red-500\",\n\t\t\t\t(!value || value === 0) && \"bg-muted-foreground\"\n\t\t\t)}\n\t\t\tdata-slot=\"delta-icon\"\n\t\t>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n\nfunction DeltaIcon({\n\tvariant = \"default\",\n\tfilled = false,\n\tclassName,\n\t...props\n}: Omit<React.ComponentProps<\"svg\">, \"fill\"> & {\n\tvariant?: DeltaIconVariant;\n\tfilled?: boolean;\n}) {\n\tconst resolvedValue = useDeltaValue();\n\n\tconst mergedClassName = cn(className);\n\n\tconst shell = (node: React.ReactElement) =>\n\t\tfilled ? <FilledShell value={resolvedValue}>{node}</FilledShell> : node;\n\n\tconst slotProps = filled ? {} : { \"data-slot\": \"delta-icon\" as const };\n\n\tif (!resolvedValue || resolvedValue === 0) {\n\t\treturn shell(\n\t\t\t<IconPlaceholder\n\t\t\t\t{...slotProps}\n\t\t\t\tclassName={mergedClassName}\n\t\t\t\thugeicons=\"MinusSignIcon\"\n\t\t\t\tlucide=\"MinusIcon\"\n\t\t\t\tphosphor=\"MinusIcon\"\n\t\t\t\tremixicon=\"RiSubtractLine\"\n\t\t\t\ttabler=\"IconMinus\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (resolvedValue > 0) {\n\t\tif (variant === \"trend\") {\n\t\t\treturn shell(\n\t\t\t\t<IconPlaceholder\n\t\t\t\t\t{...slotProps}\n\t\t\t\t\tclassName={mergedClassName}\n\t\t\t\t\thugeicons=\"TradeUpIcon\"\n\t\t\t\t\tlucide=\"TrendingUpIcon\"\n\t\t\t\t\tphosphor=\"TrendUpIcon\"\n\t\t\t\t\tremixicon=\"RiArrowRightUpLine\"\n\t\t\t\t\ttabler=\"IconTrendingUp\"\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tif (variant === \"arrow\") {\n\t\t\treturn shell(\n\t\t\t\t<IconPlaceholder\n\t\t\t\t\t{...slotProps}\n\t\t\t\t\tclassName={mergedClassName}\n\t\t\t\t\thugeicons=\"ArrowUp02Icon\"\n\t\t\t\t\tlucide=\"ArrowUpIcon\"\n\t\t\t\t\tphosphor=\"ArrowUpIcon\"\n\t\t\t\t\tremixicon=\"RiArrowUpLine\"\n\t\t\t\t\ttabler=\"IconArrowUp\"\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn shell(\n\t\t\t<IconPlaceholder\n\t\t\t\t{...slotProps}\n\t\t\t\tclassName={mergedClassName}\n\t\t\t\thugeicons=\"ArrowUp01Icon\"\n\t\t\t\tlucide=\"ChevronUpIcon\"\n\t\t\t\tphosphor=\"CaretUpIcon\"\n\t\t\t\tremixicon=\"RiArrowUpSLine\"\n\t\t\t\ttabler=\"IconChevronUp\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (variant === \"trend\") {\n\t\treturn shell(\n\t\t\t<IconPlaceholder\n\t\t\t\t{...slotProps}\n\t\t\t\tclassName={mergedClassName}\n\t\t\t\thugeicons=\"TradeDownIcon\"\n\t\t\t\tlucide=\"TrendingDownIcon\"\n\t\t\t\tphosphor=\"TrendDownIcon\"\n\t\t\t\tremixicon=\"RiArrowRightDownLine\"\n\t\t\t\ttabler=\"IconTrendingDown\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (variant === \"arrow\") {\n\t\treturn shell(\n\t\t\t<IconPlaceholder\n\t\t\t\t{...slotProps}\n\t\t\t\tclassName={mergedClassName}\n\t\t\t\thugeicons=\"ArrowDown02Icon\"\n\t\t\t\tlucide=\"ArrowDownIcon\"\n\t\t\t\tphosphor=\"ArrowDownIcon\"\n\t\t\t\tremixicon=\"RiArrowDownLine\"\n\t\t\t\ttabler=\"IconArrowDown\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn shell(\n\t\t<IconPlaceholder\n\t\t\t{...slotProps}\n\t\t\tclassName={mergedClassName}\n\t\t\thugeicons=\"ArrowDown01Icon\"\n\t\t\tlucide=\"ChevronDownIcon\"\n\t\t\tphosphor=\"CaretDownIcon\"\n\t\t\tremixicon=\"RiArrowDownSLine\"\n\t\t\ttabler=\"IconChevronDown\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DeltaValue({\n\tclassName,\n\tprecision = 1,\n\tsuffix = \"%\",\n\tabsolute = true,\n\t...props\n}: React.ComponentProps<\"span\"> & {\n\tprecision?: number;\n\tsuffix?: string;\n\tabsolute?: boolean;\n}) {\n\tconst resolvedValue = useDeltaValue();\n\n\tconst formattedValue = (\n\t\tabsolute ? Math.abs(resolvedValue) : resolvedValue\n\t).toFixed(precision);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"tabular-nums\", className)}\n\t\t\tdata-slot=\"delta-value\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{formattedValue}\n\t\t\t{suffix}\n\t\t</span>\n\t);\n}\nexport { Delta, DeltaIcon, DeltaValue };\n"}]}