@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/preview-02/cards/new-milestone.ts

@@ -0,0 +1,53 @@
+/**
+ * The preview-02 new milestone card: a savings goal's name, amount and date.
+ * A fragment helper. Installed by `npx @webjsdev/ui add preview-02` at
+ * `components/preview-02/new-milestone.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=${createGoal}>`) 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 { cn } from '../../../lib/utils.ts';
+
+function field(id: string, name: string, label: string, attrs: { placeholder?: string; value?: string }) {
+  return html`<div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+    <label data-slot="field-label" for=${id} class=${fieldLabelClass()}>${label}</label>
+    <input data-slot="input" id=${id} name=${name} placeholder=${attrs.placeholder ?? null} value=${attrs.value ?? null} class=${inputClass()}>
+  </div>`;
+}
+
+export function newMilestone() {
+  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()}>Set a new milestone</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Define your financial target and we'll help you pace your savings.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="field-group" class=${fieldGroupClass()}>
+          ${field('goal-name', 'goal', 'Goal Name', { placeholder: 'e.g. New Car, Home Downpayment' })}
+          <div class="grid grid-cols-2 gap-3">
+            ${field('target-amount', 'amount', 'Target Amount', { value: '$15,000' })}
+            ${field('target-date', 'date', 'Target Date', { value: 'Dec 2025' })}
+          </div>
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2')}>
+        <button type="submit" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'w-full')}>Create Goal</button>
+        <button type="reset" data-slot="button" data-variant="outline" data-size="default" class=${cn(buttonClass({ variant: 'outline' }), 'w-full')}>Cancel</button>
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/notification-settings.ts

@@ -0,0 +1,126 @@
+/**
+ * The preview-02 Notifications card: a "Select all" checkbox over one
+ * checkbox per kind of alert. Installed by `npx @webjsdev/ui add preview-02`
+ * at `components/preview-02/notification-settings.ts`. Ported from shadcn/ui's
+ * preview-02.
+ *
+ * The markup is a fragment the server renders with each box at its default.
+ * `<preview-02-notification-settings>` adds what shadcn keeps in React state:
+ * "Select all" is indeterminate while only some boxes are checked, and
+ * checking it checks or clears them all. The `<form>` has no `action` yet:
+ * bind a server action from a `'use server'` file
+ * (`<form action=${saveNotificationSettings}>`) and each checked box submits
+ * as `notify=<id>`.
+ */
+import { WebComponent, html } from '@webjsdev/core';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { checkboxClass } from '../../../components/checkbox.ts';
+import {
+  fieldClass,
+  fieldContentClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+} from '../../../components/field.ts';
+import { cn } from '../../../lib/utils.ts';
+
+const NOTIFICATIONS = [
+  { id: 'transactions', label: 'Transaction alerts', description: 'Deposits, withdrawals, and transfers.', defaultChecked: true },
+  { id: 'security', label: 'Security alerts', description: 'Login attempts and account changes.', defaultChecked: true },
+  { id: 'goals', label: 'Goal milestones', description: 'Updates at 25%, 50%, 75%, and 100%.', defaultChecked: false },
+  { id: 'market', label: 'Market updates', description: 'Daily portfolio summary and price alerts.', defaultChecked: false },
+];
+
+/** Keeps "Select all" in step with the boxes it governs. */
+export class Preview02NotificationSettings extends WebComponent {
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('change', this._onChange);
+  }
+
+  // The server cannot render the indeterminate state, which is a property, so
+  // it is set once the element has rendered (and its slot has settled).
+  firstUpdated(changedProperties: Map<string, unknown>) {
+    super.firstUpdated?.(changedProperties);
+    requestAnimationFrame(() => this._sync());
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('change', this._onChange);
+    super.disconnectedCallback();
+  }
+
+  _all(): HTMLInputElement | null {
+    return this.querySelector<HTMLInputElement>('input[data-select-all]');
+  }
+
+  _items(): HTMLInputElement[] {
+    return Array.from(this.querySelectorAll<HTMLInputElement>('input[name="notify"]'));
+  }
+
+  _sync(): void {
+    const all = this._all();
+    const items = this._items();
+    if (!all || !items.length) return;
+    const checked = items.filter((i) => i.checked).length;
+    all.checked = checked === items.length;
+    all.indeterminate = checked > 0 && checked < items.length;
+  }
+
+  _onChange = (e: Event): void => {
+    const target = e.target as HTMLInputElement;
+    if (target.hasAttribute('data-select-all')) {
+      for (const item of this._items()) item.checked = target.checked;
+    }
+    this._sync();
+  };
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+Preview02NotificationSettings.register('preview-02-notification-settings');
+
+export function notificationSettings() {
+  const allChecked = NOTIFICATIONS.every((n) => n.defaultChecked);
+  return html`
+    <preview-02-notification-settings>
+      <form data-slot="card" data-size="default" class=${cardClass()}>
+        <div data-slot="card-header" class=${cardHeaderClass()}>
+          <div data-slot="card-title" class=${cardTitleClass()}>Notifications</div>
+          <div data-slot="card-description" class=${cardDescriptionClass()}>Choose what you want to be notified about.</div>
+        </div>
+        <div data-slot="card-content" class=${cardContentClass()}>
+          <div data-slot="field-group" class=${fieldGroupClass()}>
+            <div role="group" data-slot="field" data-orientation="horizontal" class=${fieldClass({ orientation: 'horizontal' })}>
+              <input type="checkbox" data-slot="checkbox" data-select-all id="notify-all" ?checked=${allChecked} class=${checkboxClass()}>
+              <div data-slot="field-content" class=${fieldContentClass()}>
+                <label data-slot="field-label" for="notify-all" class=${fieldLabelClass()}>Select all</label>
+              </div>
+            </div>
+            ${NOTIFICATIONS.map((n) => html`
+              <div role="group" data-slot="field" data-orientation="horizontal" class=${fieldClass({ orientation: 'horizontal' })}>
+                <input type="checkbox" data-slot="checkbox" id=${`notify-${n.id}`} name="notify" value=${n.id} ?checked=${n.defaultChecked} class=${checkboxClass()}>
+                <div data-slot="field-content" class=${fieldContentClass()}>
+                  <label data-slot="field-label" for=${`notify-${n.id}`} class=${fieldLabelClass()}>${n.label}</label>
+                  <p data-slot="field-description" class=${fieldDescriptionClass()}>${n.description}</p>
+                </div>
+              </div>
+            `)}
+          </div>
+        </div>
+        <div data-slot="card-footer" class=${cardFooterClass()}>
+          <button type="submit" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'w-full')}>Save Preferences</button>
+        </div>
+      </form>
+    </preview-02-notification-settings>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/payments.ts

@@ -0,0 +1,88 @@
+/**
+ * The preview-02 Payments card: a breadcrumb with an account menu over a list
+ * of payment settings links. A fragment helper. Installed by
+ * `npx @webjsdev/ui add preview-02` at `components/preview-02/payments.ts`.
+ * Ported from shadcn/ui's preview-02.
+ */
+import { html } from '@webjsdev/core';
+import { buttonClass } from '../../../components/button.ts';
+import { cardClass, cardContentClass, cardHeaderClass } from '../../../components/card.ts';
+import {
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbListClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass,
+} from '../../../components/breadcrumb.ts';
+import {
+  itemClass,
+  itemContentClass,
+  itemDescriptionClass,
+  itemGroupClass,
+  itemMediaClass,
+  itemTitleClass,
+} from '../../../components/item.ts';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import { CalendarIcon, ChevronRightIcon, GaugeIcon, MoreHorizontalIcon, RefreshCwIcon, RepeatIcon } from '../../../lib/icons.ts';
+
+const LINKS = [
+  { icon: GaugeIcon, title: 'Change transfer limit', description: 'Adjust how much you can send from your balance.' },
+  { icon: CalendarIcon, title: 'Scheduled transfers', description: 'Set up a transfer to send at a later date.' },
+  { icon: RepeatIcon, title: 'Direct Debits', description: 'Set up and manage regular payments.' },
+  { icon: RefreshCwIcon, title: 'Recurring card payments', description: 'Manage your repeated card transactions.' },
+];
+
+const separator = () => html`<li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${breadcrumbSeparatorClass()}>${ChevronRightIcon()}</li>`;
+
+export function payments() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'flex flex-col gap-3')}>
+        <nav aria-label="breadcrumb" data-slot="breadcrumb">
+          <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+            <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+              <a data-slot="breadcrumb-link" href="#" class=${breadcrumbLinkClass()}>Home</a>
+            </li>
+            ${separator()}
+            <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+              <ui-dropdown-menu>
+                <ui-dropdown-menu-trigger>
+                  <button type="button" data-slot="button" data-variant="ghost" data-size="icon-sm" class=${buttonClass({ variant: 'ghost', size: 'icon-sm' })}>
+                    ${MoreHorizontalIcon()}
+                    <span class="sr-only">Account options</span>
+                  </button>
+                </ui-dropdown-menu-trigger>
+                <ui-dropdown-menu-content align="start">
+                  <ui-dropdown-menu-group>
+                    <ui-dropdown-menu-item>Profile</ui-dropdown-menu-item>
+                    <ui-dropdown-menu-item>Statements</ui-dropdown-menu-item>
+                    <ui-dropdown-menu-item>Documents</ui-dropdown-menu-item>
+                  </ui-dropdown-menu-group>
+                </ui-dropdown-menu-content>
+              </ui-dropdown-menu>
+            </li>
+            ${separator()}
+            <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+              <span data-slot="breadcrumb-page" aria-current="page" class=${breadcrumbPageClass()}>Payments</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div role="list" data-slot="item-group" class=${itemGroupClass()}>
+          ${LINKS.map((link) => html`
+            <a href="#" role="listitem" 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' })}>${link.icon()}</div>
+              <div data-slot="item-content" class=${itemContentClass()}>
+                <div data-slot="item-title" class=${itemTitleClass()}>${link.title}</div>
+                <p data-slot="item-description" class=${itemDescriptionClass()}>${link.description}</p>
+              </div>
+              ${ChevronRightIcon('size-4 shrink-0 text-muted-foreground')}
+            </a>
+          `)}
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/payout-threshold.ts

@@ -0,0 +1,92 @@
+/**
+ * The preview-02 "Payout Threshold" form: a currency select, a minimum
+ * payout slider and notes. A fragment helper; the select and slider are the
+ * kit's `<ui-select>` and `<ui-slider>`, each around its native control.
+ * Installed at `components/preview-02/payout-threshold.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=${saveThreshold}>`) before you ship it. shadcn shows the
+ * slider's value live from React state; the amount here is the server's
+ * first value, so read the submitted `min_payout` in your action.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import {
+  fieldClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+} from '../../../components/field.ts';
+import { selectTriggerClass } from '../../../components/select.ts';
+import { sliderClass } from '../../../components/slider.ts';
+import { textareaClass } from '../../../components/textarea.ts';
+import '../../../components/select.ts';
+import '../../../components/slider.ts';
+import { XIcon } from '../../../lib/icons.ts';
+
+const CURRENCIES = [
+  { value: 'usd', label: 'USD, United States Dollar' },
+  { value: 'eur', label: 'EUR, Euro' },
+  { value: 'gbp', label: 'GBP, British Pound' },
+  { value: 'jpy', label: 'JPY, Japanese Yen' },
+];
+
+export function payoutThreshold() {
+  const amount = 2500;
+  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()}>Payout Threshold</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Set the minimum balance required before a payout is triggered.</div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <button type="button" data-slot="button" data-variant="ghost" data-size="icon-sm" aria-label="Dismiss" class=${cn(buttonClass({ variant: 'ghost', size: 'icon-sm' }), 'bg-muted')}>${XIcon()}</button>
+        </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="preferred-currency" class=${fieldLabelClass()}>Preferred Currency</label>
+            <ui-select class="w-full">
+              <select id="preferred-currency" name="currency" class=${cn(selectTriggerClass(), 'w-full')}>
+                <optgroup>
+                  ${CURRENCIES.map((c) => html`<option value=${c.value} ?selected=${c.value === 'usd'}>${c.label}</option>`)}
+                </optgroup>
+              </select>
+            </ui-select>
+          </div>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+            <div class="flex items-baseline justify-between">
+              <label data-slot="field-label" for="min-payout" class=${fieldLabelClass()}>Minimum Payout Amount</label>
+              <span class="text-2xl font-semibold tabular-nums">$${amount.toFixed(2)}</span>
+            </div>
+            <ui-slider>
+              <input type="range" id="min-payout" name="min_payout" min="50" max="10000" step="50" value=${amount} class=${sliderClass()}>
+            </ui-slider>
+            <div class="flex items-center justify-between">
+              <p data-slot="field-description" class=${fieldDescriptionClass()}>$50 (MIN)</p>
+              <p data-slot="field-description" class=${fieldDescriptionClass()}>$10,000 (MAX)</p>
+            </div>
+          </div>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+            <label data-slot="field-label" for="payout-notes" class=${fieldLabelClass()}>Notes</label>
+            <textarea data-slot="textarea" id="payout-notes" name="notes" placeholder="Add any notes for this payout configuration..." class=${cn(textareaClass(), 'min-h-[100px]')}></textarea>
+          </div>
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="submit" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'w-full')}>Save Threshold</button>
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/power-usage.ts

@@ -0,0 +1,84 @@
+/**
+ * The preview-02 Power Usage card: the day's usage as a bar chart, the
+ * current draw and solar output, and the battery level. A fragment helper;
+ * the chart is the kit's server-drawn `barChart`. Installed by
+ * `npx @webjsdev/ui add preview-02` at `components/preview-02/power-usage.ts`.
+ * Ported from shadcn/ui's preview-02, which squares the bars in its lyra and
+ * sera styles. A bar's corners are drawn into its SVG path, so the card renders
+ * the chart both ways and the `style-lyra:` / `style-sera:` variants show the
+ * square one: a style switch repaints with no new render, and where those
+ * variants are not defined the rounded chart shows.
+ */
+import { html } from '@webjsdev/core';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { barChart, type ChartConfig } from '../../../components/chart.ts';
+import { progressClass } from '../../../components/progress.ts';
+import { separatorClass } from '../../../components/separator.ts';
+import { cn } from '../../../lib/utils.ts';
+
+const chartData = [
+  { hour: '6a', usage: 1.2 },
+  { hour: '8a', usage: 2.8 },
+  { hour: '10a', usage: 3.1 },
+  { hour: '12p', usage: 2.4 },
+  { hour: '2p', usage: 3.4 },
+  { hour: '4p', usage: 2.9 },
+  { hour: '6p', usage: 3.8 },
+  { hour: '8p', usage: 3.2 },
+];
+
+const chartConfig = {
+  usage: { label: 'Usage (kW)', color: 'var(--chart-2)' },
+} satisfies ChartConfig;
+
+export function powerUsage() {
+  const chart = (radius: number | number[]) => barChart({
+    config: chartConfig,
+    data: chartData,
+    title: 'Power usage through the day, in kilowatts',
+    class: 'aspect-auto h-[140px] w-full',
+    width: 330,
+    height: 140,
+    margin: { left: 0, right: 0, top: 4, bottom: 0 },
+    xAxis: { dataKey: 'hour', tickLine: false, tickMargin: 6, axisLine: false, class: 'text-xs' },
+    tooltip: { cursor: false, hideLabel: true },
+    bars: [{ dataKey: 'usage', fill: 'var(--color-usage)', radius }],
+  });
+  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()}>Power Usage</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Whole Home</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4')}>
+        <div class="contents style-lyra:hidden style-sera:hidden">${chart([4, 4, 0, 0])}</div>
+        <div class="hidden style-lyra:contents style-sera:contents">${chart(0)}</div>
+        <div role="none" data-slot="separator" data-orientation="horizontal" class=${separatorClass()}></div>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="flex flex-col gap-0.5">
+            <span class="text-sm text-muted-foreground">Currently Using</span>
+            <span class="text-lg font-semibold tabular-nums">3.4 kW</span>
+          </div>
+          <div class="flex flex-col gap-0.5">
+            <span class="text-sm text-muted-foreground">Solar Gen</span>
+            <span class="text-lg font-semibold text-chart-1 tabular-nums">+1.2 kW</span>
+          </div>
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col items-start gap-1')}>
+        <span id="power-usage-battery" class="text-sm text-muted-foreground">Battery Level</span>
+        <div class="flex w-full items-center gap-2">
+          <progress data-slot="progress" value="85" max="100" aria-labelledby="power-usage-battery" class=${cn(progressClass(), 'flex-1')}></progress>
+          <span class="text-sm font-medium tabular-nums">85%</span>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/preferences.ts

@@ -0,0 +1,89 @@
+/**
+ * The preview-02 "Preferences" form: a default currency select and two
+ * switches. A fragment helper; the select and switches are the kit's
+ * `<ui-select>` and `<ui-switch>`, each a real form control. Installed at
+ * `components/preview-02/preferences.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=${savePreferences}>`) before you ship it, and render
+ * each switch's `checked` from the user's saved settings.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import {
+  fieldClass,
+  fieldContentClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+  fieldSeparatorClass,
+} from '../../../components/field.ts';
+import { selectTriggerClass } from '../../../components/select.ts';
+import '../../../components/select.ts';
+import '../../../components/switch.ts';
+import { XIcon } from '../../../lib/icons.ts';
+
+const CURRENCIES = [
+  { value: 'usd', label: 'USD, United States Dollar' },
+  { value: 'eur', label: 'EUR, Euro' },
+  { value: 'gbp', label: 'GBP, British Pound' },
+  { value: 'jpy', label: 'JPY, Japanese Yen' },
+];
+
+const fieldSeparator = () => html`<div role="none" data-slot="field-separator" class=${cn(fieldSeparatorClass(), '-my-4 style-sera:hidden')}></div>`;
+
+function toggle(id: string, name: string, label: string, description: string) {
+  return html`<div role="group" data-slot="field" data-orientation="horizontal" class=${fieldClass({ orientation: 'horizontal' })}>
+    <div data-slot="field-content" class=${fieldContentClass()}>
+      <label data-slot="field-label" for=${id} class=${fieldLabelClass()}>${label}</label>
+      <p data-slot="field-description" class=${fieldDescriptionClass()}>${description}</p>
+    </div>
+    <ui-switch input-id=${id} name=${name} checked></ui-switch>
+  </div>`;
+}
+
+export function preferences() {
+  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()}>Preferences</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Manage your account settings and notifications.</div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <button type="button" data-slot="button" data-variant="ghost" data-size="icon-sm" aria-label="Dismiss" class=${cn(buttonClass({ variant: 'ghost', size: 'icon-sm' }), 'bg-muted')}>${XIcon()}</button>
+        </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="default-currency" class=${fieldLabelClass()}>Default Currency</label>
+            <ui-select class="w-full">
+              <select id="default-currency" name="currency" class=${cn(selectTriggerClass(), 'w-full')}>
+                <optgroup>
+                  ${CURRENCIES.map((c) => html`<option value=${c.value} ?selected=${c.value === 'usd'}>${c.label}</option>`)}
+                </optgroup>
+              </select>
+            </ui-select>
+          </div>
+          ${fieldSeparator()}
+          ${toggle('public-statistics', 'public_statistics', 'Public Statistics', 'Allow others to see your total stream count and listening activity')}
+          ${fieldSeparator()}
+          ${toggle('email-notifications', 'email_notifications', 'Email Notifications', 'Monthly royalty reports and distribution updates')}
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="reset" data-slot="button" data-variant="outline" data-size="default" class=${buttonClass({ variant: 'outline' })}>Reset</button>
+        <button type="submit" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'ml-auto')}>Save Preferences</button>
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/qr-connect.ts

@@ -0,0 +1,54 @@
+/**
+ * The preview-02 "Scan to connect" card: a QR code over a heading and a
+ * button. A fragment helper. Installed at `components/preview-02/qr-connect.ts`.
+ * Ported from shadcn/ui's preview-02.
+ *
+ * shadcn draws the code with the react-qr-code package. The kit takes no
+ * third-party dependency, so the code here is a fixed 21 by 21 module grid
+ * drawn as SVG. To encode your own URL, render it with a QR library of your
+ * choice on the server and put its SVG in place of the grid.
+ */
+import { html, svg } 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 QR = [
+  '111111100101101111111', '100000101001001000001', '101110101111101011101',
+  '101110100100001011101', '101110101010101011101', '100000100111001000001',
+  '111111101010101111111', '000000001101000000000', '101011111001111010110',
+  '010100001110010101001', '111010111011101111010', '001101000101000010101',
+  '110111101111010111011', '000000001001010001010', '111111101101111101001',
+  '100000100010001001111', '101110101011101110100', '101110100110100010011',
+  '101110101000111101110', '100000101101000011001', '111111101011101101111',
+];
+
+export function qrConnect() {
+  const cells = QR.flatMap((row, y) => [...row].map((c, x) => (c === '1' ? svg`<rect x=${x} y=${y} width="1" height="1"></rect>` : '')));
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex justify-center pt-6')}>
+        <div class="rounded-xl border bg-white p-4">
+          <svg viewBox="0 0 21 21" width="160" height="160" class="size-40 text-black" role="img" aria-label="QR code to connect your mobile device" shape-rendering="crispEdges">
+            <rect width="21" height="21" fill="white"></rect>
+            ${cells}
+          </svg>
+        </div>
+      </div>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'text-center')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Scan to connect your mobile device</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Open the Ledger mobile app and scan this code to link your device.</div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="button" data-slot="button" data-variant="secondary" data-size="default" class=${cn(buttonClass({ variant: 'secondary' }), 'w-full')}>Got it</button>
+      </div>
+    </div>
+  `;
+}