@webjsdev/ui 0.3.16 → 0.4.0

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

@@ -0,0 +1,61 @@
+/**
+ * A radar chart with a grid filled, a chart block ported from shadcn/ui's chart-radar-grid-fill.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-grid-fill` at
+ * `components/charts/chart-radar-grid-fill.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarGridFill()}`.
+ */
+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 ChartRadarGridFill() {
+  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 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, hideLabel: true },
+          angleAxis: { dataKey: 'month' },
+          grid: { class: 'fill-(--color-desktop) opacity-20' },
+          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-none.ts

@@ -0,0 +1,60 @@
+/**
+ * A radar chart with no grid, a chart block ported from shadcn/ui's chart-radar-grid-none.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-grid-none` at
+ * `components/charts/chart-radar-grid-none.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarGridNone()}`.
+ */
+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 ChartRadarGridNone() {
+  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 None</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' },
+          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-icons.ts

@@ -0,0 +1,76 @@
+/**
+ * A radar chart with icons, a chart block ported from shadcn/ui's chart-radar-icons.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-icons` at
+ * `components/charts/chart-radar-icons.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarIcons()}`.
+ */
+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, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+    icon: () => ArrowDownFromLine(),
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--chart-2)',
+    icon: () => ArrowUpFromLine(),
+  },
+} 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>`;
+
+// lucide's arrow-down-from-line and arrow-up-from-line, the series icons.
+const ArrowDownFromLine = () => 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-arrow-down-from-line"><path d="M19 3H5"></path><path d="M12 21V7"></path><path d="m6 15 6 6 6-6"></path></svg>`;
+const ArrowUpFromLine = () => 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-arrow-up-from-line"><path d="m18 9-6-6-6 6"></path><path d="M12 3v14"></path><path d="M5 21h14"></path></svg>`;
+
+export default function ChartRadarIcons() {
+  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 - Icons</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Showing total visitors for the last 6 months</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${radarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by month',
+          tooltip: { cursor: false, indicator: 'line' },
+          angleAxis: { dataKey: 'month' },
+          grid: {},
+          margin: { top: -40, bottom: -10, left: 0, right: 0 },
+          legend: { class: 'mt-8', height: 60 },
+          radars: [
+            { dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0.6 },
+            { dataKey: 'mobile', fill: 'var(--color-mobile)' },
+          ],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 pt-4 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-label-custom.ts

@@ -0,0 +1,77 @@
+/**
+ * A radar chart with a custom label, a chart block ported from shadcn/ui's chart-radar-label-custom.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-label-custom` at
+ * `components/charts/chart-radar-label-custom.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarLabelCustom()}`.
+ */
+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, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--chart-2)',
+  },
+} 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 ChartRadarLabelCustom() {
+  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 - Custom Label</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, indicator: 'line' },
+          angleAxis: {
+            dataKey: 'month',
+            // Each month as desktop / mobile over its name.
+            tick: ({ x, y, textAnchor, index, datum }) => svg`
+              <text x=${x} y=${y + (index === 0 ? -10 : 0)} text-anchor=${textAnchor} font-size="13" font-weight="500">
+                <tspan>${datum.desktop}</tspan><tspan class="fill-muted-foreground">/</tspan><tspan>${datum.mobile}</tspan><tspan
+                  x=${x} dy="1rem" font-size="12" class="fill-muted-foreground">${datum.month}</tspan>
+              </text>`,
+          },
+          grid: {},
+          margin: { top: 10, right: 10, bottom: 10, left: 10 },
+          radars: [
+            { dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0.6 },
+            { dataKey: 'mobile', fill: 'var(--color-mobile)' },
+          ],
+        })}
+      </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-legend.ts

@@ -0,0 +1,70 @@
+/**
+ * A radar chart with a legend, a chart block ported from shadcn/ui's chart-radar-legend.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-legend` at
+ * `components/charts/chart-radar-legend.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarLegend()}`.
+ */
+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, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--chart-2)',
+  },
+} 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 ChartRadarLegend() {
+  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 - Legend</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Showing total visitors for the last 6 months</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${radarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by month',
+          tooltip: { cursor: false, indicator: 'line' },
+          angleAxis: { dataKey: 'month' },
+          grid: {},
+          margin: { top: -40, bottom: -10, left: 0, right: 0 },
+          legend: { class: 'mt-8', height: 60 },
+          radars: [
+            { dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0.6 },
+            { dataKey: 'mobile', fill: 'var(--color-mobile)' },
+          ],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 pt-4 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-lines-only.ts

@@ -0,0 +1,68 @@
+/**
+ * A radar chart with lines only, a chart block ported from shadcn/ui's chart-radar-lines-only.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-lines-only` at
+ * `components/charts/chart-radar-lines-only.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarLinesOnly()}`.
+ */
+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, mobile: 160 },
+  { month: 'February', desktop: 185, mobile: 170 },
+  { month: 'March', desktop: 207, mobile: 180 },
+  { month: 'April', desktop: 173, mobile: 160 },
+  { month: 'May', desktop: 160, mobile: 190 },
+  { month: 'June', desktop: 174, mobile: 204 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--chart-2)',
+  },
+} 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 ChartRadarLinesOnly() {
+  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 - Lines Only</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, indicator: 'line' },
+          angleAxis: { dataKey: 'month' },
+          grid: { radialLines: false },
+          radars: [
+            { dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0, stroke: 'var(--color-desktop)', strokeWidth: 2 },
+            { dataKey: 'mobile', fill: 'var(--color-mobile)', fillOpacity: 0, stroke: 'var(--color-mobile)', strokeWidth: 2 },
+          ],
+        })}
+      </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-multiple.ts

@@ -0,0 +1,68 @@
+/**
+ * A radar chart with multiple data, a chart block ported from shadcn/ui's chart-radar-multiple.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-multiple` at
+ * `components/charts/chart-radar-multiple.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarMultiple()}`.
+ */
+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, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--chart-2)',
+  },
+} 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 ChartRadarMultiple() {
+  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 - Multiple</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, indicator: 'line' },
+          angleAxis: { dataKey: 'month' },
+          grid: {},
+          radars: [
+            { dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0.6 },
+            { dataKey: 'mobile', fill: 'var(--color-mobile)' },
+          ],
+        })}
+      </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-radius.ts

@@ -0,0 +1,68 @@
+/**
+ * A radar chart with a radius axis, a chart block ported from shadcn/ui's chart-radar-radius.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radar-radius` at
+ * `components/charts/chart-radar-radius.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadarRadius()}`.
+ */
+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, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--chart-2)',
+  },
+} 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 ChartRadarRadius() {
+  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 - Radius Axis</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, indicator: 'line', labelKey: 'month' },
+          grid: {},
+          radiusAxis: { angle: 60, stroke: 'var(--foreground)', orientation: 'middle' },
+          radars: [
+            { dataKey: 'desktop', fill: 'var(--color-desktop)', fillOpacity: 0.6 },
+            { dataKey: 'mobile', fill: 'var(--color-mobile)' },
+          ],
+        })}
+      </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-radial-grid.ts

@@ -0,0 +1,80 @@
+/**
+ * A radial chart with a grid, a chart block ported from shadcn/ui's chart-radial-grid.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radial-grid` at
+ * `components/charts/chart-radial-grid.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadialGrid()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radialBarChart, 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 ChartRadialGrid() {
+  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()}>Radial Chart - Grid</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')}>
+        ${radialBarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by browser',
+          innerRadius: 30,
+          outerRadius: 100,
+          tooltip: { cursor: false, hideLabel: true, nameKey: 'browser' },
+          grid: { gridType: 'circle' },
+          bars: [{ dataKey: 'visitors' }],
+        })}
+      </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>
+  `;
+}