@godxjp/ui 19.1.0 → 19.3.1

package/docs/data-display/qr-code.tsx

@@ -0,0 +1,68 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CredentialReveal,
+  QrCode,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const TOTP_URI =
+  "otpauth://totp/GoDX:admin@example.com?secret=JBSWY3DPEHPK3PXP&issuer=GoDX&digits=6&period=30";
+
+export default function Demo() {
+  return (
+    <PageContainer title="QrCode" subtitle="ネットワーク送信なしで機密値を端末内エンコード">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>二要素認証の登録</CardTitle>
+            <CardDescription>
+              認証アプリでQRコードを読み取ります。読み取れない場合は手動キーを使用できます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <QrCode value={TOTP_URI} label="二要素認証の登録用QRコード" size="lg" />
+              <CredentialReveal
+                secret="JBSWY3DPEHPK3PXP"
+                label="手動設定キー"
+                warning={null}
+                defaultRevealed
+                size="sm"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Size</CardTitle>
+            <CardDescription>
+              xs / sm / md / lg。SVGのため高DPIでも鮮明で、狭い画面では利用可能幅に収まります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="lg" wrap align="start">
+              {(["xs", "sm", "md", "lg"] as const).map((size) => (
+                <Flex key={size} direction="col" gap="xs" align="center">
+                  <QrCode
+                    value={`https://godx.jp/qr/${size}`}
+                    label={`${size} QRコード`}
+                    size={size}
+                  />
+                  <Text as="span" size="sm" tone="muted">
+                    {size}
+                  </Text>
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/scroll-area.tsx

@@ -0,0 +1,303 @@
+import * as React from "react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ScrollArea,
+  ScrollBar,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * ScrollArea — custom scrollbar container. ALWAYS set an explicit height/max-height
+ * (vertical) or width (horizontal) on the wrapper or the scrollbar never appears.
+ * `type` controls when the bar is visible; `ScrollBar orientation="horizontal"`
+ * adds a horizontal bar. Composed only from real @godxjp/ui components.
+ */
+const entries = Array.from(
+  { length: 18 },
+  (_, i) => `仕訳 #2024-${String(312 - i).padStart(4, "0")}`,
+);
+
+const shortEntries = entries.slice(0, 3);
+
+/**
+ * The live-stream screen (gh#311). A deterministic clock: the demo never reads `Date.now()`, so the
+ * frame is stable, and every timestamp still goes through `Intl.DateTimeFormat` (IANA tz, 24h).
+ */
+const STREAM_EPOCH = Date.UTC(2026, 2, 3, 0, 30, 0);
+const STREAM_STEP_MS = 45_000;
+const timeFormatter = new Intl.DateTimeFormat("ja-JP", {
+  hour: "2-digit",
+  minute: "2-digit",
+  timeZone: "Asia/Tokyo",
+});
+
+type StreamPost = { id: number; author: string; body: string };
+
+const AUTHORS = ["佐藤 千尋", "山本 直樹", "Nguyễn Minh", "経理ボット"];
+
+const makePost = (id: number): StreamPost => ({
+  id,
+  author: AUTHORS[((id % AUTHORS.length) + AUTHORS.length) % AUTHORS.length],
+  body:
+    id % 4 === 0
+      ? `月次締めのバッチが完了しました（#${String(1000 + id)}）。`
+      : `伝票 #2026-${String(1000 + id)} を確認しました。`,
+});
+
+const INITIAL_POSTS = Array.from({ length: 24 }, (_, index) => makePost(index + 1));
+
+const columns = [
+  "勘定科目",
+  "借方",
+  "貸方",
+  "摘要",
+  "部門",
+  "プロジェクト",
+  "取引先",
+  "登録者",
+  "承認者",
+];
+
+export default function Demo() {
+  const [posts, setPosts] = React.useState<StreamPost[]>(INITIAL_POSTS);
+  const [oldestLoaded, setOldestLoaded] = React.useState(1);
+  const [newestSeen, setNewestSeen] = React.useState(INITIAL_POSTS.length);
+  const [anchored, setAnchored] = React.useState(true);
+  const streamViewport = React.useRef<HTMLDivElement>(null);
+
+  const receiveNewPost = () => {
+    const id = newestSeen + 1;
+    setNewestSeen(id);
+    setPosts((current) => [...current, makePost(id)]);
+  };
+
+  const loadOlderPage = () => {
+    const from = oldestLoaded - 10;
+    setOldestLoaded(from);
+    setPosts((current) => [
+      ...Array.from({ length: 10 }, (_, index) => makePost(from + index)),
+      ...current,
+    ]);
+  };
+
+  // The keyboard route back to the newest item. Anchoring must never be the ONLY way there, so the
+  // affordance is a real Button, not a scroll gesture.
+  const jumpToNewest = () => {
+    const viewport = streamViewport.current;
+    if (viewport) viewport.scrollTop = viewport.scrollHeight;
+  };
+
+  return (
+    <PageContainer
+      title="ScrollArea"
+      subtitle="Custom scrollbar container · needs an explicit height"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ライブ配信ログ（anchor=&quot;bottom&quot;）</CardTitle>
+            <CardDescription>
+              チャットや監査ログのように増え続けるストリーム。最下部にいる間だけ新着に追従し、履歴を読むために少しでも上へスクロールしたら二度と勝手に動きません（WCAG
+              3.2.5）。「過去を読み込む」で上に挿入しても、いま読んでいる行は動きません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card variant="outline" className="h-64 w-full">
+              <CardContent flush>
+                <ScrollArea
+                  anchor="bottom"
+                  viewportRef={streamViewport}
+                  onAnchoredChange={setAnchored}
+                  type="always"
+                >
+                  <CardContent>
+                    <Flex direction="col">
+                      {posts.map((post) => (
+                        <Flex key={post.id} direction="col" gap="xs">
+                          <Flex gap="sm" align="baseline">
+                            <Text size="sm" weight="medium">
+                              {post.author}
+                            </Text>
+                            <Text size="xs" tone="muted">
+                              {timeFormatter.format(
+                                new Date(STREAM_EPOCH + post.id * STREAM_STEP_MS),
+                              )}
+                            </Text>
+                          </Flex>
+                          <Text size="sm" tone="muted">
+                            {post.body}
+                          </Text>
+                        </Flex>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          </CardContent>
+          <CardFooter>
+            <Flex gap="sm" wrap>
+              <Button type="button" variant="outline" onClick={loadOlderPage}>
+                過去を読み込む
+              </Button>
+              <Button type="button" variant="outline" onClick={receiveNewPost}>
+                新着を受信
+              </Button>
+              <Button type="button" onClick={jumpToNewest} disabled={anchored}>
+                最新へ移動
+              </Button>
+              {/* The stream itself carries no aria-live — a live region on a scroll container
+                  re-announces on every reflow. The follow state belongs in its own small region. */}
+              <Text size="xs" tone="muted" role="status">
+                {anchored ? "最新に追従中" : "履歴を閲覧中（追従は停止）"}
+              </Text>
+            </Flex>
+          </CardFooter>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>anchorOffset（追従とみなす帯の広さ）</CardTitle>
+            <CardDescription>
+              既定は --scroll-area-anchor-offset（3rem）。0 を渡すと「完全に最下部」でなければ
+              追従しません。行の高さが大きいサービスは theme 側でこのトークンを上げます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card variant="outline" className="h-40 w-full">
+              <CardContent flush>
+                <ScrollArea anchor="bottom" anchorOffset={0} type="always">
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {entries.map((e) => (
+                        <Text key={e} size="sm" className="tabular-nums">
+                          {e}
+                        </Text>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>固定高さのリスト（縦スクロール）</CardTitle>
+            <CardDescription>
+              ラッパーに h-56 を指定すると、その高さがスクロール領域のビューポートになります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card variant="outline" className="h-56 w-full">
+              <CardContent flush>
+                <ScrollArea>
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {entries.map((e) => (
+                        <div key={e} className="text-sm tabular-nums">
+                          {e}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>type=&quot;always&quot;（バーを常時表示）</CardTitle>
+            <CardDescription>
+              既定の hover はホバー時のみバーを表示します。always
+              は内容が溢れる限りバーを常に表示します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card variant="outline" className="h-56 w-full">
+              <CardContent flush>
+                <ScrollArea type="always">
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {entries.map((e) => (
+                        <div key={e} className="text-sm tabular-nums">
+                          {e}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              横スクロール（ScrollBar orientation=&quot;horizontal&quot;）
+            </CardTitle>
+            <CardDescription>
+              横方向のバーは明示的に ScrollBar
+              を子要素として配置します。中身は幅を指定して溢れさせます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card variant="outline" className="w-full">
+              <CardContent flush>
+                <ScrollArea>
+                  <CardContent>
+                    <Flex gap="lg" className="w-max">
+                      {columns.map((c) => (
+                        <div key={c} className="text-sm whitespace-nowrap tabular-nums">
+                          {c}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                  <ScrollBar orientation="horizontal" />
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>内容が収まる場合（バー非表示）</CardTitle>
+            <CardDescription>
+              中身が高さに収まるときはスクロールバーは表示されません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card variant="outline" className="h-56 w-full">
+              <CardContent flush>
+                <ScrollArea type="always">
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {shortEntries.map((e) => (
+                        <div key={e} className="text-sm tabular-nums">
+                          {e}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/service-launcher-card.tsx

@@ -0,0 +1,145 @@
+import {
+  BookPlus,
+  Clock3,
+  Database,
+  LayoutGrid,
+  PlugZap,
+  ReceiptText,
+  ShieldCheck,
+} from "lucide-react";
+
+import {
+  ServiceCatalogCta,
+  ServiceLauncherCard,
+  ServiceLauncherCardSkeleton,
+} from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+
+/**
+ * ServiceLauncherCard — organization-scoped launcher states. The consumer supplies every status,
+ * entitlement reason and action; the component owns only the shared visual contract.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="ServiceLauncherCard"
+      subtitle="利用可能・制限中・読み込み中・カタログ導線"
+    >
+      <Flex direction="col" gap="lg">
+        <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
+          <ServiceLauncherCard
+            icon={Clock3}
+            title="勤怠管理"
+            statusLabel="LIVE"
+            statusTone="success"
+            description="打刻、シフト、休暇申請を一つのワークスペースで管理します。"
+            metadata="attendance.godx.jp · Standard"
+            action={<Button>サービスを開く</Button>}
+          />
+          <ServiceLauncherCard
+            icon={ReceiptText}
+            title="請求管理"
+            statusLabel="要契約"
+            statusTone="warning"
+            description="請求書、支払い方法、利用明細を管理します。"
+            metadata="billing.godx.jp"
+            disabledReason="この組織には有効な請求管理プランがありません。"
+            action={<Button disabled>サービスを開く</Button>}
+          />
+          <ServiceLauncherCard
+            icon={ShieldCheck}
+            title="高度なセキュリティ管理と監査ログ"
+            statusLabel="管理者限定"
+            statusTone="info"
+            description="権限、二要素認証ポリシー、監査イベントを確認します。"
+            metadata="security.godx.jp · Enterprise"
+            action={<Button variant="outline">権限を確認</Button>}
+          />
+          <ServiceLauncherCardSkeleton label="サービスを読み込み中" />
+          <ServiceCatalogCta
+            title="サービスカタログから追加"
+            action={<Button variant="outline">カタログを見る</Button>}
+          />
+        </ResponsiveGrid>
+
+        {/* Remaining status tones — the label text is always the consumer's own copy; the
+         * component maps only the tone to a semantic Badge. */}
+        <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
+          <ServiceLauncherCard
+            icon={Database}
+            titleLevel={3}
+            title="データ連携基盤"
+            statusLabel="停止中"
+            statusTone="destructive"
+            description="外部システムとのデータ同期ジョブを管理します。"
+            metadata="sync.godx.jp · Enterprise"
+            disabledReason="このサービスは組織の管理者によって停止されています。"
+            action={<Button disabled>サービスを開く</Button>}
+          />
+          <ServiceLauncherCard
+            icon={PlugZap}
+            titleLevel={3}
+            title="連携アプリ"
+            statusLabel="準備中"
+            statusTone="neutral"
+            description="サードパーティ連携の接続とスコープを設定します。"
+            action={<Button variant="outline">設定を開く</Button>}
+          />
+          <ServiceLauncherCard
+            icon={BookPlus}
+            titleLevel={3}
+            title="ナレッジベース"
+            statusLabel="アーカイブ"
+            statusTone="muted"
+            description="社内ドキュメントと運用手順を保管します。"
+            metadata="kb.godx.jp · Free"
+            action={<Button variant="outline">アーカイブを見る</Button>}
+          />
+          {/* The companion CTA takes an explicit glyph when the default `Plus` is too generic. */}
+          <ServiceCatalogCta
+            icon={LayoutGrid}
+            title="すべてのサービスを見る"
+            action={<Button variant="ghost">カタログ一覧</Button>}
+          />
+        </ResponsiveGrid>
+
+        {/* Long JA / EN / VI names + an unbreakable hostname: the tile must wrap, never widen its
+         * grid column. Same 3 → 2 → 1 grid, no page-local CSS anywhere. */}
+        <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
+          <ServiceLauncherCard
+            icon={ShieldCheck}
+            titleLevel={3}
+            title="グローバル人事情報基盤・従業員セルフサービスポータル（アジア太平洋地域）"
+            statusLabel="LIVE"
+            statusTone="success"
+            description="人事マスタ、勤怠、給与、評価を一元管理する統合ワークスペースです。"
+            metadata="workforce-identity-administration.ap-northeast-1.godx.jp · Enterprise"
+            action={<Button>サービスを開く</Button>}
+          />
+          <ServiceLauncherCard
+            icon={ShieldCheck}
+            titleLevel={3}
+            title="Acme Global Workforce Identity & Entitlement Administration Console"
+            statusLabel="Attention required"
+            statusTone="warning"
+            description="Review pending entitlement requests before the next access certification."
+            metadata="workforce-identity-administration.ap-northeast-1.godx.jp · Enterprise"
+            disabledReason="Your organization has no active subscription for this service yet."
+            action={<Button disabled>Open service</Button>}
+          />
+          <ServiceLauncherCard
+            icon={ShieldCheck}
+            titleLevel={3}
+            title="Cổng quản trị định danh và phân quyền nhân sự toàn cầu của doanh nghiệp"
+            statusLabel="Chỉ quản trị viên"
+            statusTone="info"
+            description="Xem lại quyền truy cập, chính sách xác thực hai yếu tố và nhật ký kiểm toán."
+            metadata="workforce-identity-administration.ap-southeast-1.godx.jp · Enterprise"
+            action={<Button variant="outline">Xem quyền truy cập</Button>}
+          />
+        </ResponsiveGrid>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/stat-card.tsx

@@ -0,0 +1,99 @@
+import { StatCard } from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+import { CheckCircle2, Package, Ship, TrendingUp, Wallet } from "lucide-react";
+
+/**
+ * StatCard — KPI tile. It IS already a bordered Card, so it renders DIRECTLY in
+ * ResponsiveGrid — never wrapped in Card/CardContent (double border). Section
+ * titles are headings, not Cards. delta is sign-aware (+green / -red; inverse
+ * flips it). Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="StatCard"
+      subtitle="KPI tiles · label · value · delta · hint, in a ResponsiveGrid"
+    >
+      <Flex direction="col" gap="lg">
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            KPI row (stacked)
+          </Text>
+          <ResponsiveGrid columns={{ sm: 2, md: 4 }}>
+            <StatCard label="月次売上" value="¥8,200,000" delta="+12%" hint="先月比" />
+            <StatCard label="請求件数" value="312" delta="+4%" />
+            <StatCard label="売掛金残高" value="¥1,284,500" hint="未回収 18件" />
+            <StatCard label="回収率" value="96.8%" delta="+1.2%" />
+          </ResponsiveGrid>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            icon medallion (decorative · tinted via --stat-card-icon-* tokens)
+          </Text>
+          <ResponsiveGrid columns={{ sm: 2, md: 4 }}>
+            <StatCard icon={Package} label="処理中の注文" value="4" delta="+2" />
+            <StatCard icon={Ship} label="輸送中" value="2" hint="日本 → ベトナム" />
+            <StatCard icon={CheckCircle2} label="今月の配達" value="11" delta="+18%" />
+            <StatCard icon={Wallet} label="ウォレット残高" value="¥185,000" />
+          </ResponsiveGrid>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            Delta tone · sign-aware (inverse flips it)
+          </Text>
+          <ResponsiveGrid columns={{ sm: 2, md: 3 }}>
+            <StatCard label="新規取引先" value="24" delta="+6" />
+            <StatCard label="遅延請求書" value="7" delta="-3" />
+            <StatCard
+              label="平均処理コスト"
+              value="¥1,180"
+              delta="-15%"
+              inverse
+              hint="低いほど良い"
+            />
+          </ResponsiveGrid>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            Inline layout (narrow panels)
+          </Text>
+          <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
+            <StatCard layout="inline" label="契約金額" value="¥4,800,000" />
+            <StatCard layout="inline" label="消費税" value="¥480,000" hint="10%" />
+          </ResponsiveGrid>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            align=&quot;end&quot; · icon label · neutral delta
+          </Text>
+          <ResponsiveGrid columns={{ sm: 2, md: 4 }}>
+            <StatCard
+              label="当期利益"
+              value="¥3,120,000"
+              delta="+8%"
+              align="end"
+              hint="既定の密度 · 右寄せ"
+            />
+            <StatCard label="年間売上" value="¥98,400,000" delta="+11%" hint="ゆとりある密度" />
+            <StatCard
+              label={
+                <>
+                  <TrendingUp aria-hidden />
+                  成長率
+                </>
+              }
+              value="14.2%"
+              delta="+2.1%"
+            />
+            <StatCard label="客単価" value="¥6,400" delta="0%" hint="横ばい" />
+          </ResponsiveGrid>
+        </Flex>
+      </Flex>
+    </PageContainer>
+  );
+}