@godxjp/ui 19.1.0 → 19.3.1

package/docs/layout/auth-shell-context.tsx

@@ -0,0 +1,103 @@
+import { ChevronRight } from "lucide-react";
+
+import {
+  Avatar,
+  AvatarFallback,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ListRow,
+} from "@godxjp/ui/data-display";
+import { Checkbox, Field } from "@godxjp/ui/data-entry";
+import { Button, Logo, Reveal, Text } from "@godxjp/ui/general";
+import { AuthFooter, AuthIdentity, AuthShell, Flex } from "@godxjp/ui/layout";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+/**
+ * AuthShell preset="context-selection" (gh#217) — the canonical organisation / context picker.
+ *
+ * The preset owns the whole page measure: a 25rem card at 1440/1024 and an edge-to-edge card at
+ * 390 (0 inline gutter), plus the vertical rhythm between the three direct sections of the auth
+ * column — the intro (`AuthIdentity`), the choice card, and the trailing "remember" row. There is
+ * no page-local width, inset or colour here.
+ *
+ * The organisation list is a COMPOSITION, not a new framework component (Gate 0 / rule #46): a
+ * `Card` + `CardContent flush` + a `<ul>` of `ListRow as="li"` already gives shared row dividers
+ * with no per-row card outline — exactly the requested `OrganizationChoiceList`.
+ *
+ * The brand mark is the real GoDX identity mark that the package already owns
+ * (`<Logo mark="godx" />`), and the footer locale switch is the compact labelled presentation
+ * (`<AppSettingPicker kind="locale" appearance="labeled" compact />`) rather than the square
+ * icon-only topbar default. Verify at 1440x900 · 1024x900 · 390x844.
+ */
+const ORGANIZATIONS = [
+  { id: "acme", name: "Acme 株式会社", role: "管理者 · 128 メンバー", initials: "AC" },
+  { id: "godx-labs", name: "GoDX Labs", role: "メンバー · 24 メンバー", initials: "GL" },
+  {
+    id: "tokyo-logistics",
+    name: "東京ロジスティクス",
+    role: "閲覧者 · 512 メンバー",
+    initials: "TL",
+  },
+];
+
+export default function Demo() {
+  return (
+    <AuthShell
+      variant="canonical"
+      preset="context-selection"
+      brand={
+        <Flex align="center" gap="sm">
+          <Logo mark="godx" tone="success" />
+          <Text weight="medium">GoDX ID</Text>
+        </Flex>
+      }
+      footer={
+        <AuthFooter
+          product="GoDX ID"
+          terms="利用規約"
+          privacy="プライバシー"
+          locale={<AppSettingPicker kind="locale" appearance="labeled" compact />}
+        />
+      }
+    >
+      <AuthIdentity title="組織を選択" requester="satoshi@example.com としてサインイン中" />
+      <Reveal>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>続行する組織</CardTitle>
+            <CardDescription>この後の操作はここで選んだ組織に適用されます。</CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ul>
+              {ORGANIZATIONS.map((org) => (
+                <ListRow
+                  as="li"
+                  key={org.id}
+                  leading={
+                    <Avatar>
+                      <AvatarFallback>{org.initials}</AvatarFallback>
+                    </Avatar>
+                  }
+                  title={org.name}
+                  description={org.role}
+                  trailing={
+                    <Button variant="ghost" size="sm">
+                      選択
+                      <ChevronRight aria-hidden="true" />
+                    </Button>
+                  }
+                />
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      </Reveal>
+      <Field id="auth-remember-context" label="次回からこの組織を既定にする">
+        <Checkbox id="auth-remember-context" />
+      </Field>
+    </AuthShell>
+  );
+}

package/docs/layout/auth-shell-device.tsx

@@ -0,0 +1,112 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  FormField,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@godxjp/ui/data-entry";
+import { Button, Logo, Reveal, Text } from "@godxjp/ui/general";
+import {
+  AuthAccountSummary,
+  AuthFooter,
+  AuthIdentity,
+  AuthShell,
+  AuthStack,
+  Flex,
+} from "@godxjp/ui/layout";
+import { AppSettingPicker, Steps } from "@godxjp/ui/navigation";
+
+/**
+ * AuthShell preset="device-authorization" (gh#220) — the canonical OAuth device-grant screen.
+ *
+ * The whole page measure is owned by the preset: a 380px card at 1440/1024 and a 5px inline page
+ * gutter at 390 (card x=5px, width=380px). Nothing here sets a width, an inset or a colour — a
+ * consumer that previously forked `.canonical-auth-shell--wide` to override
+ * `--auth-shell-card-max-width` deletes that CSS and passes `preset` instead.
+ *
+ * `variant="canonical"` still owns control density + heading size; the preset only re-measures.
+ * Verify at 1440x900 · 1024x900 · 390x844.
+ *
+ * gh#12 — the preset also owns the CODE FIELD now: `--otp-slot-{inline,block}-size` come from
+ * `--auth-shell-device-otp-slot-*`, so each 4-slot grouped box measures the canonical 112x54
+ * instead of the 146x38 the square control tier produced. Nothing on this page sets it. The row is
+ * centred with `align="center"` (not a wrapper div) and the progress marker is the canonical
+ * `separator="arrow"`.
+ */
+export default function Demo() {
+  return (
+    <AuthShell
+      variant="canonical"
+      preset="device-authorization"
+      brand={
+        <Flex align="center" gap="sm">
+          <Logo mark="godx" tone="success" />
+          <Text weight="medium">GoDX ID</Text>
+        </Flex>
+      }
+      footer={
+        <AuthFooter
+          product="GoDX ID"
+          terms="利用規約"
+          privacy="プライバシー"
+          locale={<AppSettingPicker kind="locale" appearance="labeled" compact />}
+        />
+      }
+    >
+      <Reveal>
+        <Card>
+          <CardHeader>
+            <Steps
+              type="inline"
+              separator="arrow"
+              value={0}
+              items={[{ title: "コード入力" }, { title: "確認" }, { title: "完了" }]}
+            />
+            <AuthIdentity
+              title="デバイスを認証"
+              requester="勤怠管理 (TV アプリ) が認証を要求しています"
+            />
+            <CardTitle level={2}>確認コードを入力</CardTitle>
+            <CardDescription>
+              デバイスの画面に表示されている 8 桁のコードを入力してください。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AuthStack>
+              <AuthAccountSummary
+                email="signed-in.user@example.com"
+                actionLabel="切り替え"
+                onAction={() => {}}
+              />
+              <FormField id="device-otp" label="デバイス確認コード" required>
+                <InputOTP maxLength={8} align="center">
+                  <InputOTPGroup appearance="grouped">
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                  </InputOTPGroup>
+                  <InputOTPSeparator />
+                  <InputOTPGroup appearance="grouped">
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                    <InputOTPSlot index={6} />
+                    <InputOTPSlot index={7} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </FormField>
+              <Button fullWidth>デバイスを承認</Button>
+              <Button fullWidth variant="ghost">
+                キャンセル
+              </Button>
+              <Text size="xs" tone="muted">
+                このコードは 15 分間有効です。
+              </Text>
+            </AuthStack>
+          </CardContent>
+        </Card>
+      </Reveal>
+    </AuthShell>
+  );
+}

package/docs/layout/auth-shell-registration.tsx

@@ -0,0 +1,335 @@
+import { useState } from "react";
+import { CheckCircle2, KeyRound, Mail } from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle, Skeleton } from "@godxjp/ui/feedback";
+import {
+  Avatar,
+  AvatarFallback,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  EmptyState,
+  ListRow,
+} from "@godxjp/ui/data-display";
+import {
+  Checkbox,
+  Field,
+  FormField,
+  Input,
+  PasswordInput,
+  PasswordStrength,
+} from "@godxjp/ui/data-entry";
+import { Button, Reveal } from "@godxjp/ui/general";
+import {
+  AuthDivider,
+  AuthFooter,
+  AuthIdentity,
+  AuthShell,
+  AuthStack,
+  Flex,
+} from "@godxjp/ui/layout";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+/**
+ * AuthShell preset="registration" (gh#256) — the canonical sign-up measure.
+ *
+ * The preset owns the whole page geometry: a 360px (22.5rem) form measure at 1440/1024, a 15px
+ * inline gutter at 390 (card x=15, width=360 — the same page rhythm as preset="login", so
+ * sign-in → sign-up never jumps on a phone), the block-start inset, and the FOOTER CLEARANCE the
+ * legal/consent footer keeps at the end of a long scroll. There is no page-local width, inset,
+ * media query or colour anywhere in this file.
+ *
+ * WHY THIS PRESET IS START-ALIGNED: a registration card is the tallest surface in the
+ * hosted-identity set — name · email · password · confirm · strength meter · consent · submit ·
+ * provider row. A vertically CENTRED tall card overflows ABOVE the scroll origin on a short
+ * viewport, which puts its first field permanently out of reach. Start-aligned, the block-start
+ * inset is ordinary page padding the user simply scrolls past.
+ *
+ * Two things in this page are COMPOSITIONS, not framework components (Gate 0 / rule #46) —
+ * they are the formally documented public replacements #256 asked for:
+ *
+ *   · SOCIAL / PROVIDER ACTIONS ("SocialLinks") — an `AuthDivider` + a `Flex direction="col"` of
+ *     real `Button variant="outline"`. It owns no behaviour: each provider is a plain action the
+ *     app wires to its own OAuth start URL. A framework component here would have to invent the
+ *     provider list, its order and its consent semantics — product decisions the package must not
+ *     make. `disabled` and `loading` are the Button's own props; no new API.
+ *
+ *   · ORGANIZATION CHOICE LIST — `Card` + `CardContent flush` + a `<ul>` of `ListRow as="li"`,
+ *     the same composition documented on the context-selection page. Its loading / empty / error /
+ *     denied states are shown here because #256 asked for them explicitly: Skeleton rows,
+ *     `EmptyState`, and an `Alert` — all existing exports, no consumer CSS.
+ *
+ * `?state=standalone|one-line|wrapped|pending-email` drives the package visual script
+ * (scripts/auth-shell-registration-visual.mjs): the first three vary the identity copy length and
+ * the last one swaps the card to the pending-email confirmation — all four must keep the same
+ * card anchor. Verify at 1440x900 · 1024x900 · 390x844.
+ */
+
+type Stage = "form" | "pending-email";
+type ListState = "ready" | "loading" | "empty" | "error" | "denied";
+
+const PROVIDERS = [
+  { id: "google", label: "Google で登録", icon: Mail },
+  { id: "passkey", label: "パスキーで登録", icon: KeyRound },
+];
+
+const ORGANIZATIONS = [
+  { id: "acme", name: "Acme 株式会社", role: "招待 · 管理者として参加", initials: "AC" },
+  { id: "godx-labs", name: "GoDX Labs", role: "招待 · メンバーとして参加", initials: "GL" },
+];
+
+export default function Demo() {
+  const urlState = new URLSearchParams(window.location.search).get("state") ?? "one-line";
+  const [stage, setStage] = useState<Stage>(
+    urlState === "pending-email" ? "pending-email" : "form",
+  );
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [consent, setConsent] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [listState, setListState] = useState<ListState>("ready");
+
+  const requester =
+    urlState === "standalone"
+      ? undefined
+      : urlState === "wrapped"
+        ? "すでにアカウントをお持ちの場合はこちらからサインインしてください（組織の管理者から招待を受けている場合も同じです）"
+        : stage === "form"
+          ? "すでにアカウントをお持ちの場合はサインインしてください"
+          : "satoshi@example.com 宛に確認リンクを送信しました";
+
+  // The one real validation this page owns — a confirmation that does not match is the classic
+  // registration error, and it must be announced, not just coloured (WCAG 1.4.1).
+  const mismatch = confirm.length > 0 && confirm !== password;
+
+  return (
+    // NO `brand` bar — deliberately, and it is load-bearing for the geometry, not a styling
+    // preference. The canonical hosted-identity screens (SCR-001 Login, SCR-002 Registration) put
+    // the mark INSIDE the column as `AuthIdentity`, above the card, and pass no top brand bar.
+    // Pass one here and the whole column is pushed down by the bar's height, so every offset read
+    // off this page would be wrong and the preset's canonical card anchor would silently miss.
+    <AuthShell
+      variant="canonical"
+      preset="registration"
+      footer={
+        <AuthFooter
+          product="GoDX ID"
+          terms="利用規約"
+          privacy="プライバシー"
+          locale={<AppSettingPicker kind="locale" appearance="labeled" compact />}
+        />
+      }
+    >
+      <AuthIdentity
+        title={stage === "form" ? "アカウントを作成" : "メールを確認してください"}
+        requester={requester}
+      />
+
+      <Reveal>
+        {stage === "form" ? (
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>登録情報</CardTitle>
+              <CardDescription>
+                すべての項目が必須です。パスワードは 12 文字以上を推奨します。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AuthStack>
+                <FormField id="reg-name" label="お名前" required>
+                  <Input id="reg-name" autoComplete="name" placeholder="山田 太郎" />
+                </FormField>
+
+                <FormField
+                  id="reg-email"
+                  label="メールアドレス"
+                  required
+                  helper="確認リンクの送信先になります。"
+                >
+                  <Input
+                    id="reg-email"
+                    type="email"
+                    autoComplete="email"
+                    placeholder="you@example.com"
+                  />
+                </FormField>
+
+                <FormField id="reg-password" label="パスワード" required>
+                  <PasswordInput
+                    id="reg-password"
+                    autoComplete="new-password"
+                    value={password}
+                    onChange={(event) => setPassword(event.target.value)}
+                  />
+                </FormField>
+
+                {/* The strength meter is a real primitive — never a hand-rolled coloured bar. */}
+                <PasswordStrength value={password} />
+
+                <FormField
+                  id="reg-confirm"
+                  label="パスワード（確認）"
+                  required
+                  // The error is announced through the field's own aria-errormessage wiring, so
+                  // the mismatch is not communicated by colour alone.
+                  error={mismatch ? "パスワードが一致しません。" : undefined}
+                >
+                  <PasswordInput
+                    id="reg-confirm"
+                    autoComplete="new-password"
+                    value={confirm}
+                    onChange={(event) => setConfirm(event.target.value)}
+                  />
+                </FormField>
+
+                <Field id="reg-consent" label="利用規約とプライバシーポリシーに同意します">
+                  <Checkbox
+                    id="reg-consent"
+                    checked={consent}
+                    onCheckedChange={(next) => setConsent(next === true)}
+                  />
+                </Field>
+
+                <Button
+                  loading={submitting}
+                  disabled={!consent || mismatch}
+                  onClick={() => {
+                    setSubmitting(true);
+                    setSubmitting(false);
+                    setStage("pending-email");
+                  }}
+                >
+                  アカウントを作成
+                </Button>
+
+                {/* ── SOCIAL / PROVIDER ACTIONS — the documented "SocialLinks" composition.
+                       A divider + real outline Buttons. No new component: the package must not
+                       invent which providers a product offers, in what order, or what consent
+                       they imply. `disabled` / `loading` are the Button's own props. ── */}
+                <AuthDivider label="または" />
+
+                <Flex direction="col" gap="sm">
+                  {PROVIDERS.map((provider) => {
+                    const Icon = provider.icon;
+                    return (
+                      <Button key={provider.id} variant="outline" disabled={submitting}>
+                        <Icon aria-hidden="true" />
+                        {provider.label}
+                      </Button>
+                    );
+                  })}
+                </Flex>
+              </AuthStack>
+            </CardContent>
+          </Card>
+        ) : (
+          /* ── PENDING-EMAIL state — carried by the SAME preset, no geometry change. ── */
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>確認メールを送信しました</CardTitle>
+              <CardDescription>
+                メール内のリンクを開くと登録が完了します。リンクの有効期限は 24 時間です。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AuthStack>
+                <Alert tone="success">
+                  <CheckCircle2 aria-hidden="true" />
+                  <AlertTitle>satoshi@example.com に送信しました</AlertTitle>
+                  <AlertDescription>
+                    受信箱に届かない場合は迷惑メールフォルダをご確認ください。
+                  </AlertDescription>
+                </Alert>
+                <Button variant="outline">確認メールを再送する</Button>
+                <Button variant="ghost" onClick={() => setStage("form")}>
+                  入力内容を修正する
+                </Button>
+              </AuthStack>
+            </CardContent>
+          </Card>
+        )}
+      </Reveal>
+
+      {/* ── ORGANIZATION CHOICE LIST — the documented public composition, with every state #256
+             asked for. Card + CardContent flush + <ul> of ListRow as="li"; the states are
+             Skeleton / EmptyState / Alert. Nothing here is a new component and nothing needs
+             consumer CSS. ── */}
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>参加する組織</CardTitle>
+          <CardDescription>招待されている組織があれば、登録と同時に参加できます。</CardDescription>
+        </CardHeader>
+        <CardContent flush>
+          {listState === "ready" && (
+            <ul>
+              {ORGANIZATIONS.map((org) => (
+                <ListRow
+                  as="li"
+                  key={org.id}
+                  leading={
+                    <Avatar>
+                      <AvatarFallback>{org.initials}</AvatarFallback>
+                    </Avatar>
+                  }
+                  title={org.name}
+                  description={org.role}
+                  trailing={
+                    <Button variant="ghost" size="sm">
+                      参加
+                    </Button>
+                  }
+                />
+              ))}
+            </ul>
+          )}
+
+          {listState === "loading" && (
+            <Flex direction="col" gap="sm">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </Flex>
+          )}
+
+          {listState === "empty" && (
+            <EmptyState
+              title="招待されている組織はありません"
+              description="登録後に組織を作成するか、管理者に招待を依頼してください。"
+            />
+          )}
+
+          {listState === "error" && (
+            <Alert tone="destructive">
+              <AlertTitle>招待一覧を取得できませんでした</AlertTitle>
+              <AlertDescription>
+                しばらくしてからもう一度お試しください。登録自体は続行できます。
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {listState === "denied" && (
+            <Alert tone="warning">
+              <AlertTitle>この一覧を表示する権限がありません</AlertTitle>
+              <AlertDescription>招待の確認は組織の管理者にご依頼ください。</AlertDescription>
+            </Alert>
+          )}
+        </CardContent>
+      </Card>
+
+      <Flex direction="row" gap="xs" wrap justify="center">
+        {(["ready", "loading", "empty", "error", "denied"] as const).map((state) => (
+          <Button
+            key={state}
+            size="sm"
+            variant={state === listState ? "secondary" : "ghost"}
+            aria-pressed={state === listState}
+            onClick={() => setListState(state)}
+          >
+            {state}
+          </Button>
+        ))}
+      </Flex>
+    </AuthShell>
+  );
+}