@godxjp/ui 31.31.8 → 32.0.1

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

@@ -1,68 +0,0 @@
-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

@@ -1,420 +0,0 @@
-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, ResponsiveGrid } from "@godxjp/ui/layout";
-
-/**
- * ScrollArea — a native scrolling box. ALWAYS give it an explicit height/max-height
- * (vertical) or width (horizontal), or nothing ever overflows and no scrollbar appears.
- * `orientation` decides which axes may scroll. By default the PLATFORM draws the bar,
- * styled from the --scroll-area-* tokens — and on macOS/iPadOS with the system default
- * "Show scroll bars: when scrolling" that bar is an OVERLAY: it exists only while the
- * reader is already scrolling, so a wide area does not look scrollable at rest (gh#798).
- * `scrollbar="always"` forces a classic bar that occupies layout, from the same tokens.
- * 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. 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="Native scrolling, token-styled scrollbar · 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
-                  className="h-72"
-                  anchor="bottom"
-                  viewportRef={streamViewport}
-                  onAnchoredChange={setAnchored}
-                >
-                  <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 className="h-40" anchor="bottom" anchorOffset={0}>
-                  <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}>
-              scrollbar=&quot;always&quot; — 「スクロールバーが見えない」の答え
-            </CardTitle>
-            <CardDescription>
-              既定の <code>auto</code> はプラットフォームに任せます。macOS / iPadOS
-              のシステム既定「スクロール中にのみ表示」では、それは
-              <strong>オーバーレイのバー</strong>
-              です。つまり、すでにスクロールしている間しか存在しません。止まっている状態では、
-              この面がスクロールできることが一切わかりません（gh#798）。
-              下の2つは中身も高さも同一で、違うのは <code>scrollbar</code> だけです。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
-              <Flex direction="col" gap="xs">
-                <Text size="sm" tone="muted">
-                  scrollbar=&quot;auto&quot;（既定）— macOS では静止時にバーが出ない
-                </Text>
-                <Card variant="outline" className="w-full">
-                  <CardContent flush>
-                    <ScrollArea className="h-40">
-                      <CardContent>
-                        <Flex direction="col" gap="xs">
-                          {entries.map((e) => (
-                            <div key={`auto-${e}`} className="text-sm tabular-nums">
-                              {e}
-                            </div>
-                          ))}
-                        </Flex>
-                      </CardContent>
-                    </ScrollArea>
-                  </CardContent>
-                </Card>
-              </Flex>
-
-              <Flex direction="col" gap="xs">
-                <Text size="sm" tone="muted">
-                  scrollbar=&quot;always&quot; — レイアウトを占める古典的なバー
-                </Text>
-                <Card variant="outline" className="w-full">
-                  <CardContent flush>
-                    <ScrollArea className="h-40" scrollbar="always">
-                      <CardContent>
-                        <Flex direction="col" gap="xs">
-                          {entries.map((e) => (
-                            <div key={`always-${e}`} className="text-sm tabular-nums">
-                              {e}
-                            </div>
-                          ))}
-                        </Flex>
-                      </CardContent>
-                    </ScrollArea>
-                  </CardContent>
-                </Card>
-              </Flex>
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>固定高さのリスト（縦スクロール）</CardTitle>
-            <CardDescription>
-              ラッパーに h-56 を指定すると、その高さがスクロール領域のビューポートになります。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {/* THE HEIGHT GOES ON THE SCROLLAREA, not on an ancestor. It was on the outer Card,
-                and neither CardContent nor ScrollArea inherits a height from it — so the
-                ScrollArea grew to its content, `scrollHeight === clientHeight`, and the demo for
-                a scrolling component did not scroll. Measured on the published site before this
-                change. The page header says this rule outright; the example broke it. */}
-            <Card variant="outline" className="w-full">
-              <CardContent flush>
-                <ScrollArea className="h-56">
-                  <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}>ScrollArea</CardTitle>
-            <CardDescription>orientation="horizontal"</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ScrollArea orientation="horizontal">
-              <ResponsiveGrid flow="columns">
-                {columns.map((column) => (
-                  <Card key={column}>
-                    <CardContent solo>
-                      <Text tabular>{column}</Text>
-                    </CardContent>
-                  </Card>
-                ))}
-              </ResponsiveGrid>
-            </ScrollArea>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ScrollBar は何も描画しない（非推奨）</CardTitle>
-            <CardDescription>
-              v22 まではこの要素を置くことが軸を開く方法だったが、スクロールがブラウザ本来のものに
-              なったので ScrollBar は何も描画しない。下のカードには ScrollBar
-              が置いてあるが、横に動くのは orientation=&quot;both&quot; のおかげで、ScrollBar
-              のおかげではない。残っている &lt;ScrollBar&gt; は消して、軸は orientation で宣言する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Card variant="outline" className="h-24 w-full">
-              <CardContent flush>
-                <ScrollArea orientation="both">
-                  <ResponsiveGrid flow="columns">
-                    {columns.map((column) => (
-                      <Text key={column}>{column}</Text>
-                    ))}
-                  </ResponsiveGrid>
-                  <ScrollBar orientation="horizontal" />
-                </ScrollArea>
-              </CardContent>
-            </Card>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>両方向スクロール（orientation=&quot;both&quot;）</CardTitle>
-            <CardDescription>
-              縦にも横にも溢れうる面は orientation=&quot;both&quot;。以前は縦の ScrollArea に
-              ScrollBar を足して横軸を開けていたが、スクロールはブラウザ本来のものになったので、
-              軸を決めるのは orientation だけになった。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Card variant="outline" className="h-32 w-full">
-              <CardContent flush>
-                <ScrollArea orientation="both">
-                  <ResponsiveGrid flow="columns">
-                    {columns.map((column) => (
-                      <Text key={column}>{column}</Text>
-                    ))}
-                  </ResponsiveGrid>
-                </ScrollArea>
-              </CardContent>
-            </Card>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>スクロール領域に名前を付ける（label）</CardTitle>
-            <CardDescription>
-              溢れている間、ビューポートは Tab
-              で止まる（キーボードだけで中身を送るために必要）。その停止点は名前を持つ。既定は
-              「スクロール可能な領域」の翻訳で、画面がその領域を呼べるときは label
-              で「監査ログ」と名乗る。ロールはランドマークの region ではなく group
-              にしてある。同じ名前のランドマークが一画面に並ぶと axe landmark-unique
-              に触れるため。溢れていなければ停止点も role も名前も出ない（gh#821）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Card variant="outline" className="w-full">
-              <CardContent flush>
-                <ScrollArea className="h-40" label="監査ログ">
-                  <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}>内容が収まる場合（バー非表示）</CardTitle>
-            <CardDescription>
-              中身が高さに収まるときはスクロールバーは表示されません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {/* Same h-56 as above, DELIBERATELY not overflowing: `shortEntries` fits, so no bar
-                appears. This is the control case — it is only meaningful next to one that does
-                overflow, which is why the demo above had to be fixed first. */}
-            <Card variant="outline" className="w-full">
-              <CardContent flush>
-                <ScrollArea className="h-56">
-                  <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>
-  );
-}