fix: add missing API imports (#1560)

* fix: add missing API imports

* chore: update

Author: jevin98

apps/v4/public/r/index.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/ChartAreaAxes.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from \"@unovis/vue\"\n\nimport { TrendingUp } from \"lucide-vue-next\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartCrosshair,\n  ChartTooltip,\n  ChartTooltipContent,\n  componentToString,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nconst description = \"An area chart with axes\"\n\nconst chartData = [\n  { month: 1, monthLabel: \"January\", desktop: 186, mobile: 80 },\n  { month: 2, monthLabel: \"February\", desktop: 305, mobile: 200 },\n  { month: 3, monthLabel: \"March\", desktop: 237, mobile: 120 },\n  { month: 4, monthLabel: \"April\", desktop: 73, mobile: 190 },\n  { month: 5, monthLabel: \"May\", desktop: 209, mobile: 130 },\n  { month: 6, monthLabel: \"June\", desktop: 214, mobile: 140 },\n]\n\ntype Data = typeof chartData[number]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n</script>\n\n<template>\n  <Card>\n    <CardHeader>\n      <CardTitle>Area Chart - Axes</CardTitle>\n      <CardDescription>\n        Showing total visitors for the last 6 months\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <ChartContainer :config=\"chartConfig\">\n        <VisXYContainer :data=\"chartData\">\n          <VisArea\n            :x=\"(d: Data) => d.month\"\n            :y=\"[(d: Data) => d.mobile, (d: Data) => d.desktop]\"\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]\"\n            :opacity=\"0.4\"\n          />\n          <VisLine\n            :x=\"(d: Data) => d.month\"\n            :y=\"[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]\"\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]\"\n            :line-width=\"1\"\n          />\n          <VisAxis\n            type=\"x\"\n            :x=\"(d: Data) => d.month\"\n            :tick-line=\"false\"\n            :domain-line=\"false\"\n            :grid-line=\"false\"\n            :num-ticks=\"6\"\n            :tick-format=\"(d: number, index: number) => {\n              return chartData[index].monthLabel.slice(0, 3)\n            }\"\n          />\n          <VisAxis\n            type=\"y\"\n            :num-ticks=\"3\"\n            :tick-line=\"false\"\n            :domain-line=\"false\"\n          />\n          <ChartTooltip />\n          <ChartCrosshair\n            :template=\"componentToString(chartConfig, ChartTooltipContent, { labelKey: 'monthLabel' })\"\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i % 2]\"\n          />\n        </VisXYContainer>\n      </ChartContainer>\n    </CardContent>\n    <CardFooter>\n      <div class=\"flex w-full items-start gap-2 text-sm\">\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month <TrendingUp class=\"h-4 w-4\" />\n          </div>\n          <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </div>\n      </div>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\r\nimport type {\r\n  ChartConfig,\r\n} from \"@/registry/new-york-v4/ui/chart\"\r\n// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\r\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from \"@unovis/vue\"\r\n\r\nimport { TrendingUp } from \"lucide-vue-next\"\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/registry/new-york-v4/ui/card\"\r\nimport {\r\n  ChartContainer,\r\n  ChartCrosshair,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n  componentToString,\r\n} from \"@/registry/new-york-v4/ui/chart\"\r\n\r\nconst description = \"An area chart with axes\"\r\n\r\nconst chartData = [\r\n  { month: 1, monthLabel: \"January\", desktop: 186, mobile: 80 },\r\n  { month: 2, monthLabel: \"February\", desktop: 305, mobile: 200 },\r\n  { month: 3, monthLabel: \"March\", desktop: 237, mobile: 120 },\r\n  { month: 4, monthLabel: \"April\", desktop: 73, mobile: 190 },\r\n  { month: 5, monthLabel: \"May\", desktop: 209, mobile: 130 },\r\n  { month: 6, monthLabel: \"June\", desktop: 214, mobile: 140 },\r\n]\r\n\r\ntype Data = typeof chartData[number]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: \"Desktop\",\r\n    color: \"var(--chart-1)\",\r\n  },\r\n  mobile: {\r\n    label: \"Mobile\",\r\n    color: \"var(--chart-2)\",\r\n  },\r\n} satisfies ChartConfig\r\n</script>\r\n\r\n<template>\r\n  <Card>\r\n    <CardHeader>\r\n      <CardTitle>Area Chart - Axes</CardTitle>\r\n      <CardDescription>\r\n        Showing total visitors for the last 6 months\r\n      </CardDescription>\r\n    </CardHeader>\r\n    <CardContent>\r\n      <ChartContainer :config=\"chartConfig\">\r\n        <VisXYContainer :data=\"chartData\">\r\n          <VisArea\r\n            :x=\"(d: Data) => d.month\"\r\n            :y=\"[(d: Data) => d.mobile, (d: Data) => d.desktop]\"\r\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]\"\r\n            :opacity=\"0.4\"\r\n          />\r\n          <VisLine\r\n            :x=\"(d: Data) => d.month\"\r\n            :y=\"[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]\"\r\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]\"\r\n            :line-width=\"1\"\r\n          />\r\n          <VisAxis\r\n            type=\"x\"\r\n            :x=\"(d: Data) => d.month\"\r\n            :tick-line=\"false\"\r\n            :domain-line=\"false\"\r\n            :grid-line=\"false\"\r\n            :num-ticks=\"6\"\r\n            :tick-format=\"(d: number, index: number) => {\r\n              return chartData[index].monthLabel.slice(0, 3)\r\n            }\"\r\n          />\r\n          <VisAxis\r\n            type=\"y\"\r\n            :num-ticks=\"3\"\r\n            :tick-line=\"false\"\r\n            :domain-line=\"false\"\r\n          />\r\n          <ChartTooltip />\r\n          <ChartCrosshair\r\n            :template=\"componentToString(chartConfig, ChartTooltipContent, { labelKey: 'monthLabel' })\"\r\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i % 2]\"\r\n          />\r\n        </VisXYContainer>\r\n      </ChartContainer>\r\n    </CardContent>\r\n    <CardFooter>\r\n      <div class=\"flex w-full items-start gap-2 text-sm\">\r\n        <div class=\"grid gap-2\">\r\n          <div class=\"flex items-center gap-2 leading-none font-medium\">\r\n            Trending up by 5.2% this month <TrendingUp class=\"h-4 w-4\" />\r\n          </div>\r\n          <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\r\n            January - June 2024\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </CardFooter>\r\n  </Card>\r\n</template>\r\n",
       "type": "registry:block"
     }
   ],

apps/v4/public/r/styles/new-york-v4/ChartAreaAxes.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/ChartAreaGradient.vue",
-      "content": "<script setup lang=\"ts\">\nimport type {\n  ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from \"@unovis/vue\"\n\nimport { TrendingUp } from \"lucide-vue-next\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartCrosshair,\n  ChartTooltip,\n  ChartTooltipContent,\n  componentToString,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nconst description = \"An area chart with axes\"\n\nconst chartData = [\n  { month: 1, monthLabel: \"January\", desktop: 186, mobile: 80 },\n  { month: 2, monthLabel: \"February\", desktop: 305, mobile: 200 },\n  { month: 3, monthLabel: \"March\", desktop: 237, mobile: 120 },\n  { month: 4, monthLabel: \"April\", desktop: 73, mobile: 190 },\n  { month: 5, monthLabel: \"May\", desktop: 209, mobile: 130 },\n  { month: 6, monthLabel: \"June\", desktop: 214, mobile: 140 },\n]\n\ntype Data = typeof chartData[number]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nconst svgDefs = `\n  <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n    <stop\n      offset=\"5%\"\n      stop-color=\"var(--color-desktop)\"\n      stop-opacity=\"0.8\"\n    />\n    <stop\n      offset=\"95%\"\n      stop-color=\"var(--color-desktop)\"\n      stop-opacity=\"0.1\"\n    />\n  </linearGradient>\n  <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n    <stop\n      offset=\"5%\"\n      stop-color=\"var(--color-mobile)\"\n      stop-opacity=\"0.8\"\n    />\n    <stop\n      offset=\"95%\"\n      stop-color=\"var(--color-mobile)\"\n      stop-opacity=\"0.1\"\n    />\n  </linearGradient>\n`\n</script>\n\n<template>\n  <Card>\n    <CardHeader>\n      <CardTitle>Area Chart - Gradient</CardTitle>\n      <CardDescription>\n        Showing total visitors for the last 6 months\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <ChartContainer :config=\"chartConfig\">\n        <VisXYContainer :data=\"chartData\" :svg-defs=\"svgDefs\">\n          <VisArea\n            :x=\"(d: Data) => d.month\"\n            :y=\"[(d: Data) => d.mobile, (d: Data) => d.desktop]\"\n            :color=\"(d: Data, i: number) => ['url(#fillMobile)', 'url(#fillDesktop)'][i]\"\n            :opacity=\"0.4\"\n          />\n          <VisLine\n            :x=\"(d: Data) => d.month\"\n            :y=\"[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]\"\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]\"\n            :line-width=\"1\"\n          />\n          <VisAxis\n            type=\"x\"\n            :x=\"(d: Data) => d.month\"\n            :tick-line=\"false\"\n            :domain-line=\"false\"\n            :grid-line=\"false\"\n            :num-ticks=\"6\"\n            :tick-format=\"(d: number, index: number) => {\n              return chartData[index].monthLabel.slice(0, 3)\n            }\"\n          />\n          <VisAxis\n            type=\"y\"\n            :num-ticks=\"3\"\n            :tick-line=\"false\"\n            :domain-line=\"false\"\n            :tick-format=\"(d: number, index: number) => ''\"\n          />\n          <ChartTooltip />\n          <ChartCrosshair\n            :template=\"componentToString(chartConfig, ChartTooltipContent, { labelKey: 'monthLabel' })\"\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i % 2]\"\n          />\n        </VisXYContainer>\n      </ChartContainer>\n    </CardContent>\n    <CardFooter>\n      <div class=\"flex w-full items-start gap-2 text-sm\">\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month <TrendingUp class=\"h-4 w-4\" />\n          </div>\n          <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </div>\n      </div>\n    </CardFooter>\n  </Card>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\r\nimport type {\r\n  ChartConfig,\r\n} from \"@/registry/new-york-v4/ui/chart\"\r\n// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\r\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from \"@unovis/vue\"\r\n\r\nimport { TrendingUp } from \"lucide-vue-next\"\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"@/registry/new-york-v4/ui/card\"\r\nimport {\r\n  ChartContainer,\r\n  ChartCrosshair,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n  componentToString,\r\n} from \"@/registry/new-york-v4/ui/chart\"\r\n\r\nconst description = \"An area chart with axes\"\r\n\r\nconst chartData = [\r\n  { month: 1, monthLabel: \"January\", desktop: 186, mobile: 80 },\r\n  { month: 2, monthLabel: \"February\", desktop: 305, mobile: 200 },\r\n  { month: 3, monthLabel: \"March\", desktop: 237, mobile: 120 },\r\n  { month: 4, monthLabel: \"April\", desktop: 73, mobile: 190 },\r\n  { month: 5, monthLabel: \"May\", desktop: 209, mobile: 130 },\r\n  { month: 6, monthLabel: \"June\", desktop: 214, mobile: 140 },\r\n]\r\n\r\ntype Data = typeof chartData[number]\r\n\r\nconst chartConfig = {\r\n  desktop: {\r\n    label: \"Desktop\",\r\n    color: \"var(--chart-1)\",\r\n  },\r\n  mobile: {\r\n    label: \"Mobile\",\r\n    color: \"var(--chart-2)\",\r\n  },\r\n} satisfies ChartConfig\r\n\r\nconst svgDefs = `\r\n  <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n    <stop\r\n      offset=\"5%\"\r\n      stop-color=\"var(--color-desktop)\"\r\n      stop-opacity=\"0.8\"\r\n    />\r\n    <stop\r\n      offset=\"95%\"\r\n      stop-color=\"var(--color-desktop)\"\r\n      stop-opacity=\"0.1\"\r\n    />\r\n  </linearGradient>\r\n  <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n    <stop\r\n      offset=\"5%\"\r\n      stop-color=\"var(--color-mobile)\"\r\n      stop-opacity=\"0.8\"\r\n    />\r\n    <stop\r\n      offset=\"95%\"\r\n      stop-color=\"var(--color-mobile)\"\r\n      stop-opacity=\"0.1\"\r\n    />\r\n  </linearGradient>\r\n`\r\n</script>\r\n\r\n<template>\r\n  <Card>\r\n    <CardHeader>\r\n      <CardTitle>Area Chart - Gradient</CardTitle>\r\n      <CardDescription>\r\n        Showing total visitors for the last 6 months\r\n      </CardDescription>\r\n    </CardHeader>\r\n    <CardContent>\r\n      <ChartContainer :config=\"chartConfig\">\r\n        <VisXYContainer :data=\"chartData\" :svg-defs=\"svgDefs\">\r\n          <VisArea\r\n            :x=\"(d: Data) => d.month\"\r\n            :y=\"[(d: Data) => d.mobile, (d: Data) => d.desktop]\"\r\n            :color=\"(d: Data, i: number) => ['url(#fillMobile)', 'url(#fillDesktop)'][i]\"\r\n            :opacity=\"0.4\"\r\n          />\r\n          <VisLine\r\n            :x=\"(d: Data) => d.month\"\r\n            :y=\"[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]\"\r\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]\"\r\n            :line-width=\"1\"\r\n          />\r\n          <VisAxis\r\n            type=\"x\"\r\n            :x=\"(d: Data) => d.month\"\r\n            :tick-line=\"false\"\r\n            :domain-line=\"false\"\r\n            :grid-line=\"false\"\r\n            :num-ticks=\"6\"\r\n            :tick-format=\"(d: number, index: number) => {\r\n              return chartData[index].monthLabel.slice(0, 3)\r\n            }\"\r\n          />\r\n          <VisAxis\r\n            type=\"y\"\r\n            :num-ticks=\"3\"\r\n            :tick-line=\"false\"\r\n            :domain-line=\"false\"\r\n            :tick-format=\"(d: number, index: number) => ''\"\r\n          />\r\n          <ChartTooltip />\r\n          <ChartCrosshair\r\n            :template=\"componentToString(chartConfig, ChartTooltipContent, { labelKey: 'monthLabel' })\"\r\n            :color=\"(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i % 2]\"\r\n          />\r\n        </VisXYContainer>\r\n      </ChartContainer>\r\n    </CardContent>\r\n    <CardFooter>\r\n      <div class=\"flex w-full items-start gap-2 text-sm\">\r\n        <div class=\"grid gap-2\">\r\n          <div class=\"flex items-center gap-2 leading-none font-medium\">\r\n            Trending up by 5.2% this month <TrendingUp class=\"h-4 w-4\" />\r\n          </div>\r\n          <div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\r\n            January - June 2024\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </CardFooter>\r\n  </Card>\r\n</template>\r\n",
       "type": "registry:block"
     }
   ],