@godxjp/ui 19.0.0 → 19.2.0

package/docs/feedback/skeleton.tsx

@@ -0,0 +1,111 @@
+import {
+  Skeleton,
+  SkeletonDetail,
+  SkeletonRows,
+  SkeletonStat,
+  SkeletonTable,
+} from "@godxjp/ui/feedback";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+
+/**
+ * Skeleton · loading placeholders. Three levels:
+ *   Skeleton · custom pulsing block (h + w via className).
+ *   SkeletonTable · pre-mount DataTable placeholder (rows, columns props).
+ *   SkeletonStat · StatCard/KPI tile placeholder (no props; use in ResponsiveGrid).
+ *   SkeletonDetail · single-record detail placeholder (title + metadata rows, no props).
+ * Never use a spinner overlay on skeletonable content.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Skeleton"
+      subtitle="loading placeholders · Skeleton (custom block) · SkeletonTable (DataTable pre-mount) · SkeletonStat (KPI tile) · SkeletonDetail (record page)"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Skeleton · custom pulsing blocks</CardTitle>
+            <CardDescription>
+              Base primitive. Pass className for h + w. Use when SkeletonTable / SkeletonStat do not
+              match the target layout (e.g. a single loading line, a media placeholder, inline
+              metadata).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Skeleton className="h-5 w-48" />
+              <Skeleton className="h-4 w-72" />
+              <Skeleton className="h-4 w-60" />
+              <Flex direction="row" gap="sm" align="center" className="mt-2">
+                <Skeleton className="size-10 rounded-full" />
+                <Flex direction="col" gap="xs">
+                  <Skeleton className="h-4 w-32" />
+                  <Skeleton className="h-3 w-24" />
+                </Flex>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>SkeletonRows · generic repeated rows</CardTitle>
+            <CardDescription>
+              Use for non-table list layouts with deterministic row count.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SkeletonRows rows={3} columns={2} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>SkeletonTable · DataTable pre-mount placeholder</CardTitle>
+            <CardDescription>
+              Drop-in while deferred prop / query resolves. Match rows to page size and columns to
+              column count so the layout does not jump on hydration. Do NOT wrap in Card · it owns
+              its own structure.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="p-0">
+            <SkeletonTable rows={6} columns={6} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>SkeletonStat · KPI / StatCard tile placeholder</CardTitle>
+            <CardDescription>
+              Use inside a ResponsiveGrid · one SkeletonStat per expected StatCard. No props. Do NOT
+              wrap in an extra Card (SkeletonStat owns its own bordered box).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={4}>
+              <SkeletonStat />
+              <SkeletonStat />
+              <SkeletonStat />
+              <SkeletonStat />
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>SkeletonDetail · single-record detail loading state</CardTitle>
+            <CardDescription>
+              The ready-made detail placeholder (title + metadata rows). Reach for this on a record
+              / show page while the record loads · do NOT hand-compose it from base Skeleton blocks.
+              No props.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SkeletonDetail />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/feedback/toast.tsx

@@ -0,0 +1,135 @@
+import { Toaster, toast } 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";
+
+/**
+ * Toast (Toaster + sonner) · transient ephemeral feedback. Mount ONE <Toaster>
+ * at app root. Fire through the public @godxjp/ui/feedback toast export.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Toast"
+      subtitle="Toaster (mount once at root) + toast() from sonner · fire-and-forget ephemeral feedback"
+    >
+      {/* Mount Toaster once · in a real app this lives in the root layout */}
+      <Toaster richColors position="top-right" duration={4000} closeButton />
+
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Toast variants</CardTitle>
+            <CardDescription>
+              Import toast from sonner (not @godxjp/ui). success / error / warning / info for the
+              four semantic variants. Toasts auto-dismiss · use Alert for persistent messages.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap gap="md">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => toast.success("仕訳を保存しました")}
+              >
+                success
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => toast.error("保存に失敗しました · 再度お試しください")}
+              >
+                error
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => toast.warning("セッションの有効期限が近づいています")}
+              >
+                warning
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => toast.info("エクスポートを開始しました")}
+              >
+                info
+              </Button>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Programmatic dismiss</CardTitle>
+            <CardDescription>
+              Keep the returned id and dismiss a specific toast explicitly.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button
+              variant="outline"
+              onClick={() => {
+                const id = toast.loading("同期しています…", { duration: Infinity });
+                window.setTimeout(() => toast.dismiss(id), 500);
+              }}
+            >
+              同期トーストを表示して閉じる
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Soft destructive with undo action</CardTitle>
+            <CardDescription>
+              After a delete, surface an undo action via the toast action option. The user can
+              recover without a confirmation modal.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={() =>
+                toast("請求書 #INV-2024-0042 を削除しました", {
+                  action: {
+                    label: "元に戻す",
+                    onClick: () => toast.info("削除を取り消しました"),
+                  },
+                })
+              }
+            >
+              請求書を削除
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Promise toast (loading → success/error)</CardTitle>
+            <CardDescription>
+              toast.promise() tracks an async operation automatically · shows a loading state then
+              resolves to success or error. Ideal for background exports or bulk imports.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() =>
+                toast.promise(new Promise<void>((r) => setTimeout(r, 2000)), {
+                  loading: "CSV をエクスポート中...",
+                  success: "エクスポートが完了しました",
+                  error: "エクスポートに失敗しました",
+                })
+              }
+            >
+              CSV エクスポート
+            </Button>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/feedback/tooltip.tsx

@@ -0,0 +1,171 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@godxjp/ui/feedback";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Copy, Info, Pencil, Trash2 } from "lucide-react";
+
+/**
+ * Tooltip · self-providing (no app-level TooltipProvider needed). Compose
+ * Tooltip > TooltipTrigger (asChild on interactive elements) > TooltipContent.
+ * Read-only hints only · use Popover for interactive floating content.
+ *
+ * TooltipProvider stays OPTIONAL — reach for it only to tune the open/close
+ * delay across a whole cluster (e.g. a dense toolbar) in one place instead of
+ * repeating delayDuration on every Tooltip. See the last card.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Tooltip"
+      subtitle="hover/focus read-only hint · icon labels, truncated values, keyboard shortcuts"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Icon-only button labels</CardTitle>
+            <CardDescription>
+              Use TooltipTrigger asChild to avoid nesting a button inside a button. The tooltip
+              provides the accessible label for icon-only actions in DataTable rows.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="sm" align="center">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" aria-label="請求書をコピー">
+                    <Copy className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top">請求書をコピー</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    aria-label="削除"
+                    className="text-destructive hover:text-destructive"
+                  >
+                    <Trash2 className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top">削除 (元に戻せません)</TooltipContent>
+              </Tooltip>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Contextual help on a form label</CardTitle>
+            <CardDescription>
+              Wrap a non-interactive icon in a span with tabIndex=0 so keyboard users can focus it.
+              Explain accounting terms or beta features without cluttering the UI.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="sm" align="center">
+              <Text weight="medium">AR 残高</Text>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span tabIndex={0} className="text-muted-foreground cursor-help">
+                    <Info className="size-4" />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="right" className="max-w-56">
+                  売掛金の未回収合計額。請求書ステータスが「未払い」のものを集計しています。
+                </TooltipContent>
+              </Tooltip>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Disabled button reason</CardTitle>
+            <CardDescription>
+              Wrap a disabled Button in a Tooltip to explain why the action is unavailable.
+              TooltipTrigger asChild merges onto the disabled element correctly.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span tabIndex={0} className="inline-block">
+                  <Button disabled>承認申請</Button>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">全項目を入力してから申請できます</TooltipContent>
+            </Tooltip>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Keyboard shortcut hint</CardTitle>
+            <CardDescription>
+              Surface keyboard shortcuts on toolbar buttons without adding visible text to the UI.
+              delayDuration={0} for instant display on quick hover.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tooltip delayDuration={0}>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="sm">
+                  検索
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">⌘K でグローバル検索を開く</TooltipContent>
+            </Tooltip>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Shared delay across a toolbar (TooltipProvider)</CardTitle>
+            <CardDescription>
+              Wrap a cluster in TooltipProvider to set one delayDuration for every tooltip inside —
+              a dense toolbar feels snappy without repeating the prop on each Tooltip.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TooltipProvider delayDuration={0}>
+              <Flex direction="row" gap="sm" align="center">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button variant="ghost" size="icon" aria-label="編集">
+                      <Pencil className="size-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">編集</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button variant="ghost" size="icon" aria-label="複製">
+                      <Copy className="size-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">複製</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      aria-label="削除"
+                      className="text-destructive hover:text-destructive"
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">削除 (元に戻せません)</TooltipContent>
+                </Tooltip>
+              </Flex>
+            </TooltipProvider>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/feedback/two-factor-setup.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { TwoFactorSetup, type TwoFactorSetupLabels } from "@godxjp/ui/feedback";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const labels: TwoFactorSetupLabels = {
+  title: "二要素認証を有効にする",
+  description: "認証アプリでQRコードを読み取り、表示された6桁のコードを入力します。",
+  qrLabel: "認証アプリ登録用QRコード",
+  manualKeyLabel: "手動セットアップキー",
+  codeLabel: "確認コード",
+  codePlaceholder: "123 456",
+  recoveryNotice: "復旧コードは安全な場所に保存してください。再表示できません。",
+  cancel: "キャンセル",
+  confirm: "確認して有効化",
+  acknowledge: "保存しました",
+};
+
+/**
+ * TwoFactorSetup — controlled enrollment and one-time recovery-code journey. Persistence and
+ * network requests remain consumer-owned; this frame demonstrates the public state boundary.
+ */
+export default function Demo() {
+  const [open, setOpen] = useState(false);
+  const [code, setCode] = useState("");
+  const [recoveryCodes, setRecoveryCodes] = useState<string[]>([]);
+
+  const beginEnrollment = () => {
+    setCode("");
+    setRecoveryCodes([]);
+    setOpen(true);
+  };
+
+  return (
+    <PageContainer title="TwoFactorSetup" subtitle="登録 · OTP確認 · 復旧コード受領">
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>認証アプリを登録</CardTitle>
+          <CardDescription>6桁の確認コードが揃うまで有効化操作は利用できません。</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex direction="col" gap="md">
+            <Button onClick={beginEnrollment}>二要素認証を設定</Button>
+            <Text size="sm" tone="muted" aria-live="polite">
+              {recoveryCodes.length > 0
+                ? "復旧コードを表示しています。"
+                : "二要素認証はまだ設定されていません。"}
+            </Text>
+          </Flex>
+          <TwoFactorSetup
+            open={open}
+            onOpenChange={setOpen}
+            qrValue="otpauth://totp/Godx:tanaka@example.com?secret=JBSWY3DPEHPK3PXP&issuer=Godx"
+            manualKey="JBSW Y3DP EHPK 3PXP"
+            code={code}
+            onCodeChange={setCode}
+            onConfirm={() => setRecoveryCodes(["alpha-7k2m", "bravo-9p4x", "charlie-3d8q"])}
+            recoveryCodes={recoveryCodes}
+            onAcknowledge={() => setOpen(false)}
+            labels={labels}
+          />
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}