@godxjp/ui 31.31.8 → 32.0.1

package/docs/feedback/alert.tsx

@@ -1,248 +0,0 @@
-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. 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/auth-expiry.tsx

@@ -1,104 +0,0 @@
-import { useState } from "react";
-import { QueryClient, QueryClientProvider, useMutation, useQuery } from "@tanstack/react-query";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  DataTable,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { SkeletonTable } from "@godxjp/ui/feedback";
-import { Button, Text } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { AlertMutationFeedback, AuthExpiryProvider, DataState } from "@godxjp/ui/query";
-
-/**
- * AuthExpiryProvider · the app root owns an expired session (gh#1022). Every DataState /
- * InfiniteQueryState / AlertMutationFeedback / AlertQueryError underneath calls `onAuthExpired`
- * automatically, once for any number of simultaneous 401s, and shows a neutral pending state
- * instead of an error alert. A real app redirects to its IdP here:
- *   window.location.assign(`/auth/login?return_to=${encodeURIComponent(location.href)}`)
- */
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
-});
-
-type Member = { id: string; name: string };
-
-const expired = () => Object.assign(new Error("Access token expired"), { status: 401 });
-
-function MembersCard() {
-  const { t } = useTranslation();
-  const columns: ColumnDef<Member>[] = [
-    { key: "id", header: "ID" },
-    { key: "name", header: t("authExpiryDocs.nameColumn") },
-  ];
-  const query = useQuery<Member[]>({
-    queryKey: ["auth-expiry-members"],
-    queryFn: async () => {
-      throw expired();
-    },
-  });
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle level={2}>{t("authExpiryDocs.membersTitle")}</CardTitle>
-        <CardDescription>A 401 keeps the skeleton and announces the redirect.</CardDescription>
-      </CardHeader>
-      <CardContent flush>
-        <DataState query={query} skeleton={<SkeletonTable rows={3} columns={2} />}>
-          {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
-        </DataState>
-      </CardContent>
-    </Card>
-  );
-}
-
-function InviteCard() {
-  const { t } = useTranslation();
-  const mutation = useMutation({
-    mutationFn: async () => {
-      throw expired();
-    },
-  });
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle level={2}>{t("authExpiryDocs.inviteTitle")}</CardTitle>
-        <CardDescription>A 401 on submit shows a muted status line, not an alert.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Flex direction="col" gap="md" align="start">
-          <Button onClick={() => mutation.mutate()}>{t("authExpiryDocs.send")}</Button>
-          <AlertMutationFeedback mutation={mutation} />
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-export default function Demo() {
-  const [calls, setCalls] = useState(0);
-  return (
-    <QueryClientProvider client={queryClient}>
-      <AuthExpiryProvider onAuthExpired={() => setCalls((n) => n + 1)}>
-        <PageContainer
-          title="AuthExpiryProvider"
-          subtitle="Expired session handled once at the app root, never as a page error"
-        >
-          <Flex direction="col" gap="lg">
-            <Text size="sm" tone="muted">
-              onAuthExpired calls: {calls}
-            </Text>
-            <MembersCard />
-            <InviteCard />
-          </Flex>
-        </PageContainer>
-      </AuthExpiryProvider>
-    </QueryClientProvider>
-  );
-}

package/docs/feedback/banner.tsx

@@ -1,183 +0,0 @@
-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 — 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>
-  );
-}