@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/charts/chart-pie-separator-none.ts

@@ -0,0 +1,77 @@
+/**
+ * A pie chart with no separator, a chart block ported from shadcn/ui's chart-pie-separator-none.
+ *
+ * Installed by `npx @webjsdev/ui add chart-pie-separator-none` at
+ * `components/charts/chart-pie-separator-none.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartPieSeparatorNone()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { pieChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+  { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+];
+
+const chartConfig = {
+  visitors: {
+    label: 'Visitors',
+  },
+  chrome: {
+    label: 'Chrome',
+    color: 'var(--chart-1)',
+  },
+  safari: {
+    label: 'Safari',
+    color: 'var(--chart-2)',
+  },
+  firefox: {
+    label: 'Firefox',
+    color: 'var(--chart-3)',
+  },
+  edge: {
+    label: 'Edge',
+    color: 'var(--chart-4)',
+  },
+  other: {
+    label: 'Other',
+    color: 'var(--chart-5)',
+  },
+} satisfies ChartConfig;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartPieSeparatorNone() {
+  return html`
+    <div data-slot="card" class=${cn(cardClass(), 'flex flex-col')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-0')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Pie Chart - Separator None</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex-1 pb-0')}>
+        ${pieChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by browser',
+          tooltip: { cursor: false, hideLabel: true },
+          pies: [{ dataKey: 'visitors', nameKey: 'browser', stroke: '0' }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="leading-none text-muted-foreground">Showing total visitors for the last 6 months</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-pie-simple.ts

@@ -0,0 +1,77 @@
+/**
+ * A simple pie chart, a chart block ported from shadcn/ui's chart-pie-simple.
+ *
+ * Installed by `npx @webjsdev/ui add chart-pie-simple` at
+ * `components/charts/chart-pie-simple.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartPieSimple()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { pieChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+  { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+];
+
+const chartConfig = {
+  visitors: {
+    label: 'Visitors',
+  },
+  chrome: {
+    label: 'Chrome',
+    color: 'var(--chart-1)',
+  },
+  safari: {
+    label: 'Safari',
+    color: 'var(--chart-2)',
+  },
+  firefox: {
+    label: 'Firefox',
+    color: 'var(--chart-3)',
+  },
+  edge: {
+    label: 'Edge',
+    color: 'var(--chart-4)',
+  },
+  other: {
+    label: 'Other',
+    color: 'var(--chart-5)',
+  },
+} satisfies ChartConfig;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartPieSimple() {
+  return html`
+    <div data-slot="card" class=${cn(cardClass(), 'flex flex-col')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-0')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Pie Chart</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex-1 pb-0')}>
+        ${pieChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by browser',
+          tooltip: { cursor: false, hideLabel: true },
+          pies: [{ dataKey: 'visitors', nameKey: 'browser' }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="leading-none text-muted-foreground">Showing total visitors for the last 6 months</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-pie-stacked.ts

@@ -0,0 +1,99 @@
+/**
+ * A pie chart with stacked sections, a chart block ported from shadcn/ui's chart-pie-stacked.
+ *
+ * Installed by `npx @webjsdev/ui add chart-pie-stacked` at
+ * `components/charts/chart-pie-stacked.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartPieStacked()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { pieChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartConfig = {
+  visitors: {
+    label: 'Visitors',
+  },
+  desktop: {
+    label: 'Desktop',
+  },
+  mobile: {
+    label: 'Mobile',
+  },
+  january: {
+    label: 'January',
+    color: 'var(--chart-1)',
+  },
+  february: {
+    label: 'February',
+    color: 'var(--chart-2)',
+  },
+  march: {
+    label: 'March',
+    color: 'var(--chart-3)',
+  },
+  april: {
+    label: 'April',
+    color: 'var(--chart-4)',
+  },
+  may: {
+    label: 'May',
+    color: 'var(--chart-5)',
+  },
+} satisfies ChartConfig;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+const desktopData = [
+  { month: 'january', desktop: 186, fill: 'var(--color-january)' },
+  { month: 'february', desktop: 305, fill: 'var(--color-february)' },
+  { month: 'march', desktop: 237, fill: 'var(--color-march)' },
+  { month: 'april', desktop: 173, fill: 'var(--color-april)' },
+  { month: 'may', desktop: 209, fill: 'var(--color-may)' },
+];
+
+const mobileData = [
+  { month: 'january', mobile: 80, fill: 'var(--color-january)' },
+  { month: 'february', mobile: 200, fill: 'var(--color-february)' },
+  { month: 'march', mobile: 120, fill: 'var(--color-march)' },
+  { month: 'april', mobile: 190, fill: 'var(--color-april)' },
+  { month: 'may', mobile: 130, fill: 'var(--color-may)' },
+];
+
+export default function ChartPieStacked() {
+  return html`
+    <div data-slot="card" class=${cn(cardClass(), 'flex flex-col')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-0')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Pie Chart - Stacked</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex-1 pb-0')}>
+        ${pieChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: desktopData,
+          title: 'Desktop and mobile visitors by month',
+          tooltip: {
+            labelKey: 'visitors',
+            nameKey: 'month',
+            indicator: 'line',
+            labelFormatter: (_, payload) => chartConfig[payload[0]?.dataKey as keyof typeof chartConfig]?.label,
+          },
+          pies: [
+            { data: desktopData, dataKey: 'desktop', outerRadius: 60 },
+            { data: mobileData, dataKey: 'mobile', innerRadius: 70, outerRadius: 90 },
+          ],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="leading-none text-muted-foreground">Showing total visitors for the last 6 months</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-radar-default.ts

@@ -0,0 +1,61 @@
+/**
+ * A radar chart, a chart block ported from shadcn/ui's chart-radar-default.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-default` at
+ * `components/charts/chart-radar-default.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarDefault()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radarChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { month: 'January', desktop: 186 },
+  { month: 'February', desktop: 305 },
+  { month: 'March', desktop: 237 },
+  { month: 'April', desktop: 273 },
+  { month: 'May', desktop: 209 },
+  { month: 'June', desktop: 214 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+} satisfies ChartConfig;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartRadarDefault() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-4')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Radar Chart</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Showing total visitors for the last 6 months</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'pb-0')}>
+        ${radarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by month',
+          tooltip: { cursor: false },
+          angleAxis: { dataKey: 'month' },
+          grid: {},
+          radars: [{ dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0.6 }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="flex items-center gap-2 leading-none text-muted-foreground">January - June 2024</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-radar-dots.ts

@@ -0,0 +1,61 @@
+/**
+ * A radar chart with dots, a chart block ported from shadcn/ui's chart-radar-dots.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-dots` at
+ * `components/charts/chart-radar-dots.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarDots()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radarChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { month: 'January', desktop: 186 },
+  { month: 'February', desktop: 305 },
+  { month: 'March', desktop: 237 },
+  { month: 'April', desktop: 273 },
+  { month: 'May', desktop: 209 },
+  { month: 'June', desktop: 214 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+} satisfies ChartConfig;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartRadarDots() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Radar Chart - Dots</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Showing total visitors for the last 6 months</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'pb-0')}>
+        ${radarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by month',
+          tooltip: { cursor: false },
+          angleAxis: { dataKey: 'month' },
+          grid: {},
+          radars: [{ dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0.6, dot: { r: 4, fillOpacity: 1 } }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="flex items-center gap-2 leading-none text-muted-foreground">January - June 2024</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-radar-grid-circle-fill.ts

@@ -0,0 +1,61 @@
+/**
+ * A radar chart with a grid and circle fill, a chart block ported from shadcn/ui's chart-radar-grid-circle-fill.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-grid-circle-fill` at
+ * `components/charts/chart-radar-grid-circle-fill.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarGridCircleFill()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radarChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { month: 'January', desktop: 186 },
+  { month: 'February', desktop: 285 },
+  { month: 'March', desktop: 237 },
+  { month: 'April', desktop: 203 },
+  { month: 'May', desktop: 209 },
+  { month: 'June', desktop: 264 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+} satisfies ChartConfig;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartRadarGridCircleFill() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-4')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Radar Chart - Grid Circle Filled</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Showing total visitors for the last 6 months</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'pb-0')}>
+        ${radarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by month',
+          tooltip: { cursor: false },
+          angleAxis: { dataKey: 'month' },
+          grid: { class: 'fill-(--color-desktop) opacity-20', gridType: 'circle' },
+          radars: [{ dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0.5 }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="flex items-center gap-2 leading-none text-muted-foreground">January - June 2024</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-radar-grid-circle-no-lines.ts

@@ -0,0 +1,61 @@
+/**
+ * A radar chart with a grid and circle fill, a chart block ported from shadcn/ui's chart-radar-grid-circle-no-lines.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-grid-circle-no-lines` at
+ * `components/charts/chart-radar-grid-circle-no-lines.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarGridCircleNoLines()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radarChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { month: 'January', desktop: 186 },
+  { month: 'February', desktop: 305 },
+  { month: 'March', desktop: 237 },
+  { month: 'April', desktop: 203 },
+  { month: 'May', desktop: 209 },
+  { month: 'June', desktop: 214 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+} satisfies ChartConfig;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartRadarGridCircleNoLines() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-4')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Radar Chart - Grid Circle - No lines</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Showing total visitors for the last 6 months</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'pb-0')}>
+        ${radarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by month',
+          tooltip: { cursor: false, hideLabel: true },
+          angleAxis: { dataKey: 'month' },
+          grid: { gridType: 'circle', radialLines: false },
+          radars: [{ dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0.6, dot: { r: 4, fillOpacity: 1 } }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="flex items-center gap-2 leading-none text-muted-foreground">January - June 2024</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-radar-grid-circle.ts

@@ -0,0 +1,61 @@
+/**
+ * A radar chart with a grid and circle, a chart block ported from shadcn/ui's chart-radar-grid-circle.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-grid-circle` at
+ * `components/charts/chart-radar-grid-circle.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarGridCircle()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radarChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { month: 'January', desktop: 186 },
+  { month: 'February', desktop: 305 },
+  { month: 'March', desktop: 237 },
+  { month: 'April', desktop: 273 },
+  { month: 'May', desktop: 209 },
+  { month: 'June', desktop: 214 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+} satisfies ChartConfig;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartRadarGridCircle() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-4')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Radar Chart - Grid Circle</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Showing total visitors for the last 6 months</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'pb-0')}>
+        ${radarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by month',
+          tooltip: { cursor: false, hideLabel: true },
+          angleAxis: { dataKey: 'month' },
+          grid: { gridType: 'circle' },
+          radars: [{ dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0.6, dot: { r: 4, fillOpacity: 1 } }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="flex items-center gap-2 leading-none text-muted-foreground">January - June 2024</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-radar-grid-custom.ts

@@ -0,0 +1,61 @@
+/**
+ * A radar chart with a custom grid, a chart block ported from shadcn/ui's chart-radar-grid-custom.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-grid-custom` at
+ * `components/charts/chart-radar-grid-custom.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarGridCustom()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radarChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { month: 'January', desktop: 186 },
+  { month: 'February', desktop: 305 },
+  { month: 'March', desktop: 237 },
+  { month: 'April', desktop: 273 },
+  { month: 'May', desktop: 209 },
+  { month: 'June', desktop: 214 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+} satisfies ChartConfig;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartRadarGridCustom() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-4')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Radar Chart - Grid Custom</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Showing total visitors for the last 6 months</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'pb-0')}>
+        ${radarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by month',
+          tooltip: { cursor: false, hideLabel: true },
+          angleAxis: { dataKey: 'month' },
+          grid: { radialLines: false, polarRadius: [90], strokeWidth: 1 },
+          radars: [{ dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0.6 }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="flex items-center gap-2 leading-none text-muted-foreground">January - June 2024</div>
+      </div>
+    </div>
+  `;
+}