@webjsdev/ui 0.3.16 → 0.4.0

package/packages/registry/blocks/preview/cards/book-appointment.ts

@@ -0,0 +1,51 @@
+/**
+ * The preview block's appointment card: the day's time slots as a toggle
+ * group, a note for new patients, and a booking button. A fragment helper;
+ * the slots are the kit's `<ui-toggle-group>`. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/book-appointment.ts`.
+ * Ported from shadcn/ui's preview block.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { alertClass, alertDescriptionClass, alertTitleClass } from '../../../components/alert.ts';
+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 '../../../components/toggle-group.ts';
+
+const SLOTS = ['9:00 AM', '10:30 AM', '11:00 AM', '1:30 PM'];
+
+export function bookAppointment() {
+  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()}>Book Appointment</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Dr. Sarah Chen · Cardiology</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4')}>
+        <div data-slot="field-group" class=${fieldGroupClass()}>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+            <div data-slot="field-label" id="book-appointment-slots" class=${fieldLabelClass()}>Available on March 18, 2026</div>
+            <ui-toggle-group type="multiple" spacing="2" value="slot-0" aria-labelledby="book-appointment-slots">
+              ${SLOTS.map((time, index) => html`<ui-toggle-group-item value=${`slot-${index}`}>${time}</ui-toggle-group-item>`)}
+            </ui-toggle-group>
+          </div>
+        </div>
+        <div role="alert" data-slot="alert" data-variant="default" class=${alertClass()}>
+          <div data-slot="alert-title" class=${alertTitleClass()}>New patient?</div>
+          <div data-slot="alert-description" class=${alertDescriptionClass()}>Please arrive 15 minutes early.</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')}>Book Appointment</button>
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,172 @@
+/**
+ * The preview block's codespaces card, after GitHub's "Code" menu: a
+ * Codespaces tab with an empty state and a Local tab with the clone URLs.
+ * A fragment helper, rendered by the server, with the kit's `<ui-tabs>`,
+ * `<ui-tooltip>` and `<ui-dropdown-menu>`. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/codespaces-card.ts`.
+ * Ported from shadcn/ui's preview block.
+ *
+ * shadcn shows a spinner on "Create Codespace" for two seconds after a click.
+ * Here the button is shown at rest; give it a server action to run.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import { cardClass, cardContentClass } from '../../../components/card.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  emptyClass,
+  emptyContentClass,
+  emptyDescriptionClass,
+  emptyHeaderClass,
+  emptyMediaClass,
+  emptyTitleClass,
+} from '../../../components/empty.ts';
+import { fieldClass, fieldDescriptionClass, fieldLabelClass } from '../../../components/field.ts';
+import {
+  inputGroupAddonClass,
+  inputGroupButtonClass,
+  inputGroupClass,
+  inputGroupInputClass,
+} from '../../../components/input-group.ts';
+import {
+  itemActionsClass,
+  itemClass,
+  itemContentClass,
+  itemDescriptionClass,
+  itemTitleClass,
+} from '../../../components/item.ts';
+import { separatorClass } from '../../../components/separator.ts';
+import '../../../components/tabs.ts';
+import '../../../components/tooltip.ts';
+import { ContainerIcon, CopyIcon, DownloadIcon, InfoIcon, MonitorIcon, MoreHorizontalIcon, PlusIcon, ServerIcon, ShareIcon, TerminalIcon, ZapIcon } from '../../../lib/icons.ts';
+
+const separator = () => html`<div data-slot="separator" data-orientation="horizontal" role="none" class=${cn(separatorClass(), '-mx-2 my-2 w-auto!')}></div>`;
+
+const CLONE_URLS = [
+  { value: 'https', id: 'codespaces-https-url', label: 'HTTPS URL', url: 'https://github.com/shadcn-ui/ui.git', hint: html`Clone using the web URL.` },
+  { value: 'ssh', id: 'codespaces-ssh-url', label: 'SSH URL', url: 'git@github.com:webjsdev/webjs.git', hint: html`Use a password-protected SSH key.` },
+  { value: 'cli', id: 'codespaces-cli-command', label: 'CLI Command', url: 'gh repo clone webjsdev/webjs', hint: html`Work fast with our official CLI. <a href="#learn-more">Learn more</a>` },
+];
+
+export function codespacesCard() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <ui-tabs value="codespaces">
+          <ui-tabs-list class="w-full">
+            <ui-tabs-trigger value="codespaces">Codespaces</ui-tabs-trigger>
+            <ui-tabs-trigger value="local">Local</ui-tabs-trigger>
+          </ui-tabs-list>
+          <ui-tabs-content value="codespaces">
+            <div data-slot="item" data-variant="default" data-size="sm" class=${cn(itemClass({ size: 'sm' }), 'px-1 pt-2')}>
+              <div data-slot="item-content" class=${itemContentClass()}>
+                <div data-slot="item-title" class=${itemTitleClass()}>Codespaces</div>
+                <p data-slot="item-description" class=${itemDescriptionClass()}>Your workspaces in the cloud</p>
+              </div>
+              <div data-slot="item-actions" class=${itemActionsClass()}>
+                <ui-tooltip>
+                  <ui-tooltip-trigger>
+                    <button type="button" aria-label="Create a codespace on main" data-slot="button" data-variant="ghost" data-size="icon-sm" class=${buttonClass({ variant: 'ghost', size: 'icon-sm' })}>
+                      ${PlusIcon()}
+                    </button>
+                  </ui-tooltip-trigger>
+                  <ui-tooltip-content side="bottom">Create a codespace on main</ui-tooltip-content>
+                </ui-tooltip>
+                <ui-dropdown-menu>
+                  <ui-dropdown-menu-trigger>
+                    <button type="button" aria-label="Codespace options" data-slot="button" data-variant="ghost" data-size="icon-sm" class=${buttonClass({ variant: 'ghost', size: 'icon-sm' })}>
+                      ${MoreHorizontalIcon()}
+                    </button>
+                  </ui-dropdown-menu-trigger>
+                  <ui-dropdown-menu-content align="end" class="w-56">
+                    <ui-dropdown-menu-group>
+                      <ui-dropdown-menu-item>${PlusIcon()}New with options...</ui-dropdown-menu-item>
+                      <ui-dropdown-menu-item>${ContainerIcon()}Configure container</ui-dropdown-menu-item>
+                      <ui-dropdown-menu-item>${ZapIcon()}Set up prebuilds</ui-dropdown-menu-item>
+                    </ui-dropdown-menu-group>
+                    <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+                    <ui-dropdown-menu-group>
+                      <ui-dropdown-menu-item>${ServerIcon()}Manage codespaces</ui-dropdown-menu-item>
+                      <ui-dropdown-menu-item>${ShareIcon()}Share deep link</ui-dropdown-menu-item>
+                      <ui-dropdown-menu-item>${InfoIcon()}What are codespaces?</ui-dropdown-menu-item>
+                    </ui-dropdown-menu-group>
+                  </ui-dropdown-menu-content>
+                </ui-dropdown-menu>
+              </div>
+            </div>
+            ${separator()}
+            <div data-slot="empty" class=${cn(emptyClass(), 'p-4')}>
+              <div data-slot="empty-header" class=${emptyHeaderClass()}>
+                <div data-slot="empty-icon" data-variant="icon" class=${emptyMediaClass({ variant: 'icon' })}>${ServerIcon()}</div>
+                <div data-slot="empty-title" class=${emptyTitleClass()}>No codespaces</div>
+                <div data-slot="empty-description" class=${emptyDescriptionClass()}>
+                  You don't have any codespaces with this repository
+                  checked out
+                </div>
+              </div>
+              <div data-slot="empty-content" class=${emptyContentClass()}>
+                <button type="button" data-slot="button" data-variant="default" data-size="sm" class=${buttonClass({ size: 'sm' })}>Create Codespace</button>
+                <a href="#learn-more" class="text-xs text-muted-foreground underline underline-offset-4">Learn more about codespaces</a>
+              </div>
+            </div>
+            ${separator()}
+            <div class="p-1.5 text-xs text-muted-foreground">
+              Codespace usage for this repository is paid for by
+              <span class="font-medium">webjsdev</span>.
+            </div>
+          </ui-tabs-content>
+          <ui-tabs-content value="local">
+            <div data-slot="item" data-variant="default" data-size="sm" class=${cn(itemClass({ size: 'sm' }), 'hidden p-0')}>
+              <div data-slot="item-content" class=${itemContentClass()}>
+                <div data-slot="item-title" class=${cn(itemTitleClass(), 'gap-2')}>${TerminalIcon('size-4')}Clone</div>
+              </div>
+              <div data-slot="item-actions" class=${itemActionsClass()}>
+                <ui-tooltip>
+                  <ui-tooltip-trigger>
+                    <button type="button" aria-label="Which remote URL should I use?" data-slot="button" data-variant="ghost" data-size="icon" class=${buttonClass({ variant: 'ghost', size: 'icon' })}>
+                      ${InfoIcon()}
+                    </button>
+                  </ui-tooltip-trigger>
+                  <ui-tooltip-content side="left">Which remote URL should I use?</ui-tooltip-content>
+                </ui-tooltip>
+              </div>
+            </div>
+            <ui-tabs value="https">
+              <ui-tabs-list variant="underline" class="w-full justify-start border-b **:[button]:flex-0">
+                <ui-tabs-trigger value="https">HTTPS</ui-tabs-trigger>
+                <ui-tabs-trigger value="ssh">SSH</ui-tabs-trigger>
+                <ui-tabs-trigger value="cli">GitHub CLI</ui-tabs-trigger>
+              </ui-tabs-list>
+              <div class="rounded-md border bg-muted/30 p-2">
+                ${CLONE_URLS.map((c) => html`
+                  <ui-tabs-content value=${c.value}>
+                    <div role="group" data-slot="field" data-orientation="vertical" class=${cn(fieldClass(), 'gap-2')}>
+                      <label data-slot="field-label" for=${c.id} class=${cn(fieldLabelClass(), 'sr-only')}>${c.label}</label>
+                      <div data-slot="input-group" role="group" class=${inputGroupClass()}>
+                        <div data-slot="input-group-addon" data-align="inline-end" role="group" class=${inputGroupAddonClass({ align: 'inline-end' })}>
+                          <button type="button" aria-label="Copy" data-slot="button" data-variant="ghost" data-size="icon-xs" class=${inputGroupButtonClass({ size: 'icon-xs' })}>${CopyIcon()}</button>
+                        </div>
+                        <input data-slot="input-group-control" id=${c.id} value=${c.url} readonly class=${inputGroupInputClass()}>
+                      </div>
+                      <p data-slot="field-description" class=${fieldDescriptionClass()}>${c.hint}</p>
+                    </div>
+                  </ui-tabs-content>
+                `)}
+              </div>
+            </ui-tabs>
+            ${separator()}
+            <div class="flex flex-col">
+              <button type="button" data-slot="button" data-variant="ghost" data-size="sm" class=${cn(buttonClass({ variant: 'ghost', size: 'sm' }), 'justify-start gap-1.5')}>
+                ${MonitorIcon()}Open with GitHub Desktop
+              </button>
+              <button type="button" data-slot="button" data-variant="ghost" data-size="sm" class=${cn(buttonClass({ variant: 'ghost', size: 'sm' }), 'justify-start gap-1.5')}>
+                ${DownloadIcon()}Download ZIP
+              </button>
+            </div>
+          </ui-tabs-content>
+        </ui-tabs>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/contributions-activity.ts

@@ -0,0 +1,63 @@
+/**
+ * The preview block's contributions and activity card: one privacy setting as
+ * a checkbox with its description. A fragment helper, rendered by the server.
+ * Installed by `npx @webjsdev/ui add preview` at
+ * `components/preview/contributions-activity.ts`. Ported from shadcn/ui's
+ * preview block.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${saveActivity}>`) before you ship it.
+ */
+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';
+import { checkboxClass } from '../../../components/checkbox.ts';
+import {
+  fieldClass,
+  fieldContentClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+  fieldLegendClass,
+  fieldSetClass,
+} from '../../../components/field.ts';
+
+export function contributionsActivity() {
+  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()}>Contributions &amp; Activity</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Manage your contributions and activity visibility.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <form id="contributions-activity">
+          <div data-slot="field-group" class=${fieldGroupClass()}>
+            <fieldset data-slot="field-set" class=${fieldSetClass()}>
+              <legend data-slot="field-legend" data-variant="legend" class=${cn(fieldLegendClass(), 'sr-only')}>Contributions &amp; activity</legend>
+              <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" id="activity-private-profile" name="private-profile" aria-describedby="activity-private-profile-description" class=${checkboxClass()}>
+                  <div data-slot="field-content" class=${fieldContentClass()}>
+                    <label data-slot="field-label" for="activity-private-profile" class=${fieldLabelClass()}>Make profile private and hide activity</label>
+                    <p data-slot="field-description" id="activity-private-profile-description" class=${fieldDescriptionClass()}>Enabling this will hide your contributions and activity from your GitHub profile and from social features like followers, stars, feeds, leaderboards and releases.</p>
+                  </div>
+                </div>
+              </div>
+            </fieldset>
+          </div>
+        </form>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="submit" form="contributions-activity" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'style-sera:w-full')}>Save Changes</button>
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,51 @@
+/**
+ * The preview block's contributors card: a count badge over a wall of
+ * contributor avatars, and a link to the rest. A fragment helper, rendered by
+ * the server. Installed by `npx @webjsdev/ui add preview` at
+ * `components/preview/contributors.ts`. Ported from shadcn/ui's preview block.
+ *
+ * The avatars are GitHub profile pictures by username. Replace the list with
+ * your own contributors.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { avatarClass, avatarFallbackClass, avatarImageClass } from '../../../components/avatar.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+
+// GitHub usernames shown as contributor avatars.
+const USERNAMES = [
+  'webjsdev', 'vercel', 'nextjs', 'tailwindlabs', 'typescript-lang', 'eslint', 'prettier', 'babel',
+  'webpack', 'rollup', 'parcel', 'vite', 'react', 'vue', 'angular', 'solid',
+];
+
+export function contributors() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cn(cardClass(), 'max-w-sm')}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>
+          Contributors <span data-slot="badge" data-variant="secondary" class=${badgeClass({ variant: 'secondary' })}>312</span>
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div class="flex flex-wrap gap-2">
+          ${USERNAMES.map((username) => html`
+            <span data-slot="avatar" data-size="default" class=${cn(avatarClass(), 'grayscale')}>
+              <span data-slot="avatar-fallback" class=${avatarFallbackClass()}>${username.charAt(0)}</span>
+              <img data-slot="avatar-image" src=${`https://github.com/${username}.png`} alt=${username} class=${avatarImageClass()}>
+            </span>
+          `)}
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <a href="#" class="text-sm underline underline-offset-4">+ 810 contributors</a>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/environment-variables.ts

@@ -0,0 +1,47 @@
+/**
+ * The preview block's environment variables card: three variables with their
+ * values masked or shown, and edit and deploy buttons. A fragment helper,
+ * rendered by the server. Installed by `npx @webjsdev/ui add preview` at
+ * `components/preview/environment-variables.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 VARIABLES = [
+  { key: 'DATABASE_URL', masked: true },
+  { key: 'NEXT_PUBLIC_API', masked: false },
+  { key: 'STRIPE_SECRET', masked: true },
+];
+
+export function environmentVariables() {
+  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()}>Environment Variables</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Production · 8 variables</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-2')}>
+        ${VARIABLES.map((env) => html`
+          <div class="flex items-center gap-2 rounded-md px-2.5 py-2 font-mono text-xs ring ring-border">
+            <span class="font-medium">${env.key}</span>
+            <span class="ml-auto text-muted-foreground">${env.masked ? '••••••••' : 'https://api.example.com'}</span>
+          </div>
+        `)}
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="button" data-slot="button" data-variant="outline" data-size="default" class=${buttonClass({ variant: 'outline' })}>Edit</button>
+        <button type="button" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'ml-auto')}>Deploy</button>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/feedback-form.ts

@@ -0,0 +1,61 @@
+/**
+ * The preview block's feedback form card: a topic picker and a feedback field.
+ * A fragment helper, rendered by the server. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/feedback-form.ts`.
+ * Ported from shadcn/ui's preview block.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${sendFeedback}>`) before you ship it.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import { cardClass, cardContentClass, cardFooterClass } from '../../../components/card.ts';
+import { fieldClass, fieldGroupClass, fieldLabelClass } from '../../../components/field.ts';
+import { nativeSelectClass, nativeSelectIconClass, nativeSelectWrapperClass } from '../../../components/native-select.ts';
+import { textareaClass } from '../../../components/textarea.ts';
+import { ChevronDownIcon } from '../../../lib/icons.ts';
+
+const TOPICS = [
+  ['', 'Select a topic'],
+  ['ai', 'AI'],
+  ['accounts-and-access-controls', 'Accounts and Access Controls'],
+  ['billing', 'Billing'],
+  ['cdn', 'CDN (Firewall, Caching)'],
+  ['ci-cd', 'CI/CD (Builds, Deployments, Environment Variables)'],
+  ['dashboard-interface', 'Dashboard Interface (Navigation, UI Issues)'],
+  ['domains', 'Domains'],
+  ['frameworks', 'Frameworks'],
+  ['marketplace-and-integrations', 'Marketplace and Integrations'],
+  ['observability', 'Observability (Observability, Logs, Monitoring)'],
+  ['storage', 'Storage'],
+];
+
+export function feedbackForm() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <form id="feedback-form">
+          <div data-slot="field-group" class=${fieldGroupClass()}>
+            <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+              <label data-slot="field-label" for="feedback-form-topic" class=${fieldLabelClass()}>Topic</label>
+              <div data-slot="native-select-wrapper" class=${nativeSelectWrapperClass()}>
+                <select data-slot="native-select" id="feedback-form-topic" name="topic" class=${nativeSelectClass()}>
+                  ${TOPICS.map(([value, label]) => html`<option value=${value}>${label}</option>`)}
+                </select>
+                ${ChevronDownIcon(nativeSelectIconClass())}
+              </div>
+            </div>
+            <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+              <label data-slot="field-label" for="feedback-form-feedback" class=${fieldLabelClass()}>Feedback</label>
+              <textarea data-slot="textarea" id="feedback-form-feedback" name="feedback" placeholder="Your feedback helps us improve..." class=${textareaClass()}></textarea>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="submit" form="feedback-form" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'style-sera:w-full')}>Submit</button>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/file-upload.ts

@@ -0,0 +1,51 @@
+/**
+ * The preview block's file upload card: an empty state inviting a drop or a
+ * browse. A fragment helper, rendered by the server. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/file-upload.ts`.
+ * Ported from shadcn/ui's preview block.
+ *
+ * "Browse Files" is a placeholder: make it a `<label>` for an
+ * `<input type="file">` inside a form bound to your upload action.
+ */
+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 {
+  emptyClass,
+  emptyContentClass,
+  emptyDescriptionClass,
+  emptyHeaderClass,
+  emptyMediaClass,
+  emptyTitleClass,
+} from '../../../components/empty.ts';
+import { UploadCloudIcon } from '../../../lib/icons.ts';
+
+export function fileUpload() {
+  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()}>File Upload</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Drag and drop or browse</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="empty" class=${cn(emptyClass(), 'border')}>
+          <div data-slot="empty-header" class=${emptyHeaderClass()}>
+            <div data-slot="empty-icon" data-variant="icon" class=${emptyMediaClass({ variant: 'icon' })}>${UploadCloudIcon()}</div>
+            <div data-slot="empty-title" class=${emptyTitleClass()}>Upload files</div>
+            <div data-slot="empty-description" class=${emptyDescriptionClass()}>PNG, JPG, PDF up to 10MB</div>
+          </div>
+          <div data-slot="empty-content" class=${emptyContentClass()}>
+            <button type="button" data-slot="button" data-variant="default" data-size="default" class=${buttonClass()}>Browse Files</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/github-profile.ts

@@ -0,0 +1,66 @@
+/**
+ * The preview block's profile card: a name, a public email and a bio. A
+ * fragment helper, rendered by the server. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/github-profile.ts`.
+ * Ported from shadcn/ui's preview block.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${saveProfile}>`) before you ship it.
+ */
+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';
+import { fieldClass, fieldDescriptionClass, fieldGroupClass, fieldLabelClass } from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+import { nativeSelectClass, nativeSelectIconClass, nativeSelectWrapperClass } from '../../../components/native-select.ts';
+import { textareaClass } from '../../../components/textarea.ts';
+import { ChevronDownIcon } from '../../../lib/icons.ts';
+
+export function githubProfile() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cn(cardClass(), 'mx-auto w-full max-w-md')}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Profile</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Manage your profile information.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <form id="profile">
+          <div data-slot="field-group" class=${fieldGroupClass()}>
+            <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+              <label data-slot="field-label" for="profile-name" class=${fieldLabelClass()}>Name</label>
+              <input data-slot="input" id="profile-name" name="name" placeholder="vivek" class=${inputClass()}>
+              <p data-slot="field-description" class=${fieldDescriptionClass()}>Your name may appear around GitHub where you contribute or are mentioned. You can remove it at any time.</p>
+            </div>
+            <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+              <label data-slot="field-label" for="profile-email" class=${fieldLabelClass()}>Public Email</label>
+              <div data-slot="native-select-wrapper" class=${nativeSelectWrapperClass()}>
+                <select data-slot="native-select" id="profile-email" name="email" class=${nativeSelectClass()}>
+                  <option value="vivek@example.com">vivek@example.com</option>
+                  <option value="m@gmail.com">m@gmail.com</option>
+                </select>
+                ${ChevronDownIcon(nativeSelectIconClass())}
+              </div>
+              <p data-slot="field-description" class=${fieldDescriptionClass()}>You can manage verified email addresses in your <a href="#email-settings">email settings</a>.</p>
+            </div>
+            <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+              <label data-slot="field-label" for="profile-bio" class=${fieldLabelClass()}>Bio</label>
+              <textarea data-slot="textarea" id="profile-bio" name="bio" placeholder="Tell us a little bit about yourself" class=${textareaClass()}></textarea>
+              <p data-slot="field-description" class=${fieldDescriptionClass()}>You can <span>@mention</span> other users and organizations to link to them.</p>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="submit" form="profile" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'style-sera:w-full')}>Save Profile</button>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/icon-preview-grid.ts

@@ -0,0 +1,47 @@
+/**
+ * The preview block's icon grid card: sixteen common interface icons, each
+ * in a bordered tile. A fragment helper, rendered by the server. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/icon-preview-grid.ts`.
+ * Ported from shadcn/ui's preview block.
+ *
+ * shadcn draws each icon from the icon library the configurator picks. These
+ * are the Lucide ones, inline; swap the SVGs for another set's.
+ */
+import { html } from '@webjsdev/core';
+import { cardClass, cardContentClass } from '../../../components/card.ts';
+
+// copy, circle-alert, trash, share, shopping-bag, more-horizontal, loader-2,
+// plus, minus, arrow-left, arrow-right, check, chevron-down, chevron-right,
+// search, settings.
+const PREVIEW_ICONS = [
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v13"></path><path d="m16 6-4-4-4 4"></path><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>`,
+  () => html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>`,
+];
+
+export function iconPreviewGrid() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div class="grid grid-cols-8 place-items-center gap-4">
+          ${PREVIEW_ICONS.map((icon) => html`
+            <div class="flex size-8 items-center justify-center rounded-md ring ring-border style-sera:rounded-none *:[svg]:size-4">${icon()}</div>
+          `)}
+        </div>
+      </div>
+    </div>
+  `;
+}