@webjsdev/ui 0.3.16 → 0.4.0

package/packages/registry/blocks/preview-02/cards/receiving-method.ts

@@ -0,0 +1,89 @@
+/**
+ * The preview-02 Receiving Method card: the payout account holder, a choice
+ * between bank transfer and PayPal, and the account number. A fragment
+ * helper. Installed by `npx @webjsdev/ui add preview-02` at
+ * `components/preview-02/receiving-method.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=${savePayoutSettings}>`) and enable the
+ * submit button once the form is valid.
+ */
+import { html } from '@webjsdev/core';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import {
+  fieldClass,
+  fieldContentClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+  fieldLegendClass,
+  fieldSetClass,
+  fieldTitleClass,
+} from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+import { radioClass, radioGroupClass } from '../../../components/radio-group.ts';
+import { cn } from '../../../lib/utils.ts';
+import { XIcon } from '../../../lib/icons.ts';
+
+const METHODS = [
+  { value: 'bank', id: 'method-bank', title: 'Bank Transfer', description: 'SWIFT / IBAN', descriptionClass: '' },
+  { value: 'paypal', id: 'method-paypal', title: 'PayPal', description: 'Instant Payout', descriptionClass: 'line-clamp-1' },
+];
+
+export function receivingMethod() {
+  return html`
+    <form data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Payout Preferences</div>
+        <div data-slot="card-title" class=${cardTitleClass()}>Receiving Method</div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <button type="button" data-slot="button" data-variant="ghost" data-size="icon-sm" class=${cn(buttonClass({ variant: 'ghost', size: 'icon-sm' }), 'bg-muted')}>
+            ${XIcon()}
+            <span class="sr-only">Close</span>
+          </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="account-holder" class=${fieldLabelClass()}>Account Holder Name</label>
+            <input data-slot="input" id="account-holder" name="account-holder" value="Synthetic Horizons Music LLC" class=${inputClass()}>
+          </div>
+          <fieldset data-slot="field-set" class=${fieldSetClass()}>
+            <legend data-slot="field-legend" data-variant="label" class=${fieldLegendClass({ variant: 'label' })}>Receiving Method</legend>
+            <div role="radiogroup" aria-label="Receiving method" data-slot="radio-group" class=${cn(radioGroupClass(), 'grid grid-cols-1 items-start gap-3 md:grid-cols-2 style-sera:grid-cols-1')}>
+              ${METHODS.map((m) => html`
+                <label data-slot="field-label" for=${m.id} class=${fieldLabelClass()}>
+                  <div role="group" data-slot="field" data-orientation="horizontal" class=${cn(fieldClass({ orientation: 'horizontal' }), 'pb-2.5')}>
+                    <input type="radio" data-slot="radio" name="method" value=${m.value} id=${m.id} ?checked=${m.value === 'bank'} class=${radioClass()}>
+                    <div data-slot="field-content" class=${fieldContentClass()}>
+                      <div data-slot="field-label" class=${fieldTitleClass()}>${m.title}</div>
+                      <p data-slot="field-description" class=${cn(fieldDescriptionClass(), m.descriptionClass)}>${m.description}</p>
+                    </div>
+                  </div>
+                </label>
+              `)}
+            </div>
+          </fieldset>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+            <label data-slot="field-label" for="iban" class=${fieldLabelClass()}>IBAN / Account Number</label>
+            <input data-slot="input" id="iban" name="iban" placeholder="DE89 3704 0044 ...." class=${inputClass()}>
+          </div>
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="submit" data-slot="button" data-variant="default" data-size="default" disabled class=${cn(buttonClass(), 'w-full')}>Save Payout Settings</button>
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/recent-transactions.ts

@@ -0,0 +1,101 @@
+/**
+ * The preview-02 "Recent Transactions" card: a table of the latest account
+ * activity, each row with an actions menu. A fragment helper; the menus are
+ * the kit's `<ui-dropdown-menu>`. Installed at
+ * `components/preview-02/recent-transactions.ts`. Ported from shadcn/ui's
+ * preview-02.
+ *
+ * The transactions are sample data. Replace them with your own and make each
+ * menu item a link or a form posting to the matching action.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import {
+  tableBodyClass,
+  tableCellClass,
+  tableClass,
+  tableContainerClass,
+  tableRowClass,
+} from '../../../components/table.ts';
+import '../../../components/dropdown-menu.ts';
+import { CarIcon, CoffeeIcon, MoreHorizontalIcon, ShoppingCartIcon, TvIcon, WalletIcon } from '../../../lib/icons.ts';
+
+interface Transaction {
+  icon: (cls?: string) => TemplateResult;
+  name: string;
+  category: string;
+  date: string;
+  amount: string;
+  income?: boolean;
+}
+
+const TRANSACTIONS: Transaction[] = [
+  { icon: CoffeeIcon, name: 'Blue Bottle Coffee', category: 'Food & Drink', date: 'Today, 10:24 AM', amount: '-$6.50' },
+  { icon: ShoppingCartIcon, name: 'Whole Foods Market', category: 'Groceries', date: 'Yesterday', amount: '-$142.30' },
+  { icon: WalletIcon, name: 'Stripe Payout', category: 'Income', date: 'Oct 12', amount: '+$4,200.00', income: true },
+  { icon: CarIcon, name: 'Uber Technologies', category: 'Transport', date: 'Oct 11', amount: '-$24.10' },
+  { icon: TvIcon, name: 'Netflix Subscription', category: 'Entertainment', date: 'Oct 10', amount: '-$19.99' },
+];
+
+export function recentTransactions() {
+  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()}>Recent Transactions</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Your latest account activity.</div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <a href="#" data-slot="button" data-variant="outline" data-size="sm" class=${buttonClass({ variant: 'outline', size: 'sm' })}>View All</a>
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="table-container" class=${tableContainerClass()}>
+          <table data-slot="table" class=${tableClass()}>
+            <tbody data-slot="table-body" class=${tableBodyClass()}>
+              ${TRANSACTIONS.map((t) => html`
+                <tr data-slot="table-row" class=${tableRowClass()}>
+                  <td data-slot="table-cell" class=${cn(tableCellClass(), 'w-10')}>
+                    <div class="flex size-10 items-center justify-center rounded-lg bg-muted">${t.icon('size-4 shrink-0')}</div>
+                  </td>
+                  <td data-slot="table-cell" class=${tableCellClass()}>
+                    <div class="flex flex-col">
+                      <span class="font-medium">${t.name}</span>
+                      <span class="text-sm text-muted-foreground">${t.category}</span>
+                    </div>
+                  </td>
+                  <td data-slot="table-cell" class=${cn(tableCellClass(), 'text-sm text-muted-foreground')}>${t.date}</td>
+                  <td data-slot="table-cell" class=${cn(tableCellClass(), 'text-right')}>
+                    <span class=${cn('text-sm font-semibold tabular-nums', t.income && 'text-emerald-500')}>${t.amount}</span>
+                  </td>
+                  <td data-slot="table-cell" class=${cn(tableCellClass(), 'w-8')}>
+                    <ui-dropdown-menu>
+                      <ui-dropdown-menu-trigger>
+                        <button type="button" data-slot="button" data-variant="ghost" data-size="icon-sm" aria-label=${`Actions for ${t.name}`} class=${buttonClass({ variant: 'ghost', size: 'icon-sm' })}>${MoreHorizontalIcon()}</button>
+                      </ui-dropdown-menu-trigger>
+                      <ui-dropdown-menu-content align="end">
+                        <ui-dropdown-menu-item>View details</ui-dropdown-menu-item>
+                        <ui-dropdown-menu-item>Add note</ui-dropdown-menu-item>
+                        <ui-dropdown-menu-item>Categorize</ui-dropdown-menu-item>
+                        <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+                        <ui-dropdown-menu-item>Dispute</ui-dropdown-menu-item>
+                      </ui-dropdown-menu-content>
+                    </ui-dropdown-menu>
+                  </td>
+                </tr>
+              `)}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/release-catalog.ts

@@ -0,0 +1,73 @@
+/**
+ * The preview-02 holdings catalog card: a search field and an asset-type
+ * filter over a list of holdings. A fragment helper. Installed by
+ * `npx @webjsdev/ui add preview-02` at `components/preview-02/release-catalog.ts`.
+ * Ported from shadcn/ui's preview-02.
+ *
+ * The search field and the filter show their initial state. Make the search a
+ * GET form to your holdings route and filter the list on the server.
+ */
+import { html } from '@webjsdev/core';
+import { badgeClass } from '../../../components/badge.ts';
+import { cardClass, cardContentClass, cardHeaderClass } from '../../../components/card.ts';
+import { inputGroupAddonClass, inputGroupClass, inputGroupInputClass } from '../../../components/input-group.ts';
+import {
+  itemClass,
+  itemContentClass,
+  itemDescriptionClass,
+  itemGroupClass,
+  itemMediaClass,
+  itemTitleClass,
+} from '../../../components/item.ts';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/toggle-group.ts';
+import { SearchIcon } from '../../../lib/icons.ts';
+
+const HOLDINGS = [
+  { ticker: 'VOO', name: 'Vanguard S&P 500 ETF', type: 'ETF', added: 'Jan 2021', shares: '112', value: '$48,230.40' },
+  { ticker: 'VIG', name: 'Vanguard Dividend Appreciation', type: 'ETF', added: 'Mar 2022', shares: '450', value: '$26,033.79' },
+  { ticker: 'AAPL', name: 'Apple Inc.', type: 'Stock', added: 'Nov 2020', shares: '85', value: '$18,488.90' },
+  { ticker: 'O', name: 'Realty Income Corp', type: 'REIT', added: 'Jun 2023', shares: '320', value: '$15,136.59' },
+];
+
+export function releaseCatalog() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div class="flex items-center justify-between gap-3">
+          <div data-slot="input-group" role="group" class=${cn(inputGroupClass(), 'max-w-sm')}>
+            <input data-slot="input-group-control" id="release-catalog-search" placeholder="Search holdings or tickers..." aria-label="Search holdings or tickers" class=${inputGroupInputClass()}>
+            <label data-slot="input-group-addon" data-align="inline-start" for="release-catalog-search" class=${inputGroupAddonClass()}>${SearchIcon()}</label>
+          </div>
+          <ui-toggle-group type="single" value="etfs" variant="outline" spacing="1" aria-label="Asset type">
+            <ui-toggle-group-item value="stocks">Stocks</ui-toggle-group-item>
+            <ui-toggle-group-item value="etfs">ETFs</ui-toggle-group-item>
+            <ui-toggle-group-item value="reits">REITs</ui-toggle-group-item>
+          </ui-toggle-group>
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div role="list" data-slot="item-group" class=${itemGroupClass()}>
+          ${HOLDINGS.map((holding) => html`
+            <div role="listitem" data-slot="item" data-variant="muted" data-size="default" class=${itemClass({ variant: 'muted' })}>
+              <div data-slot="item-media" data-variant="default" class=${itemMediaClass()}>
+                <div class="flex size-12 items-center justify-center rounded-lg border text-sm font-semibold">${holding.ticker}</div>
+              </div>
+              <div data-slot="item-content" class=${itemContentClass()}>
+                <div data-slot="item-title" class=${itemTitleClass()}>${holding.name}</div>
+                <p data-slot="item-description" class=${cn(itemDescriptionClass(), 'text-xs tracking-wider uppercase')}>${holding.shares} Shares · ${holding.added}</p>
+              </div>
+              <div class="flex shrink-0 items-center gap-6">
+                <span data-slot="badge" data-variant="outline" class=${badgeClass({ variant: 'outline' })}>${holding.type}</span>
+                <div class="flex flex-col items-end gap-0.5">
+                  <span class="text-xs tracking-wider text-muted-foreground uppercase">Value</span>
+                  <span class="font-medium tabular-nums">${holding.value}</span>
+                </div>
+              </div>
+            </div>
+          `)}
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/roller-shades.ts

@@ -0,0 +1,110 @@
+/**
+ * The preview-02 Roller Shades card: a shade drawn at its position, a slider
+ * that moves it, and Open / Half / Closed presets. Installed by
+ * `npx @webjsdev/ui add preview-02` at `components/preview-02/roller-shades.ts`.
+ * Ported from shadcn/ui's preview-02.
+ *
+ * The markup is a fragment the server renders at the half-closed position.
+ * `<preview-02-roller-shades>` adds the behaviour shadcn keeps in React state:
+ * the slider redraws the shade and picks the matching preset, and a preset
+ * moves the slider. Wire `ui-value-commit` from the slider to an action that
+ * drives the real shade.
+ */
+import { WebComponent, html } from '@webjsdev/core';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { sliderClass } from '../../../components/slider.ts';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/slider.ts';
+import '../../../components/toggle-group.ts';
+
+const PRESETS: Record<string, number> = { open: 0, half: 50, closed: 100 };
+
+function presetFor(position: number): string {
+  return position <= 10 ? 'open' : position >= 90 ? 'closed' : 'half';
+}
+
+/** Keeps the shade, the slider and the presets in step. */
+export class Preview02RollerShades extends WebComponent {
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('input', this._onInput);
+    this.addEventListener('ui-value-change', this._onPreset);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('input', this._onInput);
+    this.removeEventListener('ui-value-change', this._onPreset);
+    super.disconnectedCallback();
+  }
+
+  _draw(position: number): void {
+    const shade = this.querySelector<HTMLElement>('[data-shade]');
+    if (shade) shade.style.height = `${position}%`;
+  }
+
+  _onInput = (e: Event): void => {
+    const input = e.target as HTMLInputElement;
+    if (input.type !== 'range') return;
+    const position = Number(input.value);
+    this._draw(position);
+    const group = this.querySelector<HTMLElement & { value: string }>('ui-toggle-group');
+    if (group && group.value !== presetFor(position)) group.value = presetFor(position);
+  };
+
+  _onPreset = (e: Event): void => {
+    const target = e.target as HTMLElement;
+    if (target.localName !== 'ui-toggle-group') return;
+    const position = PRESETS[(e as CustomEvent<{ value: string }>).detail?.value];
+    if (position === undefined) return;
+    const input = this.querySelector<HTMLInputElement>('input[type="range"]');
+    if (input) {
+      input.value = String(position);
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  };
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+Preview02RollerShades.register('preview-02-roller-shades');
+
+export function rollerShades(opts: { position?: number } = {}) {
+  const position = opts.position ?? 50;
+  return html`
+    <preview-02-roller-shades>
+      <div data-slot="card" data-size="default" class=${cardClass()}>
+        <div data-slot="card-header" class=${cardHeaderClass()}>
+          <div data-slot="card-title" class=${cardTitleClass()}>Living Room</div>
+          <div data-slot="card-description" class=${cardDescriptionClass()}>Roller Shades</div>
+        </div>
+        <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4')}>
+          <div class="flex h-32 flex-col overflow-hidden rounded-lg border bg-muted">
+            <div data-shade class="bg-muted-foreground transition-all duration-300 motion-reduce:transition-none" style=${`height: ${position}%`}></div>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="text-xs font-medium tracking-wider text-muted-foreground uppercase">Open</span>
+            <ui-slider class="flex-1">
+              <input type="range" min="0" max="100" step="1" value=${String(position)} name="shade-position" aria-label="Shade position" class=${sliderClass()}>
+            </ui-slider>
+            <span class="text-xs font-medium tracking-wider text-muted-foreground uppercase">Close</span>
+          </div>
+        </div>
+        <div data-slot="card-footer" class=${cardFooterClass()}>
+          <ui-toggle-group type="single" value=${presetFor(position)} variant="outline" spacing="1" aria-label="Shade preset" class="w-full">
+            <ui-toggle-group-item value="open" class="flex-1">Open</ui-toggle-group-item>
+            <ui-toggle-group-item value="half" class="flex-1">Half</ui-toggle-group-item>
+            <ui-toggle-group-item value="closed" class="flex-1">Closed</ui-toggle-group-item>
+          </ui-toggle-group>
+        </div>
+      </div>
+    </preview-02-roller-shades>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/savings-progress.ts

@@ -0,0 +1,68 @@
+/**
+ * The preview-02 savings progress card: a donut chart of saved against
+ * remaining with the total in its centre, over three summary rows. A
+ * fragment helper; the chart is the kit's `<ui-chart>`, drawn by the server.
+ * Installed at `components/preview-02/savings-progress.ts`. Ported from
+ * shadcn/ui's preview-02.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { cardClass, cardContentClass, cardFooterClass } from '../../../components/card.ts';
+import { pieChart, type ChartConfig } from '../../../components/chart.ts';
+import { separatorClass } from '../../../components/separator.ts';
+
+const chartData = [
+  { name: 'saved', value: 24000, fill: 'var(--color-saved)' },
+  { name: 'remaining', value: 6000, fill: 'var(--color-remaining)' },
+];
+
+const chartConfig: ChartConfig = {
+  saved: { label: 'Saved', color: 'var(--chart-2)' },
+  remaining: { label: 'Remaining', color: 'var(--chart-1)' },
+};
+
+const separator = () => html`<div role="none" data-slot="separator" data-orientation="horizontal" class=${separatorClass()}></div>`;
+
+function row(label: string, value: string, numeric = false) {
+  return html`<div class="flex w-full items-center justify-between py-3">
+    <span class="text-sm text-muted-foreground">${label}</span>
+    <span class=${numeric ? 'text-sm font-semibold tabular-nums' : 'text-sm font-semibold'}>${value}</span>
+  </div>`;
+}
+
+export function savingsProgress() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${pieChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Savings progress: $24,000 saved, 80% of $30,000',
+          class: 'mx-auto aspect-square max-h-[220px]',
+          tooltip: { cursor: false, hideLabel: true },
+          pies: [{
+            dataKey: 'value',
+            nameKey: 'name',
+            innerRadius: 70,
+            outerRadius: 95,
+            strokeWidth: 0,
+            startAngle: 90,
+            endAngle: -270,
+            center: ({ cx, cy }) => svg`
+              <text x=${cx} y=${cy} text-anchor="middle" dominant-baseline="middle">
+                <tspan x=${cx} y=${cy - 12} class="fill-foreground text-2xl font-bold">$24,000</tspan>
+                <tspan x=${cx} y=${cy + 12} class="fill-muted-foreground text-xs">80% of $30,000</tspan>
+              </text>`,
+          }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-0')}>
+        ${row('Projected Finish', 'October 2024')}
+        ${separator()}
+        ${row('Monthly Average', '$1,250', true)}
+        ${separator()}
+        ${row('Top Contributor', 'Auto-Transfer')}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/savings-targets.ts

@@ -0,0 +1,132 @@
+/**
+ * The preview-02 savings pair: a "Savings Targets" card with two progress
+ * goals beside a "Buy Investment" order form. A fragment helper. Installed at
+ * `components/preview-02/savings-targets.ts`. Ported from shadcn/ui's
+ * preview-02.
+ *
+ * The order form has no action yet. Bind a server action from a
+ * `'use server'` file (`<form action=${placeOrder}>`) before you ship it.
+ */
+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 {
+  inputGroupAddonClass,
+  inputGroupClass,
+  inputGroupInputClass,
+  inputGroupTextClass,
+} from '../../../components/input-group.ts';
+import {
+  itemClass,
+  itemContentClass,
+  itemDescriptionClass,
+  itemFooterClass,
+  itemGroupClass,
+} from '../../../components/item.ts';
+import {
+  nativeSelectClass,
+  nativeSelectIconClass,
+  nativeSelectOptionClass,
+  nativeSelectWrapperClass,
+} from '../../../components/native-select.ts';
+import { progressClass } from '../../../components/progress.ts';
+import { ChevronDownIcon } from '../../../lib/icons.ts';
+
+function target(label: string, amount: string, pct: number, saved: string) {
+  return html`<div role="listitem" data-slot="item" data-variant="muted" data-size="default" class=${cn(itemClass({ variant: 'muted' }), 'flex-col items-stretch')}>
+    <div data-slot="item-content" class=${cn(itemContentClass(), 'gap-3')}>
+      <p data-slot="item-description" class=${cn(itemDescriptionClass(), 'font-heading text-xs font-medium tracking-wider text-muted-foreground uppercase')}>${label}</p>
+      <span class="text-3xl font-semibold tabular-nums">${amount}</span>
+      <progress data-slot="progress" value=${pct} max="100" aria-label=${`${label} savings progress`} class=${progressClass()}></progress>
+    </div>
+    <div data-slot="item-footer" class=${itemFooterClass()}>
+      <span class="text-sm text-muted-foreground">${pct}% achieved</span>
+      <span class="text-sm font-medium tabular-nums">${saved}</span>
+    </div>
+  </div>`;
+}
+
+function stat(label: string, value: string) {
+  return html`<div class="flex items-center justify-between">
+    <span class="text-sm text-muted-foreground">${label}</span>
+    <span class="text-sm font-semibold tabular-nums">${value}</span>
+  </div>`;
+}
+
+export function savingsTargets() {
+  return html`
+    <div class="grid grid-cols-2 gap-(--gap)">
+      <div data-slot="card" data-size="default" class=${cardClass()}>
+        <div data-slot="card-header" class=${cardHeaderClass()}>
+          <div data-slot="card-title" class=${cardTitleClass()}>Savings Targets</div>
+          <div data-slot="card-description" class=${cardDescriptionClass()}>Active milestones for 2024</div>
+          <div data-slot="card-action" class=${cardActionClass()}>
+            <button type="button" data-slot="button" data-variant="outline" data-size="sm" class=${buttonClass({ variant: 'outline', size: 'sm' })}>New Goal</button>
+          </div>
+        </div>
+        <div data-slot="card-content" class=${cardContentClass()}>
+          <div role="list" data-slot="item-group" class=${cn(itemGroupClass(), 'gap-3')}>
+            ${target('Retirement', '$420,000', 65, '$273,000')}
+            ${target('Real Estate', '$85,000', 32, '$27,200')}
+          </div>
+        </div>
+        <div data-slot="card-footer" class=${cardFooterClass()}>
+          <div data-slot="card-description" class=${cn(cardDescriptionClass(), 'text-center')}>You have not met your targets for this year.</div>
+        </div>
+      </div>
+      <form data-slot="card" data-size="default" class=${cardClass()}>
+        <div data-slot="card-header" class=${cardHeaderClass()}>
+          <div data-slot="card-title" class=${cardTitleClass()}>Buy Investment</div>
+        </div>
+        <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-1 flex-col gap-3')}>
+          <div data-slot="field-group" class=${cn(fieldGroupClass(), 'flex-1')}>
+            <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+              <label data-slot="field-label" for="invest-amount" class=${fieldLabelClass()}>Amount to Invest</label>
+              <div data-slot="input-group" role="group" class=${inputGroupClass()}>
+                <div role="group" data-slot="input-group-addon" data-align="inline-start" class=${inputGroupAddonClass()}>
+                  <span class=${inputGroupTextClass()}>$</span>
+                </div>
+                <input data-slot="input-group-control" id="invest-amount" name="amount" value="1,000.00" class=${inputGroupInputClass()}>
+              </div>
+            </div>
+            <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+              <label data-slot="field-label" for="invest-type" class=${fieldLabelClass()}>Order Type</label>
+              <div data-slot="native-select-wrapper" data-size="default" class=${nativeSelectWrapperClass()}>
+                <select data-slot="native-select" data-size="default" id="invest-type" name="type" class=${nativeSelectClass()}>
+                  <option value="market" selected class=${nativeSelectOptionClass()}>Market Order</option>
+                  <option value="limit" class=${nativeSelectOptionClass()}>Limit Order</option>
+                  <option value="stop" class=${nativeSelectOptionClass()}>Stop Order</option>
+                </select>
+                ${ChevronDownIcon(nativeSelectIconClass())}
+              </div>
+              <p data-slot="field-description" class=${fieldDescriptionClass()}>Market orders execute at the current price.</p>
+            </div>
+            <div class="flex flex-col gap-2">
+              ${stat('Estimated Shares', '1.95')}
+              ${stat('Buying Power', '$12,450.00')}
+            </div>
+          </div>
+        </div>
+        <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-3')}>
+          <button type="submit" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'w-full')}>Review Order</button>
+          <div data-slot="card-description" class=${cn(cardDescriptionClass(), 'text-center')}>Trades are typically executed within minutes during market hours.</div>
+        </div>
+      </form>
+    </div>
+  `;
+}