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

apps/v4/components/chart-toolbar.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import { cn } from "cn"
+import {
+  AreaChartIcon,
+  BarChartBigIcon,
+  HexagonIcon,
+  LineChartIcon,
+  MousePointer2Icon,
+  PieChartIcon,
+  RadarIcon,
+} from "lucide-react"
+
+import { ChartCodeViewer } from "@/components/chart-code-viewer"
+import { ChartCopyButton } from "@/components/chart-copy-button"
+import { type Chart } from "@/components/chart-display"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+
+export function ChartToolbar({
+  chart,
+  className,
+  children,
+}: {
+  chart: Chart
+} & React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <div className="flex items-center gap-1.5 pl-1 text-[13px] text-muted-foreground [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]">
+        <ChartTitle chart={chart} />
+      </div>
+      <div className="ml-auto flex items-center gap-2 [&>form]:flex">
+        <ChartCopyButton
+          event="copy_chart_code"
+          name={chart.name}
+          code={chart.files?.[0]?.content ?? ""}
+          className="[&_svg]-h-3 h-6 w-6 rounded-[6px] bg-transparent text-foreground shadow-none hover:bg-muted dark:text-foreground [&_svg]:w-3"
+        />
+        <Separator
+          orientation="vertical"
+          className="mx-0 hidden h-4! md:flex"
+        />
+        <ChartCodeViewer chart={chart}>{children}</ChartCodeViewer>
+      </div>
+    </div>
+  )
+}
+
+function ChartTitle({ chart }: { chart: Chart }) {
+  if (chart.name.includes("chart-line")) {
+    return (
+      <>
+        <LineChartIcon /> Line Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-bar")) {
+    return (
+      <>
+        <BarChartBigIcon /> Bar Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-pie")) {
+    return (
+      <>
+        <PieChartIcon /> Pie Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-area")) {
+    return (
+      <>
+        <AreaChartIcon /> Area Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-radar")) {
+    return (
+      <>
+        <HexagonIcon /> Radar Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-radial")) {
+    return (
+      <>
+        <RadarIcon /> Radial Chart
+      </>
+    )
+  }
+
+  if (chart.name.includes("chart-tooltip")) {
+    return (
+      <>
+        <MousePointer2Icon />
+        Tooltip
+      </>
+    )
+  }
+
+  return chart.name
+}