@godxjp/ui 31.31.8 → 32.0.0

package/docs/navigation/pagination.tsx

@@ -1,293 +0,0 @@
-import { useState } from "react";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { Pagination } from "@godxjp/ui/navigation";
-
-/**
- * Pagination — fully controlled offset/page bar. Sits BELOW a table card.
- * Pass total as raw item count (not page count). onValueChange receives (page, pageSize).
- * Composed only from real @godxjp/ui components.
- */
-const yen = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" });
-
-const invoices = Array.from({ length: 47 }, (_, i) => ({
-  id: `INV-${String(i + 1).padStart(4, "0")}`,
-  partner: ["株式会社山田商事", "有限会社田中工業", "ABC株式会社", "合同会社鈴木", "株式会社佐藤"][
-    i % 5
-  ],
-  amount: (i + 1) * 38500 + 12000,
-  status: ["承認済", "未承認", "取消済"][i % 3],
-}));
-
-export default function Demo() {
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-
-  const [simplePage, setSimplePage] = useState(1);
-
-  const start = (page - 1) * pageSize;
-  const pageData = invoices.slice(start, start + pageSize);
-
-  function handleChange(p: number, ps: number) {
-    setPage(p);
-    setPageSize(ps);
-  }
-
-  return (
-    <PageContainer
-      title="Pagination"
-      subtitle="Fully controlled offset/page bar · total is raw item count, not page count"
-    >
-      <Flex direction="col" gap="lg">
-        {/* Full pagination below a Table */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>請求書一覧 (47 件)</CardTitle>
-            <CardDescription>
-              Pagination sits BELOW the card. value + pageSize are controlled state. showTotal shows
-              the built-in i18n count label. showSizeChanger lets users pick rows per page.
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>番号</TableHead>
-                  <TableHead>取引先</TableHead>
-                  <TableHead className="text-end">金額 (円)</TableHead>
-                  <TableHead>ステータス</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {pageData.map((inv) => (
-                  <TableRow key={inv.id}>
-                    <TableCell className="font-mono text-sm">{inv.id}</TableCell>
-                    <TableCell>{inv.partner}</TableCell>
-                    <TableCell className="text-end">{yen.format(inv.amount)}</TableCell>
-                    <TableCell>{inv.status}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-
-        {/* Pagination component itself — outside the card, below it */}
-        <Pagination
-          ariaLabel="請求書一覧のページネーション"
-          value={page}
-          total={invoices.length}
-          pageSize={pageSize}
-          showTotal
-          showSizeChanger
-          pageSizeOptions={[5, 10, 20, 50]}
-          onValueChange={handleChange}
-        />
-
-        {/* Regression: total=0, exactly one page, multiple pages, + the single-page opt-in. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>境界状態 · 0 件 / 1 ページ / 複数ページ</CardTitle>
-            <CardDescription>
-              Pagination は複数ページ間のナビゲーション。0 件と 1 ページ（total ≤ pageSize）は
-              既定で「非表示」になる（下の 2 例は何もレンダリングしない）。合計だけ見せたい 1
-              ページでは hideOnSinglePage={"{false}"} で明示的にオプトインする。複数ページでは 1
-              行のまま折り返さずに全ページャを表示する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {/* total=0 → hidden (nothing renders). */}
-              <Pagination total={0} pageSize={10} showTotal />
-              {/* exactly one page → hidden by default (nothing renders). */}
-              <Pagination total={8} pageSize={10} showTotal />
-              {/* single-page opt-in → the bar renders so the total stays visible. */}
-              <Pagination
-                total={8}
-                pageSize={10}
-                hideOnSinglePage={false}
-                showTotal={(total, [from, to]) => `${from}〜${to} / ${total} 件`}
-                ariaLabel="1 ページのみ・opt-in 表示のページネーション"
-              />
-              {/* multiple pages → full pager, one horizontal row, no wrap. */}
-              <Pagination
-                value={2}
-                total={137}
-                pageSize={10}
-                showTotal
-                showSizeChanger
-                onValueChange={() => {}}
-                ariaLabel="複数ページの境界状態のページネーション"
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* Long localized total label — the row stays ONE line and never wraps on desktop. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>長いローカライズ済みラベル · 折り返さない</CardTitle>
-            <CardDescription>
-              長い合計ラベル（JA/VI）でも Pagination は 1 行を維持する。ラベルは省略記号で切り詰め、
-              ページ送りを 2 行目に押し出さない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Pagination
-                value={3}
-                total={1284}
-                pageSize={20}
-                showSizeChanger
-                showTotal={(total, [from, to]) =>
-                  `${from.toLocaleString("ja-JP")}〜${to.toLocaleString("ja-JP")} 件目 / 全 ${total.toLocaleString("ja-JP")} 件の請求書を表示中`
-                }
-                onValueChange={() => {}}
-                ariaLabel="日本語ラベルのページネーション"
-              />
-              <Pagination
-                value={3}
-                total={1284}
-                pageSize={20}
-                showSizeChanger
-                showTotal={(total, [from, to]) =>
-                  `Đang hiển thị ${from}–${to} trong tổng số ${total.toLocaleString("vi-VN")} hoá đơn`
-                }
-                onValueChange={() => {}}
-                ariaLabel="Phân trang nhãn tiếng Việt"
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* showTotal custom label */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>showTotal · カスタムラベル関数</CardTitle>
-            <CardDescription>
-              showTotal に関数を渡すと範囲ラベルをカスタマイズできる。 例: &quot;1〜10 / 47
-              件の請求書&quot;
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Pagination
-              ariaLabel="カスタムラベル例のページネーション"
-              value={page}
-              total={invoices.length}
-              pageSize={pageSize}
-              showTotal={(total, [from, to]) => `${from}〜${to} / ${total} 件の請求書`}
-              onValueChange={handleChange}
-            />
-          </CardContent>
-        </Card>
-
-        {/* Simple mode for compact contexts */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Simple モード · コンパクト表示</CardTitle>
-            <CardDescription>
-              simple=true でモーダルフッターやサイドバーに収まるコンパクトな Prev / n/total / Next
-              を表示する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Pagination
-              ariaLabel="コンパクト例のページネーション"
-              simple
-              value={simplePage}
-              total={200}
-              pageSize={20}
-              onValueChange={(p) => setSimplePage(p)}
-            />
-          </CardContent>
-        </Card>
-
-        {/* Disabled state */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Disabled 状態</CardTitle>
-            <CardDescription>
-              disabled=true でデータ読み込み中などページ送りを一時的に無効にする。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Pagination
-              ariaLabel="無効状態例のページネーション"
-              value={1}
-              total={100}
-              pageSize={10}
-              showTotal
-              disabled
-              onValueChange={() => {}}
-            />
-          </CardContent>
-        </Card>
-
-        {/* Ant Design parity surface — showQuickJumper / size / align / responsive */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>showQuickJumper · size · align (Ant Design パリティ)</CardTitle>
-            <CardDescription>
-              showQuickJumper はページ番号を直接入力するフィールド(Enter または goButton
-              で確定、範囲外はクランプ)。size=&quot;sm&quot; はバーに --control-height
-              を一度だけ再束縛するので、ページボタン・サイズ変更・ジャンプ欄が同時に縮む。align
-              は論理軸(start / center / end)。responsive は既定で有効で、モバイル幅では simple
-              形態に畳む。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              <div id="antd-pagination-jumper">
-                <Pagination
-                  ariaLabel="クイックジャンパー付きページネーション"
-                  value={3}
-                  total={95}
-                  pageSize={10}
-                  showTotal
-                  showSizeChanger
-                  showQuickJumper
-                  onValueChange={() => {}}
-                />
-              </div>
-              <div id="antd-pagination-sm">
-                <Pagination
-                  ariaLabel="小サイズ・中央寄せのページネーション"
-                  value={3}
-                  total={95}
-                  pageSize={10}
-                  size="sm"
-                  align="center"
-                  showQuickJumper={{ goButton: "移動" }}
-                  onValueChange={() => {}}
-                />
-              </div>
-              <div id="antd-pagination-start">
-                <Pagination
-                  ariaLabel="先頭寄せのページネーション"
-                  value={3}
-                  total={95}
-                  pageSize={10}
-                  align="start"
-                  onValueChange={() => {}}
-                />
-              </div>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/navigation/steps.tsx

@@ -1,315 +0,0 @@
-import { useState } from "react";
-
-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 { Steps } from "@godxjp/ui/navigation";
-
-/**
- * Steps — multi-step progress indicator. Horizontal or vertical, default or dot style.
- * Drive current from state; use status='error' to mark the active step failed.
- * Composed only from real @godxjp/ui components.
- */
-const approvalSteps = [
-  { title: "申請", description: "申請者が提出" },
-  { title: "一次審査", description: "部門長レビュー" },
-  { title: "経理承認", description: "経理部チェック" },
-  { title: "完了", description: "支払処理済" },
-];
-
-const onboardingSteps = [
-  { title: "基本情報", subtitle: "必須" },
-  { title: "法人設定", subtitle: "税務情報" },
-  { title: "銀行口座", subtitle: "入出金" },
-  { title: "確認・完了" },
-];
-
-export default function Demo() {
-  const [approvalCurrent, setApprovalCurrent] = useState(1);
-  const [wizardCurrent, setWizardCurrent] = useState(0);
-  /* Seeded TRUE so `status="error"` paints on mount. The toggle below is still the point of the
-   * demo, but starting from `false` meant the error state was reachable only by clicking —
-   * and a surface that needs an interaction is a surface no sweep measures (gh#612), which is
-   * how `.ui-steps-title[data-status="error"]` kept the destructive FILL tier unnoticed. */
-  const [hasError, setHasError] = useState(true);
-
-  return (
-    <PageContainer
-      title="Steps"
-      subtitle="Horizontal + vertical, default + dot · drive current from state"
-    >
-      <Flex direction="col" gap="lg">
-        {/* Horizontal — default style with descriptions */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>水平 · default スタイル (経費承認フロー)</CardTitle>
-            <CardDescription>
-              items に title + description を渡す。current は 0-based index。 前のステップは
-              finish、現在は process、後のステップは wait。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Steps value={approvalCurrent} items={approvalSteps} />
-          </CardContent>
-        </Card>
-
-        {/* Interactive — advance/retreat */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>インタラクティブ · ステップを進む / 戻る</CardTitle>
-            <CardDescription>
-              onValueChange を渡すと各ステップがクリッカブルになる。ボタンで value
-              を制御することもできる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Steps
-                value={approvalCurrent}
-                items={approvalSteps}
-                onValueChange={setApprovalCurrent}
-              />
-              <Flex direction="row" gap="sm">
-                <Button
-                  size="sm"
-                  variant="outline"
-                  disabled={approvalCurrent === 0}
-                  onClick={() => setApprovalCurrent((c) => c - 1)}
-                >
-                  戻る
-                </Button>
-                <Button
-                  size="sm"
-                  disabled={approvalCurrent >= approvalSteps.length - 1}
-                  onClick={() => setApprovalCurrent((c) => c + 1)}
-                >
-                  次へ
-                </Button>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* Error status on current step */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>status=&quot;error&quot; — 現在ステップをエラー表示</CardTitle>
-            <CardDescription>
-              status prop を error にするとアクティブステップが赤くなる。
-              バリデーション失敗時にフォームと組み合わせて使う。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Steps value={2} status={hasError ? "error" : "process"} items={approvalSteps} />
-              <Button size="sm" variant="outline" onClick={() => setHasError((e) => !e)}>
-                {hasError ? "エラーをクリア" : "エラーを発生させる"}
-              </Button>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* Vertical — default style */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>垂直 · default スタイル (法人オンボーディング)</CardTitle>
-            <CardDescription>
-              orientation=&quot;vertical&quot; でサイドバーやサイドパネルに収まる縦型レイアウト。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="xl">
-              <Steps
-                orientation="vertical"
-                value={wizardCurrent}
-                items={onboardingSteps}
-                onValueChange={setWizardCurrent}
-              />
-              <Flex direction="col" gap="md" className="flex-1">
-                <Text as="p" weight="medium">
-                  ステップ {wizardCurrent + 1}: {onboardingSteps[wizardCurrent].title}
-                </Text>
-                <Text as="p" tone="muted">
-                  このステップのフォームコンテンツがここに表示されます。
-                </Text>
-                <Flex direction="row" gap="sm">
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    disabled={wizardCurrent === 0}
-                    onClick={() => setWizardCurrent((c) => c - 1)}
-                  >
-                    戻る
-                  </Button>
-                  <Button
-                    size="sm"
-                    disabled={wizardCurrent >= onboardingSteps.length - 1}
-                    onClick={() => setWizardCurrent((c) => c + 1)}
-                  >
-                    次へ
-                  </Button>
-                </Flex>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* size union — md (default) vs sm */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>size · md (既定) / sm</CardTitle>
-            <CardDescription>
-              size は各ステップのタイトルと説明の文字サイズを決める。size=&quot;md&quot;
-              が既定でページ見出し直下の主要フローに使う。size=&quot;sm&quot;
-              はカードヘッダやサイドパネルなど、周囲の密度に合わせて縮める場合に使う。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  size=&quot;md&quot;
-                </Text>
-                <Steps size="md" value={1} items={approvalSteps} />
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Text as="p" size="sm" tone="muted">
-                  size=&quot;sm&quot;
-                </Text>
-                <Steps size="sm" value={1} items={approvalSteps} />
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* 320px stress */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>320px stress · 長いタイトル</CardTitle>
-            <CardDescription>
-              狭いコンテナで水平 Steps の長い日本語タイトルと説明を確認する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Card className="max-w-80">
-              <CardContent>
-                <Steps
-                  value={1}
-                  items={[
-                    { title: "会社情報の入力", description: "法人番号と所在地" },
-                    { title: "本人確認書類のアップロード", description: "代表者の確認" },
-                    { title: "申請内容の最終確認", description: "送信前の確認" },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-          </CardContent>
-        </Card>
-
-        {/* Dot style — compact */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Dot スタイル · コンパクト (type=&quot;dot&quot;)</CardTitle>
-            <CardDescription>
-              type=&quot;dot&quot; + size=&quot;sm&quot; で最小フットプリントのプログレスガイド。
-              サイドバーのオンボーディングチェックリストに最適。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Steps
-              type="dot"
-              size="sm"
-              orientation="vertical"
-              defaultValue={2}
-              titlePlacement="horizontal"
-              items={[
-                { title: "会社情報", status: "finish" },
-                { title: "代表者情報", status: "finish" },
-                { title: "税務署設定" },
-                { title: "銀行口座" },
-                { title: "完了確認" },
-              ]}
-            />
-          </CardContent>
-        </Card>
-
-        {/* Inline row — the hosted-identity / device progression */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              Inline 行 · 区切りグリフ (type=&quot;inline&quot; · separator)
-            </CardTitle>
-            <CardDescription>
-              認証・デバイス系の 1 行プログレス。区切りは既定が chevron (›)、 正典のホステッド ID
-              画面は arrow (→) — chevron は「掘り下げる」、arrow
-              は「次へ」を意味し、ステップ行の意味は後者。 番号の強調（既定は太字 /
-              正典はアクセント色）は --steps-inline-index-color / --steps-inline-index-font-weight
-              で、アプリ CSS を書かずに切り替える。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Steps
-                type="inline"
-                value={1}
-                items={[{ title: "コード入力" }, { title: "確認" }, { title: "完了" }]}
-              />
-              <Steps
-                type="inline"
-                separator="arrow"
-                value={1}
-                items={[{ title: "コード入力" }, { title: "確認" }, { title: "完了" }]}
-              />
-              {/* status="error" on the INLINE form too. The vertical/horizontal error title had a
-                  route; `.ui-steps-inline-item[data-status="error"] .ui-steps-inline-control` did
-                  not, and it reads the same tone token (gh#612). */}
-              <Steps
-                type="inline"
-                status="error"
-                value={1}
-                items={[{ title: "コード入力" }, { title: "確認" }, { title: "完了" }]}
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* Ant Design parity surface — percent + navigation */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>percent · navigation (Ant Design パリティ)</CardTitle>
-            <CardDescription>
-              percent は antd と同じく「現在ステップ」の進捗のみ(0–100
-              にクランプ)。マーカーの周りに確定アークを描き、role=&quot;progressbar&quot;
-              として読み上げられる。type=&quot;navigation&quot; は antd
-              のスラブ型ナビゲーションバーで、既定のヘアライン
-              コネクタは切られ、代わりにシェブロンで繋がる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              <div id="antd-steps-percent">
-                <Steps
-                  value={1}
-                  percent={40}
-                  items={[{ title: "申込" }, { title: "審査" }, { title: "完了" }]}
-                />
-              </div>
-              <div id="antd-steps-navigation">
-                <Steps
-                  type="navigation"
-                  value={1}
-                  onValueChange={() => {}}
-                  items={[
-                    { title: "申込", description: "受付済" },
-                    { title: "審査", description: "書類確認中" },
-                    { title: "完了", description: "未着手" },
-                  ]}
-                />
-              </div>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/navigation/tabs-rtl.tsx

@@ -1,28 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { PageContainer } from "@godxjp/ui/layout";
-import { Tabs } from "@godxjp/ui/navigation";
-
-export default function Demo() {
-  return (
-    <div dir="rtl" lang="ar">
-      <PageContainer title="علامات التبويب" subtitle="RTL keyboard and layout evidence">
-        <Card>
-          <CardHeader>
-            <CardTitle as="h2">إعدادات الحساب</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Tabs
-              dir="rtl"
-              defaultValue="profile"
-              items={[
-                { value: "profile", label: "الملف الشخصي", content: "معلومات الملف الشخصي" },
-                { value: "security", label: "الأمان", content: "إعدادات الأمان" },
-                { value: "recovery", label: "الاسترداد", content: "طرق الاسترداد" },
-              ]}
-            />
-          </CardContent>
-        </Card>
-      </PageContainer>
-    </div>
-  );
-}