@godxjp/ui 19.1.0 → 19.3.1

package/docs/feedback/alert.tsx

@@ -0,0 +1,248 @@
+import {
+  Alert,
+  AlertActions,
+  AlertContent,
+  AlertDescription,
+  AlertQueryError,
+  AlertTitle,
+  Banner,
+} from "@godxjp/ui/feedback";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Alert · inline persistent banner for page-scoped feedback (errors, warnings,
+ * success, info). NOT for transient toasts. Compose AlertTitle +
+ * AlertDescription inside; add AlertActions for CTA buttons. Pass onDismiss to
+ * show the built-in × button.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Alert"
+      subtitle="tone × variant × dismiss × actions · persistent inline banner (never use for transient feedback)"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Every tone branch · variant</CardTitle>
+            <CardDescription>
+              All seven tone branches, in order: default, success, warning, destructive, info,
+              muted, neutral. Tone sets the icon, the surface and the live-region politeness
+              (destructive and warning announce assertively; the rest are polite). default, muted
+              and neutral deliberately share the quiet neutral surface, so the caller names intent
+              without adding colour. variant is the structural axis: the MEASURE of the box, never
+              the colour: default (spelled out on the first banner) is this inset, rounded, inline
+              alert; banner is the page-level strip shown at the bottom of this page.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Alert variant="default" tone="default">
+                <AlertTitle>勘定科目マスタを更新しました</AlertTitle>
+                <AlertDescription>変更内容は次回の仕訳入力から反映されます。</AlertDescription>
+              </Alert>
+              <Alert tone="success">
+                <AlertTitle>インポートが完了しました</AlertTitle>
+                <AlertDescription>1,240 件の仕訳を取り込みました。</AlertDescription>
+              </Alert>
+              <Alert tone="warning">
+                <AlertTitle>3 件の打刻漏れがあります</AlertTitle>
+                <AlertDescription>本日中に確認してください。</AlertDescription>
+              </Alert>
+              <Alert tone="destructive">
+                <AlertTitle>請求書の保存に失敗しました</AlertTitle>
+                <AlertDescription>
+                  サーバーエラーが発生しました。内容を確認のうえ再度お試しください。
+                </AlertDescription>
+              </Alert>
+              <Alert tone="info">
+                <AlertTitle>電子帳簿保存法の保存要件が変更されます</AlertTitle>
+                <AlertDescription>
+                  2026年1月以降に受領した証憑が対象です。保存設定をご確認ください。
+                </AlertDescription>
+              </Alert>
+              <Alert tone="muted">
+                <AlertTitle>この請求書は下書きです</AlertTitle>
+                <AlertDescription>送信するまで取引先には表示されません。</AlertDescription>
+              </Alert>
+              <Alert tone="neutral">
+                <AlertTitle>8月10日 02:00 から 04:00 まで定期メンテナンスを行います</AlertTitle>
+                <AlertDescription>作業中は仕訳の保存ができません。</AlertDescription>
+              </Alert>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>AlertContent + cause-aware query recovery</CardTitle>
+            <CardDescription>
+              Content groups copy; transient errors expose an explicit retry.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Alert tone="default">
+                <AlertContent>
+                  <AlertTitle>同期状態</AlertTitle>
+                  <AlertDescription>最終同期は 2 分前です。</AlertDescription>
+                </AlertContent>
+              </Alert>
+              <AlertQueryError error={new Error("Service unavailable: 503")} onRetry={() => {}} />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>AlertTitle + AlertDescription + AlertActions</CardTitle>
+            <CardDescription>
+              Wrap text in AlertTitle / AlertDescription; put CTA Buttons in AlertActions (renders
+              in the action slot). Never place raw buttons as top-level Alert children.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Alert tone="warning">
+              <AlertTitle>MF 連携トークンの有効期限が近づいています</AlertTitle>
+              <AlertDescription>
+                7 日以内にトークンが失効します。今すぐ再連携してください。
+              </AlertDescription>
+              <AlertActions>
+                <Button size="sm">再連携する</Button>
+              </AlertActions>
+            </Alert>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Dismissible banner</CardTitle>
+            <CardDescription>
+              Pass onDismiss: the component renders an accessible × button automatically. Never
+              hand-roll your own dismiss button.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Alert
+              tone="destructive"
+              onDismiss={() => {
+                /* set session flag */
+              }}
+            >
+              <AlertTitle>請求が未払いです</AlertTitle>
+              <AlertDescription>
+                期日を過ぎた請求書が 2 件あります。早急にご確認ください。
+              </AlertDescription>
+            </Alert>
+          </CardContent>
+        </Card>
+
+        {/* Banner — the SAME component at the page measure (gh#255). variant="banner" swaps only
+            the box: square, edge-to-edge, ruled on the block-end edge, measured by the --banner-*
+            tokens. Every tone, the icon, the actions grid and the dismiss ✕ are inherited from the
+            inline alert above, so there is nothing new to learn and nothing duplicated.
+            `CardContent flush` removes the card inset so the strip really does reach both edges —
+            which is the whole point of the variant and cannot be shown inside a padded body. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Banner · page-level strip</CardTitle>
+            <CardDescription>
+              Mount it above PageHeader/PageContainer, or in AppShell to span every route. Use it
+              only for page- or app-scoped messages (maintenance, trial expiry, read-only mode); a
+              message about ONE section stays an inline Alert inside that section. Never stack two.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Flex direction="col">
+              <Banner tone="info">
+                <Banner.Title>8月10日 02:00〜04:00 に定期メンテナンスを実施します</Banner.Title>
+                <Banner.Description>作業中は仕訳の保存ができません。</Banner.Description>
+              </Banner>
+              <Banner
+                tone="warning"
+                onDismiss={() => {
+                  /* set session flag */
+                }}
+              >
+                <Banner.Content>
+                  <Banner.Title>お試し期間は残り 3 日です</Banner.Title>
+                  <Banner.Description>期限までにプランを選択してください。</Banner.Description>
+                </Banner.Content>
+                <Banner.Actions>
+                  <Button size="sm">プランを見る</Button>
+                </Banner.Actions>
+              </Banner>
+              <Banner tone="neutral">
+                <Banner.Title>閲覧専用モードで表示しています</Banner.Title>
+                <Banner.Description>
+                  サポート担当として代理ログイン中のため、編集操作は無効です。
+                </Banner.Description>
+              </Banner>
+              <Banner tone="destructive">
+                <Banner.Title>請求が未払いのため一部機能を停止しています</Banner.Title>
+                <Banner.Description>
+                  期日を過ぎた請求書が 2 件あります。お支払い後、数分で再開されます。
+                </Banner.Description>
+              </Banner>
+              {/* Long EN / VI copy at the same measure — the strip wraps rather than truncating,
+                  and the actions column keeps its minimum before dropping to its own row. This is
+                  the 390px stress case: nothing here sets a width. */}
+              <Banner tone="warning">
+                <Banner.Content>
+                  <Banner.Title>
+                    Scheduled maintenance will pause synchronisation for all connected accounting
+                    workspaces
+                  </Banner.Title>
+                  <Banner.Description>
+                    Journal entries created during the window are queued and submitted automatically
+                    once the service resumes. No action is required.
+                  </Banner.Description>
+                </Banner.Content>
+                <Banner.Actions>
+                  <Button size="sm" variant="outline">
+                    View status page
+                  </Button>
+                </Banner.Actions>
+              </Banner>
+              <Banner tone="info">
+                <Banner.Content>
+                  <Banner.Title>
+                    Việc đồng bộ dữ liệu hoá đơn sẽ tạm dừng trong thời gian bảo trì định kỳ
+                  </Banner.Title>
+                  <Banner.Description>
+                    Các bút toán được tạo trong khoảng thời gian này sẽ được xếp hàng và gửi lại tự
+                    động sau khi dịch vụ hoạt động trở lại.
+                  </Banner.Description>
+                </Banner.Content>
+                <Banner.Actions>
+                  <Button size="sm" variant="outline">
+                    Xem trạng thái
+                  </Button>
+                </Banner.Actions>
+              </Banner>
+              {/* The remaining three tones. default / muted / neutral deliberately share the quiet
+                  neutral surface — the caller names intent without adding colour — so all three
+                  belong here: a reader has to SEE that they resolve alike, not be told. */}
+              <Banner tone="default">
+                <Banner.Title>新しい利用規約が2026年9月1日に発効します</Banner.Title>
+                <Banner.Description>内容は設定画面からいつでも確認できます。</Banner.Description>
+              </Banner>
+              <Banner tone="success">
+                <Banner.Title>すべてのサービスが正常に稼働しています</Banner.Title>
+                <Banner.Description>直近のインシデントは解決済みです。</Banner.Description>
+              </Banner>
+              <Banner tone="muted">
+                <Banner.Title>この組織はアーカイブされています</Banner.Title>
+                <Banner.Description>
+                  閲覧のみ可能で、新しい操作は記録されません。
+                </Banner.Description>
+              </Banner>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/feedback/banner.tsx

@@ -0,0 +1,183 @@
+import { useState } from "react";
+import { Banner } from "@godxjp/ui/feedback";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Banner · full-bleed page/shell attention strip (godxjp-ui#255) — the Alert
+ * primitive with the structural axis fixed to variant="banner". Persistent,
+ * page/shell-scoped, at most one per surface. tone owns colour + icon +
+ * live-region politeness; onDismiss renders the built-in dismiss (last in focus
+ * order); actions wrap onto their own full-width line below the 640px step so a
+ * 390px viewport wraps instead of clipping.
+ */
+export default function Demo() {
+  const [dismissed, setDismissed] = useState(false);
+
+  return (
+    <PageContainer
+      title="Banner"
+      subtitle="tone × actions × dismiss · full-bleed attention strip (the inline-card presentation is Alert)"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Canonical shell notices · every tone</CardTitle>
+            <CardDescription>
+              The strip runs edge-to-edge with square corners and a single tone-coloured hairline on
+              the block-end edge. Geometry is owned by the --banner-* tokens, never consumer CSS.
+              destructive and warning announce assertively (role=alert); the rest politely
+              (role=status).
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Flex direction="col" gap="md">
+              <Banner tone="warning">
+                <Banner.Content>
+                  <Banner.Title>お支払いが確認できていません</Banner.Title>
+                  <Banner.Description>
+                    サービスの停止を避けるため、お支払い方法を更新してください。
+                  </Banner.Description>
+                </Banner.Content>
+                <Banner.Actions>
+                  <Button size="sm" variant="outline">
+                    お支払い方法を更新
+                  </Button>
+                </Banner.Actions>
+              </Banner>
+              <Banner tone="info">
+                <Banner.Content>
+                  <Banner.Title>サポートセッションが進行中です</Banner.Title>
+                  <Banner.Description>
+                    担当者（田中）がお客様の組織を閲覧しています。
+                  </Banner.Description>
+                </Banner.Content>
+                <Banner.Actions>
+                  <Button size="sm" variant="outline">
+                    セッションを終了
+                  </Button>
+                </Banner.Actions>
+              </Banner>
+              <Banner tone="destructive">
+                <Banner.Title>一部のサービスで障害が発生しています</Banner.Title>
+                <Banner.Description>
+                  復旧状況はステータスページをご確認ください。
+                </Banner.Description>
+              </Banner>
+              <Banner tone="success">
+                <Banner.Title>お支払いを確認しました</Banner.Title>
+                <Banner.Description>すべての機能が再び利用可能になりました。</Banner.Description>
+              </Banner>
+              <Banner tone="neutral">
+                <Banner.Title>8月24日 02:00〜04:00 に定期メンテナンスを行います</Banner.Title>
+                <Banner.Description>作業中は一部の操作が制限されます。</Banner.Description>
+              </Banner>
+              <Banner tone="muted">
+                <Banner.Title>この組織はアーカイブ済みです</Banner.Title>
+                <Banner.Description>閲覧のみ可能で、変更はできません。</Banner.Description>
+              </Banner>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Dismissible · built-in control, focus order</CardTitle>
+            <CardDescription>
+              onDismiss renders the localized dismiss button pinned top/inline-end and LAST in DOM
+              order: keyboard focus reaches content, then actions, then dismiss. Never hand-roll an
+              × inside Banner.Actions.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            {dismissed ? (
+              <Banner tone="default" icon={false}>
+                <Banner.Content>
+                  <Banner.Title>通知を閉じました</Banner.Title>
+                  <Banner.Description>このデモでは再表示できます。</Banner.Description>
+                </Banner.Content>
+                <Banner.Actions>
+                  <Button size="sm" variant="outline" onClick={() => setDismissed(false)}>
+                    通知を再表示
+                  </Button>
+                </Banner.Actions>
+              </Banner>
+            ) : (
+              <Banner tone="neutral" onDismiss={() => setDismissed(true)}>
+                <Banner.Title>新しい管理コンソールをお試しいただけます</Banner.Title>
+                <Banner.Description>設定画面からいつでも元の表示に戻せます。</Banner.Description>
+              </Banner>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Long JA / EN / VI copy · 390px wrapping</CardTitle>
+            <CardDescription>
+              The text column wraps inside min-width 0 and actions drop onto their own full-width
+              wrapping line below the 640px step. Narrow this frame to 390px: nothing clips, nothing
+              overflows horizontally.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Flex direction="col" gap="md">
+              <Banner tone="warning">
+                <Banner.Content>
+                  <Banner.Title>
+                    ご契約中のプランのお支払い期限が過ぎています。未払いの状態が続く場合、組織内のすべてのサービスが自動的に停止されます
+                  </Banner.Title>
+                  <Banner.Description>
+                    請求書番号 INV-2026-08-0042
+                    のお支払いが確認できていません。お支払い方法の更新、または経理担当者への再送をお願いします。
+                  </Banner.Description>
+                </Banner.Content>
+                <Banner.Actions>
+                  <Button size="sm" variant="outline">
+                    請求書を再送
+                  </Button>
+                  <Button size="sm">お支払い方法を更新</Button>
+                </Banner.Actions>
+              </Banner>
+              <Banner tone="info">
+                <Banner.Content>
+                  <Banner.Title>
+                    A scheduled maintenance window will interrupt single sign-on for all connected
+                    services this weekend
+                  </Banner.Title>
+                  <Banner.Description>
+                    Between Saturday 22:00 and Sunday 02:00 (JST), sign-in and token refresh will be
+                    unavailable. Active sessions continue to work.
+                  </Banner.Description>
+                </Banner.Content>
+                <Banner.Actions>
+                  <Button size="sm" variant="outline">
+                    View status page
+                  </Button>
+                </Banner.Actions>
+              </Banner>
+              <Banner tone="destructive">
+                <Banner.Content>
+                  <Banner.Title>
+                    Phiên hỗ trợ từ xa đang hoạt động. Nhân viên hỗ trợ hiện có thể xem toàn bộ dữ
+                    liệu tổ chức của bạn cho đến khi phiên kết thúc
+                  </Banner.Title>
+                  <Banner.Description>
+                    Nếu bạn không yêu cầu phiên hỗ trợ này, hãy kết thúc ngay và đổi mật khẩu quản
+                    trị của tổ chức.
+                  </Banner.Description>
+                </Banner.Content>
+                <Banner.Actions>
+                  <Button size="sm" variant="outline">
+                    Kết thúc phiên
+                  </Button>
+                </Banner.Actions>
+              </Banner>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/feedback/danger-confirm.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { AlertDialog } from "@godxjp/ui/feedback";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * DangerConfirm recipe (godxui#193) — high-stakes deletion built on the AlertDialog preset.
+ * No new component: `challenge` gates the confirm button behind an exact typed slug, and `stepUp`
+ * runs an async passkey / 2FA re-auth before onConfirm fires. Both force the destructive tone.
+ * Mirrors DXS SCR-203 (org delete by slug) and SCR-209 (refund with step-up).
+ */
+export default function Demo() {
+  const [orgOpen, setOrgOpen] = useState(false);
+  const [refundOpen, setRefundOpen] = useState(false);
+
+  return (
+    <PageContainer
+      title="DangerConfirm"
+      subtitle="typed-challenge + step-up destructive confirmation · AlertDialog recipe"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Organization delete · typed slug challenge</CardTitle>
+            <CardDescription>
+              The confirm button stays disabled until the operator types the exact organization slug
+              (<code>acme-inc</code>). A typed challenge always forces the destructive tone and a
+              soft danger header band.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button variant="destructive" size="sm" onClick={() => setOrgOpen(true)}>
+              Delete organization
+            </Button>
+            <AlertDialog
+              open={orgOpen}
+              onOpenChange={setOrgOpen}
+              title="Delete “Acme Inc.” permanently?"
+              description="This removes every workspace, member and billing record. This cannot be undone."
+              challenge="acme-inc"
+              confirmLabel="Delete organization"
+              cancelLabel="Keep organization"
+              onConfirm={async () => {
+                await new Promise<void>((r) => setTimeout(r, 800));
+                setOrgOpen(false);
+              }}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Refund · step-up re-authentication</CardTitle>
+            <CardDescription>
+              A privileged action guarded by <code>stepUp</code>: the async passkey / 2FA check runs
+              first, the button shows a verifying state, and a failed check keeps the dialog open
+              with an announced error. onConfirm only fires after step-up resolves truthy.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button variant="destructive" size="sm" onClick={() => setRefundOpen(true)}>
+              Issue full refund
+            </Button>
+            <AlertDialog
+              open={refundOpen}
+              onOpenChange={setRefundOpen}
+              title="Issue a full refund of ¥48,000?"
+              description="The charge is reversed immediately and the customer is notified."
+              confirmLabel="Refund now"
+              cancelLabel="Cancel"
+              variant="destructive"
+              stepUp={async () => {
+                // A real consumer triggers a passkey / WebAuthn or TOTP challenge here.
+                await new Promise<void>((r) => setTimeout(r, 600));
+                return true;
+              }}
+              onConfirm={async () => {
+                await new Promise<void>((r) => setTimeout(r, 500));
+                setRefundOpen(false);
+              }}
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/feedback/dialog-touch.tsx

@@ -0,0 +1,24 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "@godxjp/ui/feedback";
+import { Button } from "@godxjp/ui/general";
+import { PageContainer } from "@godxjp/ui/layout";
+export default function Demo() {
+  return (
+    <PageContainer title="Dialog touch" subtitle="Touch target and close behavior verification">
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button>Open touch dialog</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Touch dialog</DialogTitle>
+          <DialogDescription>Touch target and close behavior verification.</DialogDescription>
+        </DialogContent>
+      </Dialog>
+    </PageContainer>
+  );
+}