@webjsdev/ui 0.3.16 → 0.4.0

package/packages/registry/blocks/charts/chart-line-interactive.ts

@@ -0,0 +1,185 @@
+/**
+ * An interactive line chart, a chart block ported from shadcn/ui's chart-line-interactive.
+ *
+ * Installed by `npx @webjsdev/ui add chart-line-interactive` at
+ * `components/charts/chart-line-interactive.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartLineInteractive()}`.
+ *
+ * The two series buttons are radio inputs, and both charts are served; the
+ * card shows the chosen one through `:has()`, so the switch works with
+ * JavaScript off. shadcn's re-renders one chart from React state instead.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { lineChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { date: '2024-04-01', desktop: 222, mobile: 150 },
+  { date: '2024-04-02', desktop: 97, mobile: 180 },
+  { date: '2024-04-03', desktop: 167, mobile: 120 },
+  { date: '2024-04-04', desktop: 242, mobile: 260 },
+  { date: '2024-04-05', desktop: 373, mobile: 290 },
+  { date: '2024-04-06', desktop: 301, mobile: 340 },
+  { date: '2024-04-07', desktop: 245, mobile: 180 },
+  { date: '2024-04-08', desktop: 409, mobile: 320 },
+  { date: '2024-04-09', desktop: 59, mobile: 110 },
+  { date: '2024-04-10', desktop: 261, mobile: 190 },
+  { date: '2024-04-11', desktop: 327, mobile: 350 },
+  { date: '2024-04-12', desktop: 292, mobile: 210 },
+  { date: '2024-04-13', desktop: 342, mobile: 380 },
+  { date: '2024-04-14', desktop: 137, mobile: 220 },
+  { date: '2024-04-15', desktop: 120, mobile: 170 },
+  { date: '2024-04-16', desktop: 138, mobile: 190 },
+  { date: '2024-04-17', desktop: 446, mobile: 360 },
+  { date: '2024-04-18', desktop: 364, mobile: 410 },
+  { date: '2024-04-19', desktop: 243, mobile: 180 },
+  { date: '2024-04-20', desktop: 89, mobile: 150 },
+  { date: '2024-04-21', desktop: 137, mobile: 200 },
+  { date: '2024-04-22', desktop: 224, mobile: 170 },
+  { date: '2024-04-23', desktop: 138, mobile: 230 },
+  { date: '2024-04-24', desktop: 387, mobile: 290 },
+  { date: '2024-04-25', desktop: 215, mobile: 250 },
+  { date: '2024-04-26', desktop: 75, mobile: 130 },
+  { date: '2024-04-27', desktop: 383, mobile: 420 },
+  { date: '2024-04-28', desktop: 122, mobile: 180 },
+  { date: '2024-04-29', desktop: 315, mobile: 240 },
+  { date: '2024-04-30', desktop: 454, mobile: 380 },
+  { date: '2024-05-01', desktop: 165, mobile: 220 },
+  { date: '2024-05-02', desktop: 293, mobile: 310 },
+  { date: '2024-05-03', desktop: 247, mobile: 190 },
+  { date: '2024-05-04', desktop: 385, mobile: 420 },
+  { date: '2024-05-05', desktop: 481, mobile: 390 },
+  { date: '2024-05-06', desktop: 498, mobile: 520 },
+  { date: '2024-05-07', desktop: 388, mobile: 300 },
+  { date: '2024-05-08', desktop: 149, mobile: 210 },
+  { date: '2024-05-09', desktop: 227, mobile: 180 },
+  { date: '2024-05-10', desktop: 293, mobile: 330 },
+  { date: '2024-05-11', desktop: 335, mobile: 270 },
+  { date: '2024-05-12', desktop: 197, mobile: 240 },
+  { date: '2024-05-13', desktop: 197, mobile: 160 },
+  { date: '2024-05-14', desktop: 448, mobile: 490 },
+  { date: '2024-05-15', desktop: 473, mobile: 380 },
+  { date: '2024-05-16', desktop: 338, mobile: 400 },
+  { date: '2024-05-17', desktop: 499, mobile: 420 },
+  { date: '2024-05-18', desktop: 315, mobile: 350 },
+  { date: '2024-05-19', desktop: 235, mobile: 180 },
+  { date: '2024-05-20', desktop: 177, mobile: 230 },
+  { date: '2024-05-21', desktop: 82, mobile: 140 },
+  { date: '2024-05-22', desktop: 81, mobile: 120 },
+  { date: '2024-05-23', desktop: 252, mobile: 290 },
+  { date: '2024-05-24', desktop: 294, mobile: 220 },
+  { date: '2024-05-25', desktop: 201, mobile: 250 },
+  { date: '2024-05-26', desktop: 213, mobile: 170 },
+  { date: '2024-05-27', desktop: 420, mobile: 460 },
+  { date: '2024-05-28', desktop: 233, mobile: 190 },
+  { date: '2024-05-29', desktop: 78, mobile: 130 },
+  { date: '2024-05-30', desktop: 340, mobile: 280 },
+  { date: '2024-05-31', desktop: 178, mobile: 230 },
+  { date: '2024-06-01', desktop: 178, mobile: 200 },
+  { date: '2024-06-02', desktop: 470, mobile: 410 },
+  { date: '2024-06-03', desktop: 103, mobile: 160 },
+  { date: '2024-06-04', desktop: 439, mobile: 380 },
+  { date: '2024-06-05', desktop: 88, mobile: 140 },
+  { date: '2024-06-06', desktop: 294, mobile: 250 },
+  { date: '2024-06-07', desktop: 323, mobile: 370 },
+  { date: '2024-06-08', desktop: 385, mobile: 320 },
+  { date: '2024-06-09', desktop: 438, mobile: 480 },
+  { date: '2024-06-10', desktop: 155, mobile: 200 },
+  { date: '2024-06-11', desktop: 92, mobile: 150 },
+  { date: '2024-06-12', desktop: 492, mobile: 420 },
+  { date: '2024-06-13', desktop: 81, mobile: 130 },
+  { date: '2024-06-14', desktop: 426, mobile: 380 },
+  { date: '2024-06-15', desktop: 307, mobile: 350 },
+  { date: '2024-06-16', desktop: 371, mobile: 310 },
+  { date: '2024-06-17', desktop: 475, mobile: 520 },
+  { date: '2024-06-18', desktop: 107, mobile: 170 },
+  { date: '2024-06-19', desktop: 341, mobile: 290 },
+  { date: '2024-06-20', desktop: 408, mobile: 450 },
+  { date: '2024-06-21', desktop: 169, mobile: 210 },
+  { date: '2024-06-22', desktop: 317, mobile: 270 },
+  { date: '2024-06-23', desktop: 480, mobile: 530 },
+  { date: '2024-06-24', desktop: 132, mobile: 180 },
+  { date: '2024-06-25', desktop: 141, mobile: 190 },
+  { date: '2024-06-26', desktop: 434, mobile: 380 },
+  { date: '2024-06-27', desktop: 448, mobile: 490 },
+  { date: '2024-06-28', desktop: 149, mobile: 200 },
+  { date: '2024-06-29', desktop: 103, mobile: 160 },
+  { date: '2024-06-30', desktop: 446, mobile: 400 },
+];
+
+const chartConfig = {
+  views: {
+    label: 'Page Views',
+  },
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig;
+
+const total = {
+  desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+  mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+};
+
+const day = (value: unknown, opts: Intl.DateTimeFormatOptions) =>
+  new Date(String(value)).toLocaleDateString('en-US', { ...opts, timeZone: 'UTC' });
+
+function chart(key: 'desktop' | 'mobile') {
+  return lineChart({
+    config: chartConfig,
+    class: 'aspect-auto h-[250px] w-full',
+    width: 1260,
+    height: 250,
+    data: chartData,
+    title: `${chartConfig[key].label} page views, April to June 2024`,
+    margin: { left: 12, right: 12 },
+    grid: { vertical: false },
+    xAxis: {
+      dataKey: 'date',
+      tickLine: false,
+      axisLine: false,
+      tickMargin: 8,
+      minTickGap: 32,
+      tickFormatter: (value) => day(value, { month: 'short', day: 'numeric' }),
+    },
+    tooltip: {
+      class: 'w-[150px]',
+      nameKey: 'views',
+      labelFormatter: (value) => day(value, { month: 'short', day: 'numeric', year: 'numeric' }),
+    },
+    lines: [{ dataKey: key, type: 'monotone', stroke: `var(--color-${key})`, strokeWidth: 2, dot: false }],
+  });
+}
+
+export default function ChartLineInteractive() {
+  return html`
+    <div data-slot="card" class=${cn(cardClass(), 'group/chart py-4 sm:py-0')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'flex flex-col items-stretch border-b p-0! sm:flex-row')}>
+        <div class="flex flex-1 flex-col justify-center gap-1 px-6 pb-3 sm:pb-0">
+          <div data-slot="card-title" class=${cardTitleClass()}>Line Chart - Interactive</div>
+          <div data-slot="card-description" class=${cardDescriptionClass()}>Showing total visitors for the last 3 months</div>
+        </div>
+        <div class="flex" role="radiogroup" aria-label="Series">
+          ${(['desktop', 'mobile'] as const).map((key) => html`
+            <label class="flex flex-1 cursor-pointer flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l has-checked:bg-muted/50 has-focus-visible:ring-2 has-focus-visible:ring-ring sm:border-t-0 sm:border-l sm:px-8 sm:py-6">
+              <input type="radio" name="chart-line-interactive" value=${key} ?checked=${key === 'desktop'} class="sr-only">
+              <span class="text-xs text-muted-foreground">${chartConfig[key].label}</span>
+              <span class="text-lg leading-none font-bold sm:text-3xl">${total[key].toLocaleString('en-US')}</span>
+            </label>`)}
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'px-2 sm:p-6')}>
+        <div class="group-has-[input[value=mobile]:checked]/chart:hidden">${chart('desktop')}</div>
+        <div class="hidden group-has-[input[value=mobile]:checked]/chart:block">${chart('mobile')}</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-line-label-custom.ts

@@ -0,0 +1,94 @@
+/**
+ * A line chart with a custom label, a chart block ported from shadcn/ui's chart-line-label-custom.
+ *
+ * Installed by `npx @webjsdev/ui add chart-line-label-custom` at
+ * `components/charts/chart-line-label-custom.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartLineLabelCustom()}`.
+ */
+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 ChartLineLabelCustom() {
+  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 Label</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,
+            dot: { fill: 'var(--color-visitors)' },
+            activeDot: { r: 6 },
+            labels: [{
+              position: 'top',
+              offset: 12,
+              class: 'fill-foreground',
+              fontSize: 12,
+              dataKey: 'browser',
+              formatter: (value) => chartConfig[value as keyof typeof chartConfig]?.label,
+            }],
+          }],
+        })}
+      </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-label.ts

@@ -0,0 +1,73 @@
+/**
+ * A line chart with a label, a chart block ported from shadcn/ui's chart-line-label.
+ *
+ * Installed by `npx @webjsdev/ui add chart-line-label` at
+ * `components/charts/chart-line-label.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartLineLabel()}`.
+ */
+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 ChartLineLabel() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Line Chart - Label</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: { top: 20, 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, indicator: 'line' },
+          lines: [{
+            dataKey: 'desktop',
+            type: 'natural',
+            stroke: 'var(--color-desktop)',
+            strokeWidth: 2,
+            dot: { fill: 'var(--color-desktop)' },
+            activeDot: { r: 6 },
+            labels: [{ position: 'top', offset: 12, class: 'fill-foreground', fontSize: 12 }],
+          }],
+        })}
+      </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-linear.ts

@@ -0,0 +1,61 @@
+/**
+ * A linear line chart, a chart block ported from shadcn/ui's chart-line-linear.
+ *
+ * Installed by `npx @webjsdev/ui add chart-line-linear` at
+ * `components/charts/chart-line-linear.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartLineLinear()}`.
+ */
+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 ChartLineLinear() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Line Chart - Linear</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: 'linear', 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-multiple.ts

@@ -0,0 +1,71 @@
+/**
+ * A multiple line chart, a chart block ported from shadcn/ui's chart-line-multiple.
+ *
+ * Installed by `npx @webjsdev/ui add chart-line-multiple` at
+ * `components/charts/chart-line-multiple.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartLineMultiple()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+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 ChartLineMultiple() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Line Chart - Multiple</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 and mobile 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 },
+          lines: [
+            { dataKey: 'desktop', type: 'monotone', stroke: 'var(--color-desktop)', strokeWidth: 2, dot: false },
+            { dataKey: 'mobile', type: 'monotone', stroke: 'var(--color-mobile)', strokeWidth: 2, dot: false },
+          ],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <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">Showing total visitors for the last 6 months</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-line-step.ts

@@ -0,0 +1,61 @@
+/**
+ * A line chart with step, a chart block ported from shadcn/ui's chart-line-step.
+ *
+ * Installed by `npx @webjsdev/ui add chart-line-step` at
+ * `components/charts/chart-line-step.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartLineStep()}`.
+ */
+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 ChartLineStep() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Line Chart - Step</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: 'step', 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-pie-donut-active.ts

@@ -0,0 +1,86 @@
+/**
+ * A donut chart with an active sector, a chart block ported from shadcn/ui's chart-pie-donut-active.
+ *
+ * Installed by `npx @webjsdev/ui add chart-pie-donut-active` at
+ * `components/charts/chart-pie-donut-active.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartPieDonutActive()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { chartSector, 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>`;
+
+const ACTIVE_INDEX = 0;
+
+export default function ChartPieDonutActive() {
+  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 - Donut Active</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',
+            innerRadius: 60,
+            strokeWidth: 5,
+            shape: ({ index, outerRadius, ...props }) =>
+              chartSector({ ...props, outerRadius: index === ACTIVE_INDEX ? outerRadius + 10 : outerRadius }),
+          }],
+        })}
+      </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>
+  `;
+}