snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/components/chart-display.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { cn } from "cn"
+import { type registryItemSchema } from "shadcn/schema"
+import { type z } from "zod"
+
+import { highlightCode } from "@/lib/highlight-code"
+import { getRegistryItem } from "@/lib/registry"
+import { ChartIframe } from "@/components/chart-iframe"
+import { ChartToolbar } from "@/components/chart-toolbar"
+import { type Style } from "@/registry/_legacy-styles"
+
+export type Chart = z.infer<typeof registryItemSchema> & {
+  highlightedCode: string
+}
+
+export function ChartDisplay({
+  chart,
+  styleName,
+  className,
+}: {
+  chart: Chart
+  styleName: string
+} & React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "themes-wrapper group relative flex flex-col overflow-hidden rounded-xl transition-all duration-200 ease-in-out hover:z-30",
+        className
+      )}
+    >
+      <ChartToolbar
+        chart={chart}
+        className="relative z-20 flex justify-end px-3 py-2.5"
+      />
+      <div className="relative z-10 overflow-hidden rounded-xl bg-background">
+        <ChartIframe
+          src={`/view/${styleName}/${chart.name}`}
+          height={460}
+          title={chart.name}
+        />
+      </div>
+    </div>
+  )
+}
+
+// Exported for parallel prefetching in page components.
+export const getCachedRegistryItem = React.cache(
+  async (name: string, styleName: Style["name"]) => {
+    return await getRegistryItem(name, styleName)
+  }
+)
+
+export const getChartHighlightedCode = React.cache(async (content: string) => {
+  return await highlightCode(content)
+})