@webjsdev/ui 0.3.17 → 0.4.0

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

@@ -0,0 +1,78 @@
+/**
+ * The signup-02 form: a heading, the name, email, password and confirmation
+ * fields with their helper text, 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 signup-02.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${signUp}>`) 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-up 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 signupForm(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">Create your account</h1>
+          <p class="text-sm text-balance text-muted-foreground">Fill in the form below to create your account</p>
+        </div>
+        <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+          <label class=${fieldLabelClass()} data-slot="field-label" for="name">Full Name</label>
+          <input class=${cn(inputClass(), 'bg-background')} data-slot="input" id="name" name="name" type="text" autocomplete="name" placeholder="John Doe" required>
+        </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" aria-describedby="email-description" required>
+          <p class=${fieldDescriptionClass()} data-slot="field-description" id="email-description">
+            We'll use this to contact you. We will not share your email with anyone else.
+          </p>
+        </div>
+        <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+          <label class=${fieldLabelClass()} data-slot="field-label" for="password">Password</label>
+          <input class=${cn(inputClass(), 'bg-background')} data-slot="input" id="password" name="password" type="password" autocomplete="new-password" minlength="8" aria-describedby="password-description" required>
+          <p class=${fieldDescriptionClass()} data-slot="field-description" id="password-description">Must be at least 8 characters long.</p>
+        </div>
+        <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+          <label class=${fieldLabelClass()} data-slot="field-label" for="confirm-password">Confirm Password</label>
+          <input class=${cn(inputClass(), 'bg-background')} data-slot="input" id="confirm-password" name="confirmPassword" type="password" autocomplete="new-password" aria-describedby="confirm-password-description" required>
+          <p class=${fieldDescriptionClass()} data-slot="field-description" id="confirm-password-description">Please confirm your password.</p>
+        </div>
+        <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+          <button class=${buttonClass()} data-slot="button" type="submit">Create Account</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>
+            Sign up with GitHub
+          </button>
+          <p class=${cn(fieldDescriptionClass(), 'px-6 text-center')} data-slot="field-description">
+            Already have an account? <a href="/login">Sign in</a>
+          </p>
+        </div>
+      </div>
+    </form>
+  `;
+}

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

@@ -0,0 +1,36 @@
+/**
+ * The signup-02 block's page: a two column signup page, the form on one side
+ * and a cover image on the other (hidden below `lg`).
+ *
+ * Installed by `npx @webjsdev/ui add signup-02` at `app/signup/page.ts`,
+ * with the cover at `public/placeholder.svg`. Swap in your own image and
+ * brand. Ported from shadcn/ui's signup-02.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { signupForm } from './components/signup-form.ts';
+
+export const metadata: Metadata = { title: 'Sign up' };
+
+export default function SignupPage() {
+  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">${signupForm()}</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>
+  `;
+}

package/packages/registry/blocks/signup-03/components/signup-form.ts

@@ -0,0 +1,79 @@
+/**
+ * The signup-03 form: a centred card asking for a name, an email, and a
+ * password beside its confirmation, and the terms line under the 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 signup-03.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${signUp}>`) 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.
+ */
+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 signupForm(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=${cn(cardHeaderClass(), 'text-center')} data-slot="card-header">
+          <h1 class=${cn(cardTitleClass(), 'text-xl')} data-slot="card-title">Create your account</h1>
+          <p class=${cardDescriptionClass()} data-slot="card-description">Enter your email below to create 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="name">Full Name</label>
+                <input class=${inputClass()} data-slot="input" id="name" name="name" type="text" autocomplete="name" placeholder="John Doe" required>
+              </div>
+              <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=${cn(fieldClass(), 'grid grid-cols-2 gap-4')} data-slot="field" data-orientation="vertical">
+                  <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                    <label class=${fieldLabelClass()} data-slot="field-label" for="password">Password</label>
+                    <input class=${inputClass()} data-slot="input" id="password" name="password" type="password" autocomplete="new-password" minlength="8" aria-describedby="password-description" required>
+                  </div>
+                  <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                    <label class=${fieldLabelClass()} data-slot="field-label" for="confirm-password">Confirm Password</label>
+                    <input class=${inputClass()} data-slot="input" id="confirm-password" name="confirmPassword" type="password" autocomplete="new-password" required>
+                  </div>
+                </div>
+                <p class=${fieldDescriptionClass()} data-slot="field-description" id="password-description">Must be at least 8 characters long.</p>
+              </div>
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <button class=${buttonClass()} data-slot="button" type="submit">Create Account</button>
+                <p class=${cn(fieldDescriptionClass(), 'text-center')} data-slot="field-description">
+                  Already have an account? <a href="/login">Sign in</a>
+                </p>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+      <p class=${cn(fieldDescriptionClass(), 'px-6 text-center')} data-slot="field-description">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+      </p>
+    </div>
+  `;
+}

package/packages/registry/blocks/signup-03/page.ts

@@ -0,0 +1,28 @@
+/**
+ * The signup-03 block's page: the brand above a signup card, on a muted
+ * background.
+ *
+ * Installed by `npx @webjsdev/ui add signup-03` at `app/signup/page.ts`.
+ * Ported from shadcn/ui's signup-03.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { signupForm } from './components/signup-form.ts';
+
+export const metadata: Metadata = { title: 'Sign up' };
+
+export default function SignupPage() {
+  return html`
+    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+      <div class="flex w-full max-w-sm flex-col gap-6">
+        <a href="/" class="flex items-center gap-2 self-center 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>
+        ${signupForm()}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/signup-04/components/signup-form.ts

@@ -0,0 +1,100 @@
+/**
+ * The signup-04 form: a two column card, the email and password form with
+ * icon-only Apple, Google and Meta buttons on one side and an image on the
+ * other (hidden below `md`), and the terms line under the 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 signup-04.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${signUp}>`) 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 provider buttons are placeholders for your
+ * providers' sign-up links.
+ */
+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 {
+  fieldClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+  fieldSeparatorClass,
+  fieldSeparatorContentClass,
+} from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+
+const APPLE = 'M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701';
+const GOOGLE = 'M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z';
+const META = 'M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z';
+
+export function signupForm(opts: { class?: string } = {}) {
+  return html`
+    <div class=${cn('flex flex-col gap-6', opts.class)}>
+      <div class=${cn(cardClass(), 'overflow-hidden p-0')} data-slot="card" data-size="default">
+        <div class=${cn(cardContentClass(), 'grid p-0 md:grid-cols-2')} data-slot="card-content">
+          <form class="p-6 md:p-8">
+            <div class=${fieldGroupClass()} data-slot="field-group">
+              <div class="flex flex-col items-center gap-2 text-center">
+                <h1 class="text-2xl font-bold">Create your account</h1>
+                <p class="text-sm text-balance text-muted-foreground">Enter your email below to create 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=${inputClass()} data-slot="input" id="email" name="email" type="email" autocomplete="email" placeholder="m@example.com" aria-describedby="email-description" required>
+                <p class=${fieldDescriptionClass()} data-slot="field-description" id="email-description">
+                  We'll use this to contact you. We will not share your email with anyone else.
+                </p>
+              </div>
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <div class=${cn(fieldClass(), 'grid grid-cols-2 gap-4')} data-slot="field" data-orientation="vertical">
+                  <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                    <label class=${fieldLabelClass()} data-slot="field-label" for="password">Password</label>
+                    <input class=${inputClass()} data-slot="input" id="password" name="password" type="password" autocomplete="new-password" minlength="8" aria-describedby="password-description" required>
+                  </div>
+                  <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                    <label class=${fieldLabelClass()} data-slot="field-label" for="confirm-password">Confirm Password</label>
+                    <input class=${inputClass()} data-slot="input" id="confirm-password" name="confirmPassword" type="password" autocomplete="new-password" required>
+                  </div>
+                </div>
+                <p class=${fieldDescriptionClass()} data-slot="field-description" id="password-description">Must be at least 8 characters long.</p>
+              </div>
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <button class=${buttonClass()} data-slot="button" type="submit">Create Account</button>
+              </div>
+              <div class=${cn(fieldSeparatorClass(), '*:data-[slot=field-separator-content]:bg-card')} data-slot="field-separator" role="none">
+                <span class=${fieldSeparatorContentClass()} data-slot="field-separator-content">Or continue with</span>
+              </div>
+              <div class=${cn(fieldClass(), 'grid grid-cols-3 gap-4')} 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=${APPLE} fill="currentColor"></path></svg>
+                  <span class="sr-only">Sign up with Apple</span>
+                </button>
+                <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=${GOOGLE} fill="currentColor"></path></svg>
+                  <span class="sr-only">Sign up with Google</span>
+                </button>
+                <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=${META} fill="currentColor"></path></svg>
+                  <span class="sr-only">Sign up with Meta</span>
+                </button>
+              </div>
+              <p class=${cn(fieldDescriptionClass(), 'text-center')} data-slot="field-description">
+                Already have an account? <a href="/login">Sign in</a>
+              </p>
+            </div>
+          </form>
+          <div class="relative hidden bg-muted md: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>
+      </div>
+      <p class=${cn(fieldDescriptionClass(), 'px-6 text-center')} data-slot="field-description">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+      </p>
+    </div>
+  `;
+}

package/packages/registry/blocks/signup-04/page.ts

@@ -0,0 +1,20 @@
+/**
+ * The signup-04 block's page: a wide signup card with the form beside an
+ * image, on a muted background.
+ *
+ * Installed by `npx @webjsdev/ui add signup-04` at `app/signup/page.ts`, with
+ * the image at `public/placeholder.svg`. Ported from shadcn/ui's signup-04.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { signupForm } from './components/signup-form.ts';
+
+export const metadata: Metadata = { title: 'Sign up' };
+
+export default function SignupPage() {
+  return html`
+    <div class="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+      <div class="w-full max-w-sm md:max-w-4xl">${signupForm()}</div>
+    </div>
+  `;
+}

package/packages/registry/blocks/signup-05/components/signup-form.ts

@@ -0,0 +1,75 @@
+/**
+ * The signup-05 form: the brand and a sign-in link above an email-only form,
+ * Apple and Google buttons under an "Or" separator, and the terms line. A
+ * fragment helper (a function returning an `html` template), so it renders
+ * on the server and ships no JavaScript. Ported from shadcn/ui's signup-05.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${signUp}>`) 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 email in the URL. The provider buttons are placeholders for your
+ * providers' sign-up links.
+ */
+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 APPLE = 'M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701';
+const GOOGLE = 'M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z';
+
+export function signupForm(opts: { class?: string } = {}) {
+  return html`
+    <div class=${cn('flex flex-col gap-6', opts.class)}>
+      <form>
+        <div class=${fieldGroupClass()} data-slot="field-group">
+          <div class="flex flex-col items-center gap-2 text-center">
+            <a href="/" class="flex flex-col items-center gap-2 font-medium">
+              <div class="flex size-8 items-center justify-center rounded-md">
+                <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-6" 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>
+              <span class="sr-only">Acme Inc.</span>
+            </a>
+            <h1 class="text-xl font-bold">Welcome to Acme Inc.</h1>
+            <p class=${fieldDescriptionClass()} data-slot="field-description">
+              Already have an account? <a href="/login">Sign in</a>
+            </p>
+          </div>
+          <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">
+            <button class=${buttonClass()} data-slot="button" type="submit">Create Account</button>
+          </div>
+          <div class=${fieldSeparatorClass()} data-slot="field-separator" role="none">
+            <span class=${fieldSeparatorContentClass()} data-slot="field-separator-content">Or</span>
+          </div>
+          <div class=${cn(fieldClass(), 'grid gap-4 sm:grid-cols-2')} 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=${APPLE} fill="currentColor"></path></svg>
+              Continue with Apple
+            </button>
+            <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=${GOOGLE} fill="currentColor"></path></svg>
+              Continue with Google
+            </button>
+          </div>
+        </div>
+      </form>
+      <p class=${cn(fieldDescriptionClass(), 'px-6 text-center')} data-slot="field-description">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+      </p>
+    </div>
+  `;
+}

package/packages/registry/blocks/signup-05/page.ts

@@ -0,0 +1,20 @@
+/**
+ * The signup-05 block's page: a simple signup form with social providers,
+ * centred on the page.
+ *
+ * Installed by `npx @webjsdev/ui add signup-05` at `app/signup/page.ts`.
+ * Ported from shadcn/ui's signup-05.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { signupForm } from './components/signup-form.ts';
+
+export const metadata: Metadata = { title: 'Sign up' };
+
+export default function SignupPage() {
+  return html`
+    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+      <div class="w-full max-w-sm">${signupForm()}</div>
+    </div>
+  `;
+}

package/packages/registry/components/accordion.ts

@@ -13,7 +13,8 @@
  *   <Accordion type="multiple">           → same, omit `name`
  *   <AccordionItem>                       → <details class=${accordionItemClass()}>
  *   <AccordionTrigger>                    → <summary class=${accordionTriggerClass()}>
- *   <AccordionContent>                    → <div class=${accordionContentClass()}>
+ *   <AccordionContent>                    → <div class=${accordionContentClass()}> around
+ *                                            <div class=${accordionContentInnerClass()}>
  *
  * Initial state: add `open` on the <details> that should render expanded
  * on first paint. Programmatic toggling: `el.open = true | false`.
@@ -50,28 +51,32 @@
  *       <span>Is it accessible?</span>
  *       <svg class="size-4 shrink-0 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
  *     </summary>
- *     <div class=${accordionContentClass()}>Yes, it uses a native disclosure widget.</div>
+ *     <div class=${accordionContentClass()}>
+ *       <div class=${accordionContentInnerClass()}>Yes, it uses a native disclosure widget.</div>
+ *     </div>
  *   </details>
  *   <details name="faq" class=${accordionItemClass()}>
  *     <summary class=${accordionTriggerClass()}>
  *       <span>Is it styled?</span>
  *       <svg class="size-4 shrink-0 transition-transform group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
  *     </summary>
- *     <div class=${accordionContentClass()}>Yes, with the shadcn design tokens.</div>
+ *     <div class=${accordionContentClass()}>
+ *       <div class=${accordionContentInnerClass()}>Yes, with the kit's design tokens.</div>
+ *     </div>
  *   </details>
  * </div>
  * ```
  */
 
 /** Root wrapper. Holds the column-of-items rhythm; no display: rules. */
-export const accordionClass = (): string => 'w-full';
+export const accordionClass = (): string => 'cn-accordion flex w-full flex-col';
 
 /**
  * Item: each <details>. The `group` utility lets the trigger's chevron
  * rotate on open via `group-open:rotate-180`. `last:border-b-0` cleans
  * the trailing edge.
  */
-export const accordionItemClass = (): string => 'group border-b last:border-b-0';
+export const accordionItemClass = (): string => 'cn-accordion-item group';
 
 /**
  * Trigger: applied to <summary>. Hides the native disclosure triangle so
@@ -85,7 +90,7 @@ export const accordionItemClass = (): string => 'group border-b last:border-b-0'
  * prop combines both; native HTML has no `disabled` on <details>.
  */
 export const accordionTriggerClass = (opts: { disabled?: boolean } = {}): string => {
-  const base = 'flex w-full cursor-pointer list-none items-center justify-between gap-4 py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-2 focus-visible:ring-ring/50 marker:hidden [&::-webkit-details-marker]:hidden';
+  const base = 'cn-accordion-trigger group/accordion-trigger relative flex justify-between outline-none transition-all disabled:pointer-events-none disabled:opacity-50';
   if (opts.disabled) return `${base} pointer-events-none cursor-not-allowed opacity-50`;
   return base;
 };
@@ -94,4 +99,12 @@ export const accordionTriggerClass = (opts: { disabled?: boolean } = {}): string
  * Content: <details> hides this entirely when not [open], so all we add
  * is the typography rhythm matching shadcn (bottom padding, small text).
  */
-export const accordionContentClass = (): string => 'pb-4 text-sm';
+export const accordionContentClass = (): string => 'cn-accordion-content overflow-hidden';
+
+/**
+ * Content inner: the wrapper shadcn's AccordionContent renders inside the
+ * content, around what you write. The styles put the content's padding here,
+ * and it underlines links and spaces paragraphs.
+ */
+export const accordionContentInnerClass = (): string =>
+  'cn-accordion-content-inner h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4';