@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/preview/cards/ui-elements.ts

@@ -0,0 +1,164 @@
+/**
+ * The preview block's UI elements card: buttons, an item, a slider, an input
+ * group and a textarea, badges, radios, checkboxes, an alert dialog, a button
+ * group with a menu, and a switch. A fragment helper, rendered by the server,
+ * with the kit's elements for the parts that need behaviour. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/ui-elements.ts`.
+ * Ported from shadcn/ui's preview block.
+ *
+ * The menu's trigger stays a direct child of the button group (its corner
+ * rules select direct children), so the menu names it by id. The id must be
+ * unique on the page.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  alertDialogDescriptionClass,
+  alertDialogFooterClass,
+  alertDialogHeaderClass,
+  alertDialogTitleClass,
+} from '../../../components/alert-dialog.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import { buttonClass } from '../../../components/button.ts';
+import { buttonGroupClass } from '../../../components/button-group.ts';
+import { cardClass, cardContentClass } from '../../../components/card.ts';
+import { checkboxClass } from '../../../components/checkbox.ts';
+import '../../../components/dropdown-menu.ts';
+import { fieldClass, fieldGroupClass } from '../../../components/field.ts';
+import {
+  inputGroupAddonClass,
+  inputGroupClass,
+  inputGroupInputClass,
+  inputGroupTextClass,
+} from '../../../components/input-group.ts';
+import {
+  itemActionsClass,
+  itemClass,
+  itemContentClass,
+  itemDescriptionClass,
+  itemTitleClass,
+} from '../../../components/item.ts';
+import { radioClass, radioGroupClass } from '../../../components/radio-group.ts';
+import { sliderClass } from '../../../components/slider.ts';
+import '../../../components/switch.ts';
+import { textareaClass } from '../../../components/textarea.ts';
+import { ChevronUpIcon, SearchIcon } from '../../../lib/icons.ts';
+
+/**
+ * `id` names this copy, since shadcn renders the card twice on the board (one
+ * copy per breakpoint): it prefixes the menu trigger id and the radio group
+ * name, which must not repeat on a page.
+ */
+export function uiElements(opts: { id?: string } = {}) {
+  const id = opts.id ?? 'ui-elements';
+  return html`
+    <div data-slot="card" data-size="default" class=${cn(cardClass(), 'w-full')}>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-6')}>
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-wrap gap-2">
+            <button type="button" data-slot="button" data-variant="default" data-size="default" class=${buttonClass()}>Button</button>
+            <button type="button" data-slot="button" data-variant="secondary" data-size="default" class=${buttonClass({ variant: 'secondary' })}>Secondary</button>
+            <button type="button" data-slot="button" data-variant="outline" data-size="default" class=${buttonClass({ variant: 'outline' })}>Outline</button>
+            <button type="button" data-slot="button" data-variant="ghost" data-size="default" class=${buttonClass({ variant: 'ghost' })}>Ghost</button>
+          </div>
+          <div data-slot="item" data-variant="outline" data-size="default" class=${itemClass({ variant: 'outline' })}>
+            <div data-slot="item-content" class=${itemContentClass()}>
+              <div data-slot="item-title" class=${itemTitleClass()}>Two-factor authentication</div>
+              <p data-slot="item-description" class=${cn(itemDescriptionClass(), 'text-pretty xl:hidden 2xl:block')}>
+                Verify via email or phone number.
+              </p>
+            </div>
+            <div data-slot="item-actions" class=${cn(itemActionsClass(), 'hidden md:flex')}>
+              <button type="button" data-slot="button" data-variant="secondary" data-size="sm" class=${buttonClass({ variant: 'secondary', size: 'sm' })}>Enable</button>
+            </div>
+          </div>
+        </div>
+        <ui-slider class="flex-1">
+          <input type="range" min="0" max="1000" step="10" value="500" aria-label="Slider" class=${sliderClass()}>
+        </ui-slider>
+        <div data-slot="field-group" class=${fieldGroupClass()}>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+            <div data-slot="input-group" role="group" class=${inputGroupClass()}>
+              <input data-slot="input-group-control" placeholder="Name" aria-label="Name" class=${inputGroupInputClass()}>
+              <div data-slot="input-group-addon" data-align="inline-end" role="group" class=${inputGroupAddonClass({ align: 'inline-end' })}>
+                <span class=${inputGroupTextClass()}>${SearchIcon()}</span>
+              </div>
+            </div>
+          </div>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${cn(fieldClass(), 'flex-1')}>
+            <textarea data-slot="textarea" placeholder="Message" aria-label="Message" class=${cn(textareaClass(), 'resize-none')}></textarea>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="flex gap-2">
+            <span data-slot="badge" data-variant="default" class=${badgeClass()}>Badge</span>
+            <span data-slot="badge" data-variant="secondary" class=${badgeClass({ variant: 'secondary' })}>Secondary</span>
+            <span data-slot="badge" data-variant="outline" class=${badgeClass({ variant: 'outline' })}>Outline</span>
+          </div>
+          <div role="radiogroup" aria-label="Fruit" data-slot="radio-group" class=${cn(radioGroupClass(), 'ml-auto flex w-fit gap-3')}>
+            <input type="radio" name=${`${id}-fruit`} value="apple" checked aria-label="Apple" data-slot="radio" class=${radioClass()}>
+            <input type="radio" name=${`${id}-fruit`} value="banana" aria-label="Banana" data-slot="radio" class=${radioClass()}>
+          </div>
+          <div class="flex gap-3">
+            <input type="checkbox" checked aria-label="First option" data-slot="checkbox" class=${checkboxClass()}>
+            <input type="checkbox" aria-label="Second option" data-slot="checkbox" class=${checkboxClass()}>
+          </div>
+        </div>
+        <div class="flex items-center gap-4">
+          <ui-alert-dialog>
+            <ui-alert-dialog-trigger>
+              <button type="button" data-slot="button" data-variant="outline" data-size="default" class=${buttonClass({ variant: 'outline' })}>
+                <span class="hidden md:flex style-sera:md:hidden">Alert Dialog</span>
+                <span class="flex md:hidden style-sera:md:flex">Dialog</span>
+              </button>
+            </ui-alert-dialog-trigger>
+            <ui-alert-dialog-content size="sm">
+              <div data-slot="alert-dialog-header" class=${alertDialogHeaderClass()}>
+                <h2 data-slot="alert-dialog-title" class=${alertDialogTitleClass()}>Allow accessory to connect?</h2>
+                <p data-slot="alert-dialog-description" class=${alertDialogDescriptionClass()}>
+                  Do you want to allow the USB accessory to connect to this
+                  device and your data?
+                </p>
+              </div>
+              <div data-slot="alert-dialog-footer" class=${alertDialogFooterClass()}>
+                <ui-alert-dialog-cancel>Don't allow</ui-alert-dialog-cancel>
+                <ui-alert-dialog-action>Allow</ui-alert-dialog-action>
+              </div>
+            </ui-alert-dialog-content>
+          </ui-alert-dialog>
+          <div role="group" data-slot="button-group" data-orientation="horizontal" class=${buttonGroupClass()}>
+            <button type="button" data-slot="button" data-variant="outline" data-size="default" class=${buttonClass({ variant: 'outline' })}>
+              <span class="style-sera:hidden">Button Group</span>
+              <span class="hidden style-sera:block">Group</span>
+            </button>
+            <button type="button" id=${`${id}-quick-actions`} data-slot="button" data-variant="outline" data-size="icon" aria-label="Quick actions" class=${buttonClass({ variant: 'outline', size: 'icon' })}>
+              ${ChevronUpIcon()}
+            </button>
+          </div>
+          <ui-dropdown-menu trigger=${`${id}-quick-actions`} class="absolute">
+            <ui-dropdown-menu-content align="end" side="top" class="w-fit">
+              <ui-dropdown-menu-group>
+                <ui-dropdown-menu-label>Quick Actions</ui-dropdown-menu-label>
+                <ui-dropdown-menu-item>Mute Conversation</ui-dropdown-menu-item>
+                <ui-dropdown-menu-item>Mark as Read</ui-dropdown-menu-item>
+                <ui-dropdown-menu-item>Block User</ui-dropdown-menu-item>
+              </ui-dropdown-menu-group>
+              <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+              <ui-dropdown-menu-group>
+                <ui-dropdown-menu-label>Conversation</ui-dropdown-menu-label>
+                <ui-dropdown-menu-item>Share Conversation</ui-dropdown-menu-item>
+                <ui-dropdown-menu-item>Copy Conversation</ui-dropdown-menu-item>
+                <ui-dropdown-menu-item>Report Conversation</ui-dropdown-menu-item>
+              </ui-dropdown-menu-group>
+              <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+              <ui-dropdown-menu-group>
+                <ui-dropdown-menu-item variant="destructive">Delete Conversation</ui-dropdown-menu-item>
+              </ui-dropdown-menu-group>
+            </ui-dropdown-menu-content>
+          </ui-dropdown-menu>
+          <ui-switch checked aria-label="Enable" class="ml-auto"></ui-switch>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/usage-card.ts

@@ -0,0 +1,63 @@
+/**
+ * The preview block's usage card: this billing cycle's usage, one row per
+ * meter with a small circular gauge. A fragment helper, rendered by the
+ * server. Installed by `npx @webjsdev/ui add preview` at
+ * `components/preview/usage-card.ts`. Ported from shadcn/ui's preview block.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { cardClass, cardContentClass, cardHeaderClass, cardTitleClass } from '../../../components/card.ts';
+import {
+  itemActionsClass,
+  itemClass,
+  itemContentClass,
+  itemGroupClass,
+  itemMediaClass,
+  itemTitleClass,
+} from '../../../components/item.ts';
+
+// Usage items with percentage and value.
+const items = [
+  { name: 'Edge Requests', value: '$1.83K', percentage: 67.34 },
+  { name: 'Fast Data Transfer', percentage: 52.18, value: '$952.51' },
+  { name: 'Monitoring data points', percentage: 89.42, value: '$901.20' },
+  { name: 'Web Analytics Events', percentage: 45.67, value: '$603.71' },
+  { name: 'ISR Writes', percentage: 26.23, value: '524.52K / 2M' },
+  { name: 'Function Duration', percentage: 5.11, value: '5.11 GB Hrs / 1K GB Hrs' },
+];
+
+/** A 16px ring filled to `percentage`. */
+function circularGauge(percentage: number) {
+  const normalized = Math.min(Math.max(percentage, 0), 100);
+  const circumference = 2 * Math.PI * 42.5;
+  const strokePercent = (normalized / 100) * circumference;
+  return html`<svg aria-hidden="true" fill="none" height="16" width="16" stroke-width="2" viewBox="0 0 100 100" class="-rotate-90">${svg`
+    <circle cx="50" cy="50" r="42.5" stroke-width="12" stroke-dashoffset="0" stroke-linecap="round" stroke-linejoin="round" class="opacity-20" stroke="currentColor" style=${`stroke-dasharray: ${circumference} ${circumference}`}></circle>
+    <circle cx="50" cy="50" r="42.5" stroke-width="12" stroke-dashoffset="0" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" class="transition-all duration-300" style=${`stroke-dasharray: ${strokePercent} ${circumference}`}></circle>
+  `}</svg>`;
+}
+
+export function usageCard() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cn(cardClass(), 'w-full max-w-sm gap-4')}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cn(cardTitleClass(), 'px-1 text-sm')}>5 days remaining in cycle</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div role="list" data-slot="item-group" class=${cn(itemGroupClass(), 'gap-0')}>
+          ${items.map((item) => html`
+            <a href="#" role="listitem" data-slot="item" data-variant="default" data-size="xs" class=${cn(itemClass({ size: 'xs' }), 'px-0 group-hover/item-group:bg-transparent')}>
+              <div data-slot="item-media" data-variant="icon" class=${cn(itemMediaClass({ variant: 'icon' }), 'text-primary')}>${circularGauge(item.percentage)}</div>
+              <div data-slot="item-content" class=${cn(itemContentClass(), 'inline-block truncate')}>
+                <div data-slot="item-title" class=${cn(itemTitleClass(), 'inline')}>${item.name}</div>
+              </div>
+              <div data-slot="item-actions" class=${itemActionsClass()}>
+                <span class="font-mono text-xs font-medium text-muted-foreground tabular-nums">${item.value}</span>
+              </div>
+            </a>
+          `)}
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/visitors.ts

@@ -0,0 +1,71 @@
+/**
+ * The preview block's visitors card: six months of desktop visitors as an
+ * area chart, with the change since last month as a badge. A fragment helper;
+ * the chart is the kit's `areaChart`, drawn by the server. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/visitors.ts`.
+ * Ported from shadcn/ui's preview block.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { areaChart, type ChartConfig } from '../../../components/chart.ts';
+
+const areaChartData = [
+  { 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 areaChartConfig: ChartConfig = {
+  desktop: { label: 'Desktop', color: 'var(--chart-1)' },
+};
+
+/** The change from the month before to the last month, in whole percent. */
+function trend() {
+  const latest = areaChartData[areaChartData.length - 1]?.desktop ?? 0;
+  const previous = areaChartData[areaChartData.length - 2]?.desktop ?? latest;
+  return previous === 0 ? 0 : Math.round(((latest - previous) / previous) * 100);
+}
+
+export function visitors() {
+  const percent = trend();
+  const variant = percent >= 0 ? 'secondary' : 'destructive';
+  return html`
+    <div data-slot="card" data-size="default" class=${cn(cardClass(), 'pb-0')}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Visitors</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Last 6 months</div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <span data-slot="badge" data-variant=${variant} class=${badgeClass({ variant })}>${percent > 0 ? '+' : ''}${percent}% vs last month</span>
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'px-0')}>
+        ${areaChart({
+          config: areaChartConfig,
+          data: areaChartData,
+          class: 'h-48 w-full',
+          title: 'Desktop visitors by month, January to June',
+          width: 384,
+          height: 192,
+          margin: { left: 0, right: 0, top: 6, bottom: 0 },
+          xAxis: { dataKey: 'month', hide: true, tickLine: false, axisLine: false, tickMargin: 6, tickFormatter: (value) => String(value).slice(0, 3) },
+          tooltip: { cursor: false, indicator: 'line' },
+          areas: [
+            { dataKey: 'desktop', type: 'natural', fill: 'var(--color-desktop)', fillOpacity: 0.15, stroke: 'var(--color-desktop)', strokeWidth: 2 },
+          ],
+        })}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/weekly-fitness-summary.ts

@@ -0,0 +1,54 @@
+/**
+ * The preview block's weekly fitness card: the workout load per day as a row
+ * of filled bars. A fragment helper, rendered by the server. Installed by
+ * `npx @webjsdev/ui add preview` at
+ * `components/preview/weekly-fitness-summary.ts`. Ported from shadcn/ui's
+ * preview block.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+
+const FITNESS_WEEKLY_LOAD = [
+  { day: 'M', load: 84 },
+  { day: 'T', load: 52 },
+  { day: 'W', load: 73 },
+  { day: 'T', load: 66 },
+  { day: 'F', load: 91 },
+  { day: 'S', load: 48 },
+  { day: 'S', load: 61 },
+];
+
+export function weeklyFitnessSummary() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Weekly Fitness Summary</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Calories and workout load by day</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4')}>
+        <div class="grid grid-cols-7 gap-1.5">
+          ${FITNESS_WEEKLY_LOAD.map((day) => html`
+            <div class="rounded-md p-1.5 text-center ring ring-border">
+              <div class="text-sm text-muted-foreground">${day.day}</div>
+              <div class="relative mt-1 h-16 overflow-hidden rounded-sm bg-muted">
+                <div class="absolute inset-x-0 bottom-0 rounded-sm bg-chart-3" style=${`height: ${day.load}%`}></div>
+              </div>
+            </div>
+          `)}
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="button" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'w-full')}>View details</button>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/page.ts

@@ -0,0 +1,103 @@
+/**
+ * The preview block's page: thirty-one cards built from the kit, laid out in
+ * seven columns, the sheet the design-system configurator previews a style
+ * on.
+ *
+ * Installed by `npx @webjsdev/ui add preview` at `app/preview/page.ts`, with
+ * each card at `components/preview/<card>.ts`. It is app code you own, so edit
+ * it freely. Ported from shadcn/ui's preview block.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { activateAgentDialog } from './cards/activate-agent-dialog.ts';
+import { analyticsCard } from './cards/analytics-card.ts';
+import { anomalyAlert } from './cards/anomaly-alert.ts';
+import { barChartCard } from './cards/bar-chart-card.ts';
+import { bookAppointment } from './cards/book-appointment.ts';
+import { codespacesCard } from './cards/codespaces-card.ts';
+import { contributionsActivity } from './cards/contributions-activity.ts';
+import { contributors } from './cards/contributors.ts';
+import { environmentVariables } from './cards/environment-variables.ts';
+import { feedbackForm } from './cards/feedback-form.ts';
+import { fileUpload } from './cards/file-upload.ts';
+import { githubProfile } from './cards/github-profile.ts';
+import { iconPreviewGrid } from './cards/icon-preview-grid.ts';
+import { inviteTeam } from './cards/invite-team.ts';
+import { invoice } from './cards/invoice.ts';
+import { liveWaveformCard } from './cards/live-waveform.ts';
+import { noTeamMembers } from './cards/no-team-members.ts';
+import { notFound } from './cards/not-found.ts';
+import { observabilityCard } from './cards/observability-card.ts';
+import { pieChartCard } from './cards/pie-chart-card.ts';
+import { reportBug } from './cards/report-bug.ts';
+import { shippingAddress } from './cards/shipping-address.ts';
+import { shortcuts } from './cards/shortcuts.ts';
+import { skeletonLoading } from './cards/skeleton-loading.ts';
+import { sleepReport } from './cards/sleep-report.ts';
+import { styleOverview } from './cards/style-overview.ts';
+import { typographySpecimen } from './cards/typography-specimen.ts';
+import { uiElements } from './cards/ui-elements.ts';
+import { usageCard } from './cards/usage-card.ts';
+import { visitors } from './cards/visitors.ts';
+import { weeklyFitnessSummary } from './cards/weekly-fitness-summary.ts';
+
+export const metadata: Metadata = { title: 'Preview' };
+
+const COLUMN = 'flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]';
+
+export default function PreviewPage() {
+  return html`
+    <div class="overflow-x-auto overflow-y-hidden bg-muted contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)] dark:bg-background style-lyra:md:[--gap:--spacing(6)] style-mira:md:[--gap:--spacing(6)]">
+      <div class="flex w-full min-w-max justify-center">
+        <div class="grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background style-lyra:md:w-[2600px] style-mira:md:w-[2600px] *:[div]:gap-(--gap)" data-slot="capture-target">
+          <div class=${COLUMN}>
+            ${styleOverview()}
+            ${typographySpecimen()}
+            <div class="md:hidden">${uiElements()}</div>
+            ${codespacesCard()}
+            ${invoice()}
+          </div>
+          <div class=${COLUMN}>
+            ${iconPreviewGrid()}
+            <div class="hidden w-full md:flex">${uiElements({ id: 'ui-elements-md' })}</div>
+            ${observabilityCard()}
+            ${shippingAddress()}
+          </div>
+          <div class=${COLUMN}>
+            ${environmentVariables()}
+            ${barChartCard()}
+            ${inviteTeam()}
+            ${activateAgentDialog()}
+          </div>
+          <div class=${COLUMN}>
+            ${skeletonLoading()}
+            ${pieChartCard()}
+            ${noTeamMembers()}
+            ${reportBug()}
+            ${contributors()}
+          </div>
+          <div class=${COLUMN}>
+            ${feedbackForm()}
+            ${bookAppointment()}
+            ${sleepReport()}
+            ${githubProfile()}
+          </div>
+          <div class=${COLUMN}>
+            ${weeklyFitnessSummary()}
+            ${fileUpload()}
+            ${analyticsCard()}
+            ${usageCard()}
+            ${shortcuts()}
+          </div>
+          <div class=${COLUMN}>
+            ${anomalyAlert()}
+            ${liveWaveformCard()}
+            ${visitors()}
+            ${contributionsActivity()}
+            ${notFound()}
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/account-access.ts

@@ -0,0 +1,70 @@
+/**
+ * The preview-02 Account Access card: an email and password form with a
+ * danger zone link. A fragment helper. Installed by
+ * `npx @webjsdev/ui add preview-02` at `components/preview-02/account-access.ts`.
+ * Ported from shadcn/ui's preview-02.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${updateCredentials}>`) before you ship it.
+ */
+import { html } from '@webjsdev/core';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { fieldClass, fieldGroupClass, fieldLabelClass } from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+import {
+  itemClass,
+  itemContentClass,
+  itemDescriptionClass,
+  itemMediaClass,
+  itemTitleClass,
+} from '../../../components/item.ts';
+import { cn } from '../../../lib/utils.ts';
+import { AlertCircleIcon, ArrowRightIcon, LockKeyholeIcon } from '../../../lib/icons.ts';
+
+export function accountAccess() {
+  return html`
+    <form data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Account Access</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Update your credentials or re-authenticate.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="field-group" class=${fieldGroupClass()}>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+            <label data-slot="field-label" for="email-address" class=${fieldLabelClass()}>Email Address</label>
+            <input data-slot="input" id="email-address" name="email" type="email" value="artist@studio.inc" class=${inputClass()}>
+          </div>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+            <div class="flex items-center justify-between">
+              <label data-slot="field-label" for="current-password" class=${fieldLabelClass()}>Current Password</label>
+              <a href="#" class="text-xs font-medium tracking-wider text-muted-foreground uppercase hover:text-foreground">Forgot?</a>
+            </div>
+            <input data-slot="input" id="current-password" name="password" type="password" value="password123" class=${inputClass()}>
+          </div>
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-4')}>
+        <button type="submit" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'w-full')}>
+          ${LockKeyholeIcon()}
+          Update Security
+        </button>
+        <a href="#" data-slot="item" data-variant="muted" data-size="default" class=${itemClass({ variant: 'muted' })}>
+          <div data-slot="item-media" data-variant="icon" class=${itemMediaClass({ variant: 'icon' })}>${AlertCircleIcon('text-destructive')}</div>
+          <div data-slot="item-content" class=${itemContentClass()}>
+            <div data-slot="item-title" class=${itemTitleClass()}>Danger Zone</div>
+            <p data-slot="item-description" class=${cn(itemDescriptionClass(), 'line-clamp-1')}>Archive account and remove catalog</p>
+          </div>
+          ${ArrowRightIcon('size-4')}
+        </a>
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/card-overview.ts

@@ -0,0 +1,75 @@
+/**
+ * The preview-02 card overview: the card balance, the next payment due and a
+ * small bar chart of the year's activity. A fragment helper; the chart is the
+ * kit's server-drawn `barChart`. Installed by `npx @webjsdev/ui add preview-02`
+ * at `components/preview-02/card-overview.ts`. Ported from shadcn/ui's
+ * preview-02.
+ */
+import { html } from '@webjsdev/core';
+import { badgeClass } from '../../../components/badge.ts';
+import { buttonClass } from '../../../components/button.ts';
+import { cardClass, cardContentClass, cardDescriptionClass, cardTitleClass } from '../../../components/card.ts';
+import { barChart, type ChartConfig } from '../../../components/chart.ts';
+import { cn } from '../../../lib/utils.ts';
+
+const activityData = [
+  { month: 'Jan', amount: 40 },
+  { month: 'Feb', amount: 55 },
+  { month: 'Mar', amount: 35 },
+  { month: 'Apr', amount: 60 },
+  { month: 'May', amount: 45 },
+  { month: 'Jun', amount: 50 },
+  { month: 'Jul', amount: 65 },
+  { month: 'Aug', amount: 40 },
+  { month: 'Sep', amount: 55 },
+  { month: 'Oct', amount: 70 },
+  { month: 'Nov', amount: 45 },
+  { month: 'Dec', amount: 80 },
+];
+
+const chartConfig = {
+  amount: { label: 'Activity', color: 'var(--chart-2)' },
+} satisfies ChartConfig;
+
+export function cardOverview() {
+  return html`
+    <div class="grid grid-cols-2 gap-3">
+      <div data-slot="card" data-size="default" class=${cardClass()}>
+        <div data-slot="card-content" class=${cardContentClass()}>
+          <div data-slot="card-description" class=${cardDescriptionClass()}>Card Balance</div>
+          <div data-slot="card-title" class=${cn(cardTitleClass(), 'text-2xl tabular-nums')}>US$12.94</div>
+          <div data-slot="card-description" class=${cn(cardDescriptionClass(), 'tabular-nums')}>US$11,337.06 Available</div>
+        </div>
+      </div>
+      <div data-slot="card" data-size="default" class=${cn(cardClass(), 'flex flex-col justify-between')}>
+        <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-1 flex-col justify-between')}>
+          <div class="flex flex-col gap-1">
+            <div data-slot="card-description" class=${cardDescriptionClass()}>Payment Due</div>
+            <div data-slot="card-title" class=${cn(cardTitleClass(), 'text-2xl')}>1 Apr</div>
+          </div>
+          <button type="button" data-slot="button" data-variant="outline" data-size="sm" class=${cn(buttonClass({ variant: 'outline', size: 'sm' }), 'mt-3 w-full')}>Pay Early</button>
+        </div>
+      </div>
+      <div data-slot="card" data-size="default" class=${cn(cardClass(), 'col-span-2')}>
+        <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-2')}>
+          <div class="flex items-center justify-between">
+            <div data-slot="card-description" class=${cardDescriptionClass()}>Yearly Activity</div>
+            <span data-slot="badge" data-variant="secondary" class=${badgeClass({ variant: 'secondary' })}>+US$0.25 Daily Cash</span>
+          </div>
+          ${barChart({
+            config: chartConfig,
+            data: activityData,
+            title: 'Card activity by month',
+            class: 'aspect-auto h-20 w-full',
+            width: 330,
+            height: 80,
+            margin: { top: 4, right: 0, bottom: 0, left: 0 },
+            xAxis: { dataKey: 'month', tickLine: false, tickMargin: 4, axisLine: false, tickFormatter: (v) => String(v).slice(0, 1), class: 'text-[10px]' },
+            tooltip: { cursor: false, hideLabel: true },
+            bars: [{ dataKey: 'amount', fill: 'var(--color-amount)', radius: [3, 3, 0, 0] }],
+          })}
+        </div>
+      </div>
+    </div>
+  `;
+}