@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/charts/chart-bar-mixed.ts

@@ -0,0 +1,87 @@
+/**
+ * A mixed bar chart, a chart block ported from shadcn/ui's chart-bar-mixed.
+ *
+ * Installed by `npx @webjsdev/ui add chart-bar-mixed` at
+ * `components/charts/chart-bar-mixed.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartBarMixed()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, 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 ChartBarMixed() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Bar Chart - Mixed</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Visitors by browser',
+          layout: 'vertical',
+          margin: { left: 0 },
+          yAxis: {
+            dataKey: 'browser',
+            type: 'category',
+            tickLine: false,
+            tickMargin: 10,
+            axisLine: false,
+            tickFormatter: (value) => chartConfig[value as keyof typeof chartConfig]?.label,
+          },
+          xAxis: { dataKey: 'visitors', type: 'number', hide: true },
+          tooltip: { cursor: false, hideLabel: true },
+          bars: [{ dataKey: 'visitors', radius: 5 }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col items-start gap-2 text-sm')}>
+        <div class="flex 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-bar-multiple.ts

@@ -0,0 +1,67 @@
+/**
+ * A multiple bar chart, a chart block ported from shadcn/ui's chart-bar-multiple.
+ *
+ * Installed by `npx @webjsdev/ui add chart-bar-multiple` at
+ * `components/charts/chart-bar-multiple.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartBarMultiple()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, 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 ChartBarMultiple() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Bar Chart - Multiple</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Desktop and mobile visitors, January to June',
+          grid: { vertical: false },
+          xAxis: { dataKey: 'month', tickLine: false, tickMargin: 10, axisLine: false, tickFormatter: (value) => String(value).slice(0, 3) },
+          tooltip: { cursor: false, indicator: 'dashed' },
+          bars: [
+            { dataKey: 'desktop', fill: 'var(--color-desktop)', radius: 4 },
+            { dataKey: 'mobile', fill: 'var(--color-mobile)', radius: 4 },
+          ],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col items-start gap-2 text-sm')}>
+        <div class="flex 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-bar-negative.ts

@@ -0,0 +1,61 @@
+/**
+ * A bar chart with negative values, a chart block ported from shadcn/ui's chart-bar-negative.
+ *
+ * Installed by `npx @webjsdev/ui add chart-bar-negative` at
+ * `components/charts/chart-bar-negative.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartBarNegative()}`.
+ *
+ * shadcn colours each bar with a `<Cell>`; here each row carries its `fill`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { month: 'January', visitors: 186 },
+  { month: 'February', visitors: 205 },
+  { month: 'March', visitors: -207 },
+  { month: 'April', visitors: 173 },
+  { month: 'May', visitors: -209 },
+  { month: 'June', visitors: 214 },
+];
+
+const chartConfig = {
+  visitors: {
+    label: 'Visitors',
+  },
+} 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 ChartBarNegative() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Bar Chart - Negative</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          // Positive months in one colour, negative ones in another.
+          data: chartData.map((item) => ({ ...item, fill: item.visitors > 0 ? 'var(--chart-1)' : 'var(--chart-2)' })),
+          title: 'Visitors by month, with the months that lost them',
+          grid: { vertical: false },
+          tooltip: { cursor: false, hideLabel: true, hideIndicator: true },
+          bars: [{ dataKey: 'visitors', labels: [{ position: 'top', dataKey: 'month' }] }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col items-start gap-2 text-sm')}>
+        <div class="flex 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-bar-stacked.ts

@@ -0,0 +1,68 @@
+/**
+ * A stacked bar chart with a legend, a chart block ported from shadcn/ui's chart-bar-stacked.
+ *
+ * Installed by `npx @webjsdev/ui add chart-bar-stacked` at
+ * `components/charts/chart-bar-stacked.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartBarStacked()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, 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 ChartBarStacked() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Bar Chart - Stacked + Legend</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Desktop and mobile visitors, January to June',
+          grid: { vertical: false },
+          xAxis: { dataKey: 'month', tickLine: false, tickMargin: 10, axisLine: false, tickFormatter: (value) => String(value).slice(0, 3) },
+          tooltip: { hideLabel: true },
+          legend: {},
+          bars: [
+            { dataKey: 'desktop', stackId: 'a', fill: 'var(--color-desktop)', radius: [0, 0, 4, 4] },
+            { dataKey: 'mobile', stackId: 'a', fill: 'var(--color-mobile)', radius: [4, 4, 0, 0] },
+          ],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col items-start gap-2 text-sm')}>
+        <div class="flex 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-line-default.ts

@@ -0,0 +1,61 @@
+/**
+ * A line chart, a chart block ported from shadcn/ui's chart-line-default.
+ *
+ * Installed by `npx @webjsdev/ui add chart-line-default` at
+ * `components/charts/chart-line-default.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartLineDefault()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { lineChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { month: 'January', desktop: 186 },
+  { month: 'February', desktop: 305 },
+  { month: 'March', desktop: 237 },
+  { month: 'April', desktop: 73 },
+  { 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 ChartLineDefault() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Line Chart</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${lineChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Desktop visitors, January to June',
+          margin: { left: 12, right: 12 },
+          grid: { vertical: false },
+          xAxis: { dataKey: 'month', tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => String(value).slice(0, 3) },
+          tooltip: { cursor: false, hideLabel: true },
+          lines: [{ dataKey: 'desktop', type: 'natural', stroke: 'var(--color-desktop)', strokeWidth: 2, dot: false }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col items-start gap-2 text-sm')}>
+        <div class="flex 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-line-dots-colors.ts

@@ -0,0 +1,86 @@
+/**
+ * A line chart with dots and colors, a chart block ported from shadcn/ui's chart-line-dots-colors.
+ *
+ * Installed by `npx @webjsdev/ui add chart-line-dots-colors` at
+ * `components/charts/chart-line-dots-colors.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartLineDotsColors()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { lineChart, 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',
+    color: 'var(--chart-2)',
+  },
+  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 ChartLineDotsColors() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Line Chart - Dots Colors</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${lineChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Visitors by browser',
+          margin: { top: 24, left: 24, right: 24 },
+          grid: { vertical: false },
+          tooltip: { cursor: false, indicator: 'line', nameKey: 'visitors', hideLabel: true },
+          lines: [{
+            dataKey: 'visitors',
+            type: 'natural',
+            stroke: 'var(--color-visitors)',
+            strokeWidth: 2,
+            // Each point's dot in its browser's colour.
+            dot: ({ cx, cy, datum }) => svg`<circle class="ui-chart-dot" cx=${cx} cy=${cy} r="5" fill=${String(datum.fill)} stroke=${String(datum.fill)}></circle>`,
+          }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col items-start gap-2 text-sm')}>
+        <div class="flex 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-line-dots-custom.ts

@@ -0,0 +1,75 @@
+/**
+ * A line chart with custom dots, a chart block ported from shadcn/ui's chart-line-dots-custom.
+ *
+ * Installed by `npx @webjsdev/ui add chart-line-dots-custom` at
+ * `components/charts/chart-line-dots-custom.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartLineDotsCustom()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { lineChart, 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 ChartLineDotsCustom() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Line Chart - Custom Dots</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${lineChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Desktop visitors, January to June',
+          margin: { left: 12, right: 12 },
+          grid: { vertical: false },
+          xAxis: { dataKey: 'month', tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => String(value).slice(0, 3) },
+          tooltip: { cursor: false, hideLabel: true },
+          lines: [{
+            dataKey: 'desktop',
+            type: 'natural',
+            stroke: 'var(--color-desktop)',
+            strokeWidth: 2,
+            // lucide's git-commit-vertical, drawn as each point's dot.
+            dot: ({ cx, cy }) => {
+              const r = 24;
+              return svg`<svg xmlns="http://www.w3.org/2000/svg" x=${cx - r / 2} y=${cy - r / 2} width=${r} height=${r} viewBox="0 0 24 24" fill="hsl(var(--background))" stroke="var(--color-desktop)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-commit-vertical"><path d="M12 3v6"></path><circle cx="12" cy="12" r="3"></circle><path d="M12 15v6"></path></svg>`;
+            },
+          }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col items-start gap-2 text-sm')}>
+        <div class="flex 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-line-dots.ts

@@ -0,0 +1,65 @@
+/**
+ * A line chart with dots, a chart block ported from shadcn/ui's chart-line-dots.
+ *
+ * Installed by `npx @webjsdev/ui add chart-line-dots` at
+ * `components/charts/chart-line-dots.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartLineDots()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { lineChart, 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 ChartLineDots() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Line Chart - Dots</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${lineChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Desktop visitors, January to June',
+          margin: { left: 12, right: 12 },
+          grid: { vertical: false },
+          xAxis: { dataKey: 'month', tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => String(value).slice(0, 3) },
+          tooltip: { cursor: false, hideLabel: true },
+          lines: [{ dataKey: 'desktop', type: 'natural', stroke: 'var(--color-desktop)', strokeWidth: 2, dot: { fill: 'var(--color-desktop)' }, activeDot: { r: 6 } }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col items-start gap-2 text-sm')}>
+        <div class="flex 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>
+  `;
+}