@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/dashboard-01/components/nav-documents.ts

@@ -0,0 +1,65 @@
+/**
+ * The dashboard-01 documents list: one link per document, each with a "More"
+ * menu that shows on hover, and a trailing "More" item. Hidden while the
+ * sidebar is collapsed to icons. A fragment helper; the menus are the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's dashboard-01.
+ *
+ * Each "More" button sits right after its link, a sibling of it, because the
+ * kit's styles place it with `peer-*` selectors that need exactly that. The
+ * menu names it through `trigger="<id>"`, so the ids must be unique on the page.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarMenuActionClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { FolderIcon, MoreHorizontalIcon, ShareIcon, Trash2Icon } from '../../../lib/icons.ts';
+
+export interface NavDocument {
+  name: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+}
+
+export function navDocuments({ items }: { items: NavDocument[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'group-data-[collapsible=icon]:hidden')}>
+      <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Documents</div>
+      <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+        ${items.map((item, i) => html`
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+              ${item.icon()}
+              <span>${item.name}</span>
+            </a>
+            <button type="button" id=${`nav-document-more-${i}`} data-slot="sidebar-menu-action" data-sidebar="menu-action" class=${cn(sidebarMenuActionClass({ showOnHover: true }), 'rounded-sm aria-expanded:bg-accent')}>
+              ${MoreHorizontalIcon()}
+              <span class="sr-only">More</span>
+            </button>
+            <ui-dropdown-menu trigger=${`nav-document-more-${i}`}>
+              <ui-dropdown-menu-content class="w-24 rounded-lg" side="right" align="start">
+                <ui-dropdown-menu-item>${FolderIcon()}<span>Open</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-item>${ShareIcon()}<span>Share</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+                <ui-dropdown-menu-item variant="destructive">${Trash2Icon()}<span>Delete</span></ui-dropdown-menu-item>
+              </ui-dropdown-menu-content>
+            </ui-dropdown-menu>
+          </li>
+        `)}
+        <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+          <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'text-sidebar-foreground/70')}>
+            ${MoreHorizontalIcon('text-sidebar-foreground/70')}
+            <span>More</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  `;
+}

package/packages/registry/blocks/dashboard-01/components/nav-main.ts

@@ -0,0 +1,61 @@
+/**
+ * The dashboard-01 main nav: the "Quick Create" button beside an inbox
+ * button, then one link per section. A fragment helper. Ported from
+ * shadcn/ui's dashboard-01.
+ *
+ * "Quick Create" and the inbox button are placeholders: point them at your
+ * own create flow and inbox route. `quickCreate: false` drops that row and
+ * `label` titles the group (shadcn's examples/dashboard has a "Home" group with
+ * no Quick Create row).
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarGroupLabelClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { CirclePlusIcon, MailIcon } from '../../../lib/icons.ts';
+
+export interface NavMainItem {
+  title: string;
+  url: string;
+  icon?: (cls?: string) => TemplateResult;
+}
+
+export function navMain({ items, label, quickCreate = true }: { items: NavMainItem[]; label?: string; quickCreate?: boolean }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+      <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${cn(sidebarGroupContentClass(), 'flex flex-col gap-2')}>
+        ${label ? html`<div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>${label}</div>` : ''}
+        ${quickCreate ? html`<ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${cn(sidebarMenuItemClass(), 'flex items-center gap-2')}>
+            <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground')}>
+              ${CirclePlusIcon()}
+              <span>Quick Create</span>
+            </button>
+            <button type="button" data-slot="button" data-variant="outline" data-size="icon" class=${cn(buttonClass({ variant: 'outline', size: 'icon' }), 'size-8 group-data-[collapsible=icon]:opacity-0')}>
+              ${MailIcon()}
+              <span class="sr-only">Inbox</span>
+            </button>
+          </li>
+        </ul>` : ''}
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          ${items.map((item) => html`
+            <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+              <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+                ${item.icon ? item.icon() : ''}
+                <span>${item.title}</span>
+              </a>
+            </li>
+          `)}
+        </ul>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/dashboard-01/components/nav-secondary.ts

@@ -0,0 +1,40 @@
+/**
+ * The dashboard-01 secondary nav: settings, help and search, pinned to the
+ * bottom of the sidebar by the `class` the app sidebar passes (`mt-auto`).
+ * A fragment helper. Ported from shadcn/ui's dashboard-01.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+
+export interface NavSecondaryItem {
+  title: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+}
+
+export function navSecondary({ items, class: cls }: { items: NavSecondaryItem[]; class?: string }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), cls)}>
+      <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          ${items.map((item) => html`
+            <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+              <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+                ${item.icon()}
+                <span>${item.title}</span>
+              </a>
+            </li>
+          `)}
+        </ul>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/dashboard-01/components/nav-user.ts

@@ -0,0 +1,66 @@
+/**
+ * The dashboard-01 user menu: the signed-in user's avatar, name and email,
+ * opening an account menu. A fragment helper; the menu is the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's dashboard-01.
+ *
+ * The menu items are placeholders. Make "Log out" a form that posts to your
+ * sign-out action, and the others links to your account pages.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { avatarClass, avatarFallbackClass, avatarImageClass } from '../../../components/avatar.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { BellIcon, CircleUserRoundIcon, CreditCardIcon, EllipsisVerticalIcon, LogOutIcon } from '../../../lib/icons.ts';
+
+function userAvatar(user: { name: string; avatar: string }) {
+  return html`<span data-slot="avatar" data-size="default" class=${cn(avatarClass(), 'h-8 w-8 rounded-lg grayscale')}>
+    <span data-slot="avatar-fallback" class=${cn(avatarFallbackClass(), 'rounded-lg')}>VK</span>
+    <img data-slot="avatar-image" src=${user.avatar} alt="@vivek" class=${avatarImageClass()}>
+  </span>`;
+}
+
+function userText(user: { name: string; email: string }) {
+  return html`<div class="grid flex-1 text-left text-sm leading-tight">
+    <span class="truncate font-medium">${user.name}</span>
+    <span class="truncate text-xs text-muted-foreground">${user.email}</span>
+  </div>`;
+}
+
+export function navUser({ user }: { user: { name: string; email: string; avatar: string } }) {
+  return html`
+    <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+      <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+        <ui-dropdown-menu>
+          <ui-dropdown-menu-trigger>
+            <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="lg" class=${cn(sidebarMenuButtonClass({ size: 'lg' }), 'aria-expanded:bg-sidebar-accent aria-expanded:text-sidebar-accent-foreground')}>
+              ${userAvatar(user)}
+              ${userText(user)}
+              ${EllipsisVerticalIcon('ml-auto size-4')}
+            </button>
+          </ui-dropdown-menu-trigger>
+          <ui-dropdown-menu-content class="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg" side="right" align="end">
+            <ui-dropdown-menu-label class="p-0 font-normal">
+              <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                ${userAvatar(user)}
+                ${userText(user)}
+              </div>
+            </ui-dropdown-menu-label>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-group>
+              <ui-dropdown-menu-item>${CircleUserRoundIcon()}Account</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${CreditCardIcon()}Billing</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${BellIcon()}Notifications</ui-dropdown-menu-item>
+            </ui-dropdown-menu-group>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-item>${LogOutIcon()}Log out</ui-dropdown-menu-item>
+          </ui-dropdown-menu-content>
+        </ui-dropdown-menu>
+      </li>
+    </ul>
+  `;
+}

package/packages/registry/blocks/dashboard-01/components/section-cards.ts

@@ -0,0 +1,59 @@
+/**
+ * The dashboard-01 section cards: four headline metrics, each with its
+ * trend badge and a two-line footer. A fragment helper. Ported from
+ * shadcn/ui's dashboard-01.
+ *
+ * The figures are sample data. Compute them on the server (a query in a
+ * `'use server'` file) and pass them in.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { TrendingDownIcon, TrendingUpIcon } from '../../../lib/icons.ts';
+
+interface Metric {
+  label: string;
+  value: string;
+  change: string;
+  trend: (cls?: string) => TemplateResult;
+  summary: string;
+  detail: string;
+}
+
+const metrics: Metric[] = [
+  { label: 'Total Revenue', value: '$1,250.00', change: '+12.5%', trend: TrendingUpIcon, summary: 'Trending up this month', detail: 'Visitors for the last 6 months' },
+  { label: 'New Customers', value: '1,234', change: '-20%', trend: TrendingDownIcon, summary: 'Down 20% this period', detail: 'Acquisition needs attention' },
+  { label: 'Active Accounts', value: '45,678', change: '+12.5%', trend: TrendingUpIcon, summary: 'Strong user retention', detail: 'Engagement exceed targets' },
+  { label: 'Growth Rate', value: '4.5%', change: '+4.5%', trend: TrendingUpIcon, summary: 'Steady performance increase', detail: 'Meets growth projections' },
+];
+
+export function sectionCards() {
+  return html`
+    <div class="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
+      ${metrics.map((m) => html`
+        <div data-slot="card" data-size="default" class=${cn(cardClass(), '@container/card')}>
+          <div data-slot="card-header" class=${cardHeaderClass()}>
+            <div data-slot="card-description" class=${cardDescriptionClass()}>${m.label}</div>
+            <div data-slot="card-title" class=${cn(cardTitleClass(), 'text-2xl font-semibold tabular-nums @[250px]/card:text-3xl')}>${m.value}</div>
+            <div data-slot="card-action" class=${cardActionClass()}>
+              <span data-slot="badge" data-variant="outline" class=${badgeClass({ variant: 'outline' })}>${m.trend()}${m.change}</span>
+            </div>
+          </div>
+          <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col items-start gap-1.5 text-sm')}>
+            <div class="line-clamp-1 flex gap-2 font-medium">${m.summary} ${m.trend('size-4')}</div>
+            <div class="text-muted-foreground">${m.detail}</div>
+          </div>
+        </div>
+      `)}
+    </div>
+  `;
+}

package/packages/registry/blocks/dashboard-01/components/site-header.ts

@@ -0,0 +1,52 @@
+/**
+ * The dashboard-01 site header: the sidebar trigger and the page title, at
+ * the height the page sets through `--header-height`. A fragment helper.
+ * Ported from shadcn/ui's dashboard-01.
+ *
+ * Options: `title`, `trigger: false` for a sidebar that does not collapse,
+ * `quickCreate` for a "Quick Create" button at the end (`quickCreateIcon` its
+ * icon), and `sticky` to pin the header over the scrolling page, as shadcn's
+ * examples/dashboard does. The button is a placeholder for your create flow.
+ * `github` is the ghost link at the end, shadcn's "GitHub" button pointing at
+ * this block's source: point it at your own repository, or pass `false` to
+ * leave it out.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import type { TemplateResult } from '@webjsdev/core';
+import { buttonClass } from '../../../components/button.ts';
+import { separatorClass } from '../../../components/separator.ts';
+import { CirclePlusIcon } from '../../../lib/icons.ts';
+import '../../../components/sidebar.ts';
+
+export interface SiteHeaderOptions {
+  title?: string;
+  trigger?: boolean;
+  quickCreate?: boolean;
+  quickCreateIcon?: TemplateResult;
+  sticky?: boolean;
+  github?: string | false;
+}
+
+const GITHUB = 'https://github.com/webjsdev/webjs/tree/main/packages/ui/packages/registry/blocks/dashboard-01';
+
+export function siteHeader(opts: SiteHeaderOptions = {}) {
+  const trigger = opts.trigger ?? true;
+  const github = opts.github ?? GITHUB;
+  return html`
+    <header class=${cn('flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)', opts.sticky && 'sticky top-0 z-10 bg-background/90')}>
+      <div class="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        ${trigger ? html`<ui-sidebar-trigger class="-ml-1"></ui-sidebar-trigger>
+        <div role="none" data-slot="separator" data-orientation="vertical" class=${cn(separatorClass(), 'mx-2 data-[orientation=vertical]:h-4')}></div>` : ''}
+        <h1 class="text-base font-medium">${opts.title ?? 'Documents'}</h1>
+        ${opts.quickCreate || github ? html`<div class="ml-auto flex items-center gap-2">
+          ${opts.quickCreate ? html`<button type="button" data-slot="button" data-variant="default" data-size="sm" class=${cn(buttonClass({ size: 'sm' }), 'hidden h-7 sm:flex')}>
+            ${opts.quickCreateIcon ?? CirclePlusIcon()}
+            <span>Quick Create</span>
+          </button>` : ''}
+          ${github ? html`<a href=${github} rel="noopener noreferrer" target="_blank" data-slot="button" data-variant="ghost" data-size="sm" class=${cn(buttonClass({ variant: 'ghost', size: 'sm' }), 'hidden no-underline sm:flex dark:text-foreground')}>GitHub</a>` : ''}
+        </div>` : ''}
+      </div>
+    </header>
+  `;
+}

package/packages/registry/blocks/dashboard-01/page.ts

@@ -0,0 +1,39 @@
+/**
+ * The dashboard-01 block's page: an inset sidebar beside a header, four
+ * metric cards, an interactive area chart and a data table.
+ *
+ * Installed by `npx @webjsdev/ui add dashboard-01` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely: replace `dashboardData` with
+ * rows from your own query. Ported from shadcn/ui's dashboard-01.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import '../../components/sidebar.ts';
+import { appSidebar } from './components/app-sidebar.ts';
+import { chartAreaInteractive } from './components/chart-area-interactive.ts';
+import { dashboardData } from './components/dashboard-data.ts';
+import { dataTable } from './components/data-table.ts';
+import { sectionCards } from './components/section-cards.ts';
+import { siteHeader } from './components/site-header.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider class="[--header-height:calc(var(--spacing)*12)]">
+      ${appSidebar({ variant: 'inset' })}
+      <ui-sidebar-inset>
+        ${siteHeader()}
+        <div class="flex flex-1 flex-col">
+          <div class="@container/main flex flex-1 flex-col gap-2">
+            <div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+              ${sectionCards()}
+              <div class="px-4 lg:px-6">${chartAreaInteractive()}</div>
+              ${dataTable({ data: dashboardData })}
+            </div>
+          </div>
+        </div>
+      </ui-sidebar-inset>
+    </ui-sidebar-provider>
+  `;
+}

package/packages/registry/blocks/login-01/components/login-form.ts

@@ -0,0 +1,70 @@
+/**
+ * The login-01 form: a card with an email and password form, a
+ * forgot-password link, and a Google button. A fragment helper (a function
+ * returning an `html` template), so it renders on the server and ships no
+ * JavaScript. Ported from shadcn/ui's login-01.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${signIn}>`) before you ship it: the
+ * framework then supplies `method="post"`, and the no-JS post, the 422
+ * re-render with `fieldErrors` / `values`, and the 303 redirect all work.
+ * Until it is bound, the form submits as a GET back to the page with the
+ * typed values in the URL. The Google button is a placeholder for your
+ * provider's sign-in link.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import {
+  fieldClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+} from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+
+export function loginForm(opts: { class?: string } = {}) {
+  return html`
+    <div class=${cn('flex flex-col gap-6', opts.class)}>
+      <div class=${cardClass()} data-slot="card" data-size="default">
+        <div class=${cardHeaderClass()} data-slot="card-header">
+          <h1 class=${cardTitleClass()} data-slot="card-title">Login to your account</h1>
+          <p class=${cardDescriptionClass()} data-slot="card-description">
+            Enter your email below to login to your account
+          </p>
+        </div>
+        <div class=${cardContentClass()} data-slot="card-content">
+          <form>
+            <div class=${fieldGroupClass()} data-slot="field-group">
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <label class=${fieldLabelClass()} data-slot="field-label" for="email">Email</label>
+                <input class=${inputClass()} data-slot="input" id="email" name="email" type="email" autocomplete="email" placeholder="m@example.com" required>
+              </div>
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <div class="flex items-center">
+                  <label class=${fieldLabelClass()} data-slot="field-label" for="password">Password</label>
+                  <a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">Forgot your password?</a>
+                </div>
+                <input class=${inputClass()} data-slot="input" id="password" name="password" type="password" autocomplete="current-password" required>
+              </div>
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <button class=${buttonClass()} data-slot="button" type="submit">Login</button>
+                <button class=${buttonClass({ variant: 'outline' })} data-slot="button" type="button">Login with Google</button>
+                <p class=${cn(fieldDescriptionClass(), 'text-center')} data-slot="field-description">
+                  Don't have an account? <a href="/signup">Sign up</a>
+                </p>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/login-01/page.ts

@@ -0,0 +1,19 @@
+/**
+ * The login-01 block's page: a simple login form, centred on the page.
+ *
+ * Installed by `npx @webjsdev/ui add login-01` at `app/login/page.ts`. It is
+ * app code you own, so edit it freely. Ported from shadcn/ui's login-01.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { loginForm } from './components/login-form.ts';
+
+export const metadata: Metadata = { title: 'Login' };
+
+export default function LoginPage() {
+  return html`
+    <div class="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div class="w-full max-w-sm">${loginForm()}</div>
+    </div>
+  `;
+}

package/packages/registry/blocks/login-02/components/login-form.ts

@@ -0,0 +1,68 @@
+/**
+ * The login-02 form: a heading, an email and password form, and a GitHub
+ * button under an "Or continue with" separator, laid straight on the page
+ * with no card. A fragment helper (a function returning an `html` template),
+ * so it renders on the server and ships no JavaScript. Ported from
+ * shadcn/ui's login-02.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${signIn}>`) before you ship it: the
+ * framework then supplies `method="post"`, and the no-JS post, the 422
+ * re-render with `fieldErrors` / `values`, and the 303 redirect all work.
+ * Until it is bound, the form submits as a GET back to the page with the
+ * typed values in the URL. The GitHub button is a placeholder for your
+ * provider's sign-in link.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  fieldClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+  fieldSeparatorClass,
+  fieldSeparatorContentClass,
+} from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+
+const GITHUB = 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12';
+
+export function loginForm(opts: { class?: string } = {}) {
+  return html`
+    <form class=${cn('flex flex-col gap-6', opts.class)}>
+      <div class=${fieldGroupClass()} data-slot="field-group">
+        <div class="flex flex-col items-center gap-1 text-center">
+          <h1 class="text-2xl font-bold">Login to your account</h1>
+          <p class="text-sm text-balance text-muted-foreground">Enter your email below to login to your account</p>
+        </div>
+        <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+          <label class=${fieldLabelClass()} data-slot="field-label" for="email">Email</label>
+          <input class=${cn(inputClass(), 'bg-background')} data-slot="input" id="email" name="email" type="email" autocomplete="email" placeholder="m@example.com" required>
+        </div>
+        <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+          <div class="flex items-center">
+            <label class=${fieldLabelClass()} data-slot="field-label" for="password">Password</label>
+            <a href="#" class="ml-auto text-sm underline-offset-4 hover:underline">Forgot your password?</a>
+          </div>
+          <input class=${cn(inputClass(), 'bg-background')} data-slot="input" id="password" name="password" type="password" autocomplete="current-password" required>
+        </div>
+        <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+          <button class=${buttonClass()} data-slot="button" type="submit">Login</button>
+        </div>
+        <div class=${fieldSeparatorClass()} data-slot="field-separator" role="none">
+          <span class=${fieldSeparatorContentClass()} data-slot="field-separator-content">Or continue with</span>
+        </div>
+        <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+          <button class=${buttonClass({ variant: 'outline' })} data-slot="button" type="button">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d=${GITHUB} fill="currentColor"></path></svg>
+            Login with GitHub
+          </button>
+          <p class=${cn(fieldDescriptionClass(), 'text-center')} data-slot="field-description">
+            Don't have an account? <a href="/signup" class="underline underline-offset-4">Sign up</a>
+          </p>
+        </div>
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/login-02/page.ts

@@ -0,0 +1,36 @@
+/**
+ * The login-02 block's page: a two column login page, the form on one side
+ * and a cover image on the other (hidden below `lg`).
+ *
+ * Installed by `npx @webjsdev/ui add login-02` at `app/login/page.ts`, with
+ * the cover at `public/placeholder.svg`. Swap in your own image and brand.
+ * Ported from shadcn/ui's login-02.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { loginForm } from './components/login-form.ts';
+
+export const metadata: Metadata = { title: 'Login' };
+
+export default function LoginPage() {
+  return html`
+    <div class="grid min-h-svh lg:grid-cols-2">
+      <div class="flex flex-col gap-4 p-6 md:p-10">
+        <div class="flex justify-center gap-2 md:justify-start">
+          <a href="/" class="flex items-center gap-2 font-medium">
+            <div class="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M7 2h10"></path><path d="M5 6h14"></path><rect width="18" height="12" x="3" y="10" rx="2"></rect></svg>
+            </div>
+            Acme Inc.
+          </a>
+        </div>
+        <div class="flex flex-1 items-center justify-center">
+          <div class="w-full max-w-xs">${loginForm()}</div>
+        </div>
+      </div>
+      <div class="relative hidden bg-muted lg:block">
+        <img src="/public/placeholder.svg" alt="" class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale">
+      </div>
+    </div>
+  `;
+}