@godxjp/ui 31.31.8 → 32.0.0

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

@@ -1,143 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Form, FormField, Input, PasswordInput, RadioGroup } from "@godxjp/ui/data-entry";
-import { Button, Logo, Text } from "@godxjp/ui/general";
-import {
-  AuthDivider,
-  AuthFooter,
-  AuthIdentity,
-  AuthShell,
-  AuthStack,
-  Flex,
-} from "@godxjp/ui/layout";
-import type { AuthShellProps } from "@godxjp/ui/layout";
-import { AppSettingPicker } from "@godxjp/ui/navigation";
-
-type AuthShellVariant = NonNullable<AuthShellProps["variant"]>;
-type AuthShellDensity = NonNullable<AuthShellProps["density"]>;
-
-/**
- * AuthShell の 2 つの直交軸: `variant`（シェルの寸法）と `density`（操作要素の段）。
- *
- * `variant="default"` は素の中央寄せシェル、`variant="canonical"` は GoDX ID の正準寸法。
- * `density` は独立した別軸で、既定は variant から導出されます（canonical なら compact、
- * default なら comfortable = 44px の WCAG タッチ下限）。明示的に渡せばその導出を上書きでき、
- * 4 通りの組み合わせがすべて成立します。
- *
- * このページは AuthShell を 1 つだけ描画します。AuthShell は banner / main / contentinfo の
- * ランドマークをページ全体に張るため、比較のために 2 つ並べるとランドマークが重複し、
- * それ自体がアクセシビリティ違反になります。そこで軸はページ内のラジオで切り替えます。
- * 初期表示は `variant="default"` × `density="comfortable"`（=素の AuthShell そのもの）。
- *
- * SCR-001 の正準ログイン（preset="login"）は Auth Shell ページ、preset の各フローは
- * Auth Shell Device / Auth Shell Context / Auth Recovery ページが受け持ちます。
- * ここに幅・余白・色の指定は 1 つもありません。すべてトークンが所有しています。
- */
-export default function Demo() {
-  const [variant, setVariant] = useState<AuthShellVariant>("default");
-  const [density, setDensity] = useState<AuthShellDensity>("comfortable");
-
-  return (
-    <AuthShell
-      variant={variant}
-      density={density}
-      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="GoDX ID" requester="経費精算がサインインを要求しています" />
-
-      {/* preset を持たないシェルの列は子要素の間隔を持たないため、2 枚のカードの間隔は
-          ページ側の Flex gap が所有します。幅は依然としてシェルのトークンが所有します。 */}
-      <Flex direction="col" gap="md">
-        <Card>
-          <CardHeader>
-            <CardTitle level={1}>サインイン</CardTitle>
-            <CardDescription>組織アカウントの資格情報を入力してください。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <AuthStack>
-                <FormField id="auth-axis-email" label="メールアドレス" layout="vertical" required>
-                  <Input id="auth-axis-email" type="email" placeholder="you@example.co.jp" />
-                </FormField>
-                <FormField id="auth-axis-password" label="パスワード" layout="vertical" required>
-                  <PasswordInput id="auth-axis-password" />
-                </FormField>
-                <Button fullWidth>サインイン</Button>
-                <AuthDivider label="または" />
-                <Button variant="outline" fullWidth>
-                  パスキーでサインイン
-                </Button>
-              </AuthStack>
-            </Form>
-          </CardContent>
-        </Card>
-
-        {/* 軸の切り替え。上のカードの操作要素の高さとカード内の余白がその場で変わるので、
-            density がシェル全体に閉じた段であることが読み取れます。 */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>このページの表示軸</CardTitle>
-            <CardDescription>
-              2 つの prop は独立しています。片方を変えてももう片方は変わりません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <Flex direction="col" gap="md">
-                <FormField
-                  id="auth-axis-variant"
-                  label="variant · シェルの寸法"
-                  layout="vertical"
-                  helper="canonical は GoDX ID の正準寸法、default は素の中央寄せシェル。"
-                >
-                  <RadioGroup
-                    orientation="horizontal"
-                    value={variant}
-                    onValueChange={(next) => setVariant(next as AuthShellVariant)}
-                    options={[
-                      { value: "default", label: "default（既定）" },
-                      { value: "canonical", label: "canonical（正準）" },
-                    ]}
-                  />
-                </FormField>
-                <FormField
-                  id="auth-axis-density"
-                  label="density · 操作要素の段"
-                  layout="vertical"
-                  helper="comfortable は 44px のタッチ下限、compact は情報密度を優先した段。"
-                >
-                  <RadioGroup
-                    orientation="horizontal"
-                    value={density}
-                    onValueChange={(next) => setDensity(next as AuthShellDensity)}
-                    options={[
-                      { value: "comfortable", label: "comfortable（44px）" },
-                      { value: "compact", label: "compact" },
-                    ]}
-                  />
-                </FormField>
-                <Text size="sm" tone="muted">
-                  現在の組み合わせ: variant=&quot;{variant}&quot; · density=&quot;{density}&quot;
-                </Text>
-              </Flex>
-            </Form>
-          </CardContent>
-        </Card>
-      </Flex>
-    </AuthShell>
-  );
-}

package/docs/layout/auth-shell.tsx

@@ -1,59 +0,0 @@
-import { Card, CardContent } from "@godxjp/ui/data-display";
-import { FormField, Input } from "@godxjp/ui/data-entry";
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  AuthDivider,
-  AuthFooter,
-  AuthIdentity,
-  AuthShell,
-  AuthStack,
-  Flex,
-} from "@godxjp/ui/layout";
-
-/**
- * SCR-001 Login visual contract. `?state=standalone|one-line|wrapped` drives the package visual
- * test; all three keep the same card anchor without consumer CSS or fake requester data.
- *
- * The composition mirrors the documented consumer page exactly: NO top brand bar (the
- * canonical SCR-001 artboard has none — the in-flow AuthIdentity mark IS the brand), a header-less
- * `<CardContent solo>` body, `AuthFooter` as the third direct child (the login preset's third grid
- * row), and a plain 12px text-link row like the artboard's.
- */
-export default function Demo() {
-  const state = new URLSearchParams(window.location.search).get("state") ?? "one-line";
-  const requester =
-    state === "standalone"
-      ? undefined
-      : state === "wrapped"
-        ? "Platform console browser BFF is requesting sign in to this organization"
-        : "Attendance is requesting sign in";
-
-  return (
-    <AuthShell variant="canonical" preset="login">
-      <AuthIdentity title="GoDX ID" requester={requester} />
-      <Card>
-        <CardContent solo>
-          <AuthStack>
-            <Button fullWidth>パスキーでサインイン</Button>
-            <AuthDivider label="または" />
-            <FormField id="auth-email" label="メールアドレス" layout="vertical">
-              <Input id="auth-email" type="email" placeholder="you@example.co.jp" />
-            </FormField>
-            <Button variant="outline" fullWidth>
-              次へ
-            </Button>
-            <Flex justify="between" wrap>
-              <Text size="xs">
-                <a href="#register">アカウント登録</a>
-              </Text>
-              <Text size="xs">
-                <a href="#forgot">パスワードを忘れた</a>
-              </Text>
-            </Flex>
-          </AuthStack>
-        </CardContent>
-      </Card>
-      <AuthFooter product="GoDX ID" terms="利用規約" privacy="プライバシー" />
-    </AuthShell>
-  );
-}

package/docs/layout/auth-stack.tsx

@@ -1,40 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Field, Input } from "@godxjp/ui/data-entry";
-import { Button } from "@godxjp/ui/general";
-import { AuthDivider, AuthStack, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * AuthStack — canonical vertical rhythm for direct auth-card sections. The stack remains a neutral
- * container, so labels, controls and actions retain their own semantic ownership.
- */
-export default function Demo() {
-  return (
-    <PageContainer title="AuthStack" subtitle="認証カード内の12px垂直リズム">
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>メールまたはpasskey</CardTitle>
-          <CardDescription>
-            各sectionはpublic componentのままstackへ直接配置します。
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <AuthStack>
-            <Button fullWidth>Passkeyで続ける</Button>
-            <AuthDivider label="または" />
-            <Field id="auth-stack-email" label="メールアドレス">
-              <Input
-                id="auth-stack-email"
-                type="email"
-                autoComplete="username"
-                placeholder="you@example.com"
-              />
-            </Field>
-            <Button variant="outline" fullWidth>
-              メールで続ける
-            </Button>
-          </AuthStack>
-        </CardContent>
-      </Card>
-    </PageContainer>
-  );
-}

package/docs/layout/centered-shell.tsx

@@ -1,102 +0,0 @@
-import {
-  Avatar,
-  AvatarFallback,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Button, Logo, Text } from "@godxjp/ui/general";
-import { CenteredShell, Flex, ResponsiveGrid, Topbar } from "@godxjp/ui/layout";
-import { AppSettingPicker } from "@godxjp/ui/navigation";
-
-/**
- * CenteredShell — authenticated, no-sidebar, centred-column page shell (hosted-ID "My Page",
- * account / self-service, standalone settings). A padded topbar with real actions reusing AppShell's
- * chrome WITHOUT a sidebar, a width-tiered centred column that is top-aligned + scrolls, and an
- * optional footer. Composed only from real @godxjp/ui components — zero custom CSS, no hand-rolled
- * bar. Fills the gap between AppShell (needs a sidebar) and AuthShell (unauthenticated narrow card).
- */
-export default function Demo() {
-  const services = [
-    { id: "attendance", name: "勤怠", desc: "打刻・勤務表" },
-    { id: "messaging", name: "チャット", desc: "社内メッセージ" },
-    { id: "ledger", name: "会計", desc: "請求・支払" },
-  ];
-
-  return (
-    <CenteredShell
-      width="md"
-      topbar={
-        <Topbar
-          start={
-            <Flex align="center" gap="sm">
-              <Logo glyph="G" />
-              <Text weight="medium">GodX ID</Text>
-            </Flex>
-          }
-          end={
-            <Flex align="center" gap="sm">
-              <AppSettingPicker kind="locale" />
-              <Button variant="ghost" size="sm">
-                <Avatar className="size-6">
-                  <AvatarFallback>田</AvatarFallback>
-                </Avatar>
-                田中 太郎
-              </Button>
-            </Flex>
-          }
-        />
-      }
-      footer={
-        <Text size="xs" tone="muted">
-          2026 GodX · プライバシー · 利用規約
-        </Text>
-      }
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={1}>マイページ</CardTitle>
-            <CardDescription>アカウントとサービスの概要。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="xs">
-              <Text weight="medium">田中 太郎</Text>
-              <Text size="sm" tone="muted">
-                tanaka@example.com · 組織: GodX 株式会社
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>サービス</CardTitle>
-            <CardDescription>利用中のアプリを開きます。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
-              {services.map((s) => (
-                <Card key={s.id}>
-                  <CardContent>
-                    <Flex direction="col" gap="xs">
-                      <Text weight="medium">{s.name}</Text>
-                      <Text size="sm" tone="muted">
-                        {s.desc}
-                      </Text>
-                      <Button variant="outline" size="sm">
-                        開く
-                      </Button>
-                    </Flex>
-                  </CardContent>
-                </Card>
-              ))}
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-      </Flex>
-    </CenteredShell>
-  );
-}

package/docs/layout/draggable-panel.tsx

@@ -1,127 +0,0 @@
-import { useState } from "react";
-import { DraggablePanel, Flex, PageContainer } from "@godxjp/ui/layout";
-import type { DraggablePanelPositionProp } from "@godxjp/ui/layout";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Badge,
-  Descriptions,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-
-/**
- * DraggablePanel · a floating surface the person using it can MOVE.
- *
- * The case it exists for: an assistant docked to a corner covers the thing the
- * person is asking about. Drag it by the title-bar handle, or focus the handle
- * and use the arrow keys. The position is REPORTED to the page below, never
- * stored by the library.
- */
-export default function Demo() {
-  const [position, setPosition] = useState<DraggablePanelPositionProp>({ x: 0, y: 0 });
-  const [open, setOpen] = useState(true);
-  const [pinned, setPinned] = useState(false);
-
-  return (
-    <PageContainer
-      title="DraggablePanel"
-      subtitle="floating movable surface · handle drag, arrow-key nudge, viewport-bounded"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Reported position</CardTitle>
-            <CardDescription>
-              Drag the panel by its handle, or focus the handle and press an arrow key. Hold Shift
-              for the larger step. Every frame and every nudge reports the clamped offset through
-              onPositionChange; the page below decides whether to remember it.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Descriptions
-                items={[
-                  { label: "x", value: String(Math.round(position.x)) },
-                  { label: "y", value: String(Math.round(position.y)) },
-                ]}
-              />
-              <Flex gap="sm" wrap>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    setPosition({ x: 0, y: 0 });
-                  }}
-                >
-                  角に戻す
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    setPinned((value) => !value);
-                  }}
-                >
-                  {pinned ? "移動を許可" : "その場に固定"}
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    setOpen(true);
-                  }}
-                >
-                  パネルを開く
-                </Button>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>What it is not</CardTitle>
-            <CardDescription>
-              ResizablePanel resizes panes WITHIN a layout, Sheet is pinned to an edge, and Popover
-              is anchored to its trigger. None of them can be repositioned by the viewer, which is
-              what a floating assistant needs.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Text size="sm" tone="muted">
-              The panel is a labelled region, not a dialog: it interrupts nothing, traps no focus
-              and dims no page, so the work behind it stays usable while it is open.
-            </Text>
-          </CardContent>
-        </Card>
-      </Flex>
-
-      {open ? (
-        <DraggablePanel
-          title="アシスタント"
-          placement="bottom-end"
-          width="sm"
-          disabled={pinned}
-          position={position}
-          onPositionChange={setPosition}
-          onClose={() => {
-            setOpen(false);
-          }}
-          extra={<Badge tone="info">β</Badge>}
-        >
-          <Flex direction="col" gap="sm">
-            <Text size="sm">
-              この請求書の消費税区分について質問できます。テキストは選択できます。掴むのはタイトルバーのハンドルだけです。
-            </Text>
-            <Text size="xs" tone="muted">
-              キーボード: ハンドルにフォーカスして矢印キー · Shift で大きく移動
-            </Text>
-          </Flex>
-        </DraggablePanel>
-      ) : null}
-    </PageContainer>
-  );
-}

package/docs/layout/error-surface/examples/application-403.tsx

@@ -1,84 +0,0 @@
-import { Button, Logo } from "@godxjp/ui/general";
-import {
-  AppShell,
-  ErrorSurface,
-  Flex,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { AppSettingPicker } from "@godxjp/ui/navigation";
-import { BarChart3, FileText, LayoutDashboard, Users } from "lucide-react";
-
-/**
- * 403 — `mode="application"`. The failure happened INSIDE the authenticated app, so the app shell is
- * PRESERVED: the sidebar nav, the topbar and the breadcrumb all survive, and only the page body is
- * replaced. The user is never stranded on a chrome-less page with a single "go home" button.
- *
- * READ THE MODE CONTRACT: `mode="application"` does NOT make the component build a shell. It cannot
- * — the nav sections, the product identity and the user menu are consumer-owned data. The mode says
- * "this is what you put in AppShell's children": the surface returns just its own block, and the
- * `AppShell` the route already renders stays mounted around it.
- *
- * 403 is the one status where WHY matters as much as WHAT, so both permission slots are used here:
- * `permission` names the missing role and `organization` names the workspace the request was scoped
- * to — that pair is what distinguishes "you need a role" from "you are in the wrong tenant". Both
- * are semantic `<dt>/<dd>` rows whose LABELS are library-owned and localized; you pass bare values.
- *
- * Copy is shown inline here; in an app every string comes from the app's own `t()`.
- */
-const sections: SidebarSectionProp[] = [
-  {
-    label: "業務",
-    items: [
-      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
-      { id: "reports", label: "レポート", icon: BarChart3 },
-      { id: "documents", label: "ドキュメント", icon: FileText },
-    ],
-  },
-  { label: "管理", items: [{ id: "users", label: "ユーザー", icon: Users }] },
-];
-
-export default function Demo() {
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="reports"
-          sections={sections}
-          onSelect={() => {}}
-          product={{ name: "GodX Console", role: "管理コンソール" }}
-        />
-      }
-      topbar={
-        <Topbar
-          start={<Logo glyph="G" />}
-          end={
-            <Flex align="center" gap="sm">
-              <AppSettingPicker kind="locale" />
-              <Button variant="ghost" size="sm">
-                田中 太郎
-              </Button>
-            </Flex>
-          }
-        />
-      }
-    >
-      <PageContainer
-        title="レポート"
-        breadcrumb={[{ label: "ホーム", to: "#" }, { label: "レポート" }]}
-      >
-        <ErrorSurface
-          mode="application"
-          status={403}
-          title="このページへのアクセス権限がありません"
-          description="レポートの閲覧には管理者によるロール付与が必要です。付与後に再度お試しください。"
-          permission="reports.view"
-          organization="株式会社ゴッドエックス"
-          action={<Button>ダッシュボードへ戻る</Button>}
-        />
-      </PageContainer>
-    </AppShell>
-  );
-}

package/docs/layout/error-surface/examples/application-404.tsx

@@ -1,77 +0,0 @@
-import { Button, Logo } from "@godxjp/ui/general";
-import {
-  AppShell,
-  ErrorSurface,
-  Flex,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { AppSettingPicker } from "@godxjp/ui/navigation";
-import { BarChart3, FileText, LayoutDashboard, Users } from "lucide-react";
-
-/**
- * 404 — `mode="application"` with the optional request ID. Same preserved shell, same surface; only
- * `status` changes, and with it the default icon (SearchX) and tone (muted — a miss is neutral, not
- * a warning). You do not re-pick the icon or the colour per status: the status IS the input.
- *
- * `requestId` is a semantic metadata slot, not a paragraph you write. The surface renders it as a
- * `<dt>/<dd>` pair with a localized "Request ID" label and a mono/tabular value, so the correlation
- * id can be read out or copied accurately for support, and so a screen reader announces the
- * label↔value relationship instead of a run-on sentence. Omit the prop when there is no id —
- * metadata rows are optional and the list disappears entirely when every slot is empty.
- */
-const sections: SidebarSectionProp[] = [
-  {
-    label: "業務",
-    items: [
-      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
-      { id: "reports", label: "レポート", icon: BarChart3 },
-      { id: "documents", label: "ドキュメント", icon: FileText },
-    ],
-  },
-  { label: "管理", items: [{ id: "users", label: "ユーザー", icon: Users }] },
-];
-
-export default function Demo() {
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="documents"
-          sections={sections}
-          onSelect={() => {}}
-          product={{ name: "GodX Console", role: "管理コンソール" }}
-        />
-      }
-      topbar={
-        <Topbar
-          start={<Logo glyph="G" />}
-          end={
-            <Flex align="center" gap="sm">
-              <AppSettingPicker kind="locale" />
-              <Button variant="ghost" size="sm">
-                田中 太郎
-              </Button>
-            </Flex>
-          }
-        />
-      }
-    >
-      <PageContainer
-        title="ドキュメント"
-        breadcrumb={[{ label: "ホーム", to: "#" }, { label: "ドキュメント" }]}
-      >
-        <ErrorSurface
-          mode="application"
-          status={404}
-          title="ページが見つかりません"
-          description="お探しのドキュメントは移動または削除された可能性があります。一覧から選び直してください。"
-          requestId="01J9Z0M7Q2K5S7WQ3T5N8V2H4B"
-          action={<Button>ドキュメント一覧へ</Button>}
-        />
-      </PageContainer>
-    </AppShell>
-  );
-}