@godxjp/ui 19.1.0 → 19.3.1

package/docs/navigation/steps.tsx

@@ -0,0 +1,265 @@
+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);
+  const [hasError, setHasError] = useState(false);
+
+  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 (gh#12) */}
+        <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: "完了" }]}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/navigation/tabs-rtl.tsx

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

package/docs/navigation/tabs.tsx

@@ -0,0 +1,314 @@
+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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@godxjp/ui/navigation";
+
+/**
+ * Tabs — Radix tab container with items API and three variants (default / line / card).
+ * Use items for the common full set; compose TabsList/TabsTrigger/TabsContent manually
+ * when you need per-panel control (forceMount, custom props).
+ * Composed only from real @godxjp/ui components.
+ */
+const journalItems = [
+  {
+    value: "pending",
+    label: "未承認",
+    content: (
+      <Flex direction="col" gap="sm">
+        <Text as="p">JE-0042 · 売上計上 株式会社山田商事 ¥480,000</Text>
+        <Text as="p">JE-0043 · 仕入計上 有限会社田中工業 ¥120,000</Text>
+      </Flex>
+    ),
+  },
+  {
+    value: "posted",
+    label: "承認済",
+    content: (
+      <Flex direction="col" gap="sm">
+        <Text as="p">JE-0040 · 給与支払 2024年5月分 ¥2,800,000</Text>
+        <Text as="p">JE-0041 · 経費精算 交通費 ¥38,500</Text>
+      </Flex>
+    ),
+  },
+  {
+    value: "voided",
+    label: "取消済",
+    content: (
+      <Text as="p" tone="muted">
+        取消済の仕訳はありません。
+      </Text>
+    ),
+    disabled: false,
+  },
+];
+
+export default function Demo() {
+  const [activeTab, setActiveTab] = useState("pending");
+
+  return (
+    <PageContainer
+      title="Tabs"
+      subtitle="items API (default / line / card variant) + manual compound composition"
+    >
+      <Flex direction="col" gap="lg">
+        {/* items API — default variant (pill) */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Default variant · items API</CardTitle>
+            <CardDescription>
+              Pass an items array; Tabs renders all triggers and content panels automatically.
+              variant=&quot;default&quot; is the pill style.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs defaultValue="pending" variant="default" items={journalItems} />
+          </CardContent>
+        </Card>
+
+        {/* Disabled first item — fallback selection must skip it (gh#175) */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>先頭タブが disabled · フォールバック選択</CardTitle>
+            <CardDescription>
+              defaultValue/value を渡さない場合、Tabs は先頭の ENABLED タブを自動選択する(disabled
+              の先頭タブは選ばない)。全タブが disabled の場合は何も選択しない (gh#175)。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs
+              variant="default"
+              items={[
+                {
+                  value: "archived",
+                  label: "アーカイブ済 (無効)",
+                  content: <Text as="p">アーカイブ済の仕訳は表示できません。</Text>,
+                  disabled: true,
+                },
+                {
+                  value: "pending",
+                  label: "未承認",
+                  content: <Text as="p">未承認の仕訳が 2 件あります。</Text>,
+                },
+                {
+                  value: "posted",
+                  label: "承認済",
+                  content: <Text as="p">当期承認済: 48 件</Text>,
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>320px stress · 長いローカライズラベル</CardTitle>
+            <CardDescription>
+              狭いコンテナでも長いラベルはクリップされず、水平タブリストが自身でスクロールする
+              (gh#175)。compact navigation への変換は Tabs API に存在しないため擬似実装しない —
+              スクロールが意図した縮退動作。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card className="max-w-80">
+              <CardContent>
+                <Tabs
+                  defaultValue="methods"
+                  variant="line"
+                  items={[
+                    {
+                      value: "methods",
+                      label: "サインイン方法とパスワード",
+                      content: <Text>方法</Text>,
+                    },
+                    {
+                      value: "two-factor",
+                      label: "二要素認証の設定",
+                      content: <Text>二要素認証</Text>,
+                    },
+                    {
+                      value: "recovery",
+                      label: "アカウントの復旧方法",
+                      content: <Text>復旧</Text>,
+                    },
+                  ]}
+                />
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+
+        {/* items API — line variant */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Line variant · controlled</CardTitle>
+            <CardDescription>
+              variant=&quot;line&quot; renders an underline indicator. Pair value + onValueChange
+              when the active tab is driven by parent state (e.g. URL param).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs
+              variant="line"
+              value={activeTab}
+              onValueChange={setActiveTab}
+              items={journalItems}
+            />
+          </CardContent>
+        </Card>
+
+        {/* items API — card variant */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Card variant</CardTitle>
+            <CardDescription>
+              variant=&quot;card&quot; gives each trigger a card-like surface. Good for settings or
+              admin profile pages.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs
+              defaultValue="pending"
+              variant="card"
+              items={[
+                {
+                  value: "pending",
+                  label: "未承認 (2)",
+                  content: <Text as="p">未承認の仕訳が 2 件あります。</Text>,
+                },
+                {
+                  value: "posted",
+                  label: "承認済",
+                  content: <Text as="p">当期承認済: 48 件</Text>,
+                },
+                {
+                  value: "voided",
+                  label: "取消済",
+                  content: <Text as="p">取消済: 3 件</Text>,
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        {/* Manual compound — orientation vertical */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Manual compound · vertical orientation</CardTitle>
+            <CardDescription>
+              Compose TabsList / TabsTrigger / TabsContent when per-panel control is needed.
+              orientation=&quot;vertical&quot; goes on the root Tabs element.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs defaultValue="overview" orientation="vertical" style={{ gap: "var(--space-6)" }}>
+              <TabsList variant="line" className="h-auto w-40 flex-col items-stretch">
+                <TabsTrigger value="overview">概要</TabsTrigger>
+                <TabsTrigger value="ledger">元帳</TabsTrigger>
+                <TabsTrigger value="attachments">添付</TabsTrigger>
+              </TabsList>
+              <Flex direction="col" gap="md" className="flex-1">
+                <TabsContent value="overview">
+                  <Text as="p">取引先: 株式会社山田商事 · 売掛金残高 ¥480,000</Text>
+                </TabsContent>
+                <TabsContent value="ledger">
+                  <Text as="p">元帳エントリ: 売掛金 Dr / 売上 Cr ¥480,000</Text>
+                </TabsContent>
+                <TabsContent value="attachments">
+                  <Text as="p">添付ファイル: invoice_0042.pdf</Text>
+                </TabsContent>
+              </Flex>
+            </Tabs>
+          </CardContent>
+        </Card>
+
+        {/* Controlled with external Button */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>外部制御 · ボタンでタブを切り替え</CardTitle>
+            <CardDescription>
+              value + onValueChange で親から active tab を制御できる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" gap="sm">
+                <Button
+                  size="sm"
+                  variant={activeTab === "pending" ? "default" : "outline"}
+                  onClick={() => setActiveTab("pending")}
+                >
+                  未承認へ
+                </Button>
+                <Button
+                  size="sm"
+                  variant={activeTab === "posted" ? "default" : "outline"}
+                  onClick={() => setActiveTab("posted")}
+                >
+                  承認済へ
+                </Button>
+              </Flex>
+              <Tabs
+                variant="line"
+                value={activeTab}
+                onValueChange={setActiveTab}
+                items={journalItems}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* TabsList union — both list variants, hand-composed and named explicitly */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>TabsList variant · default / line</CardTitle>
+            <CardDescription>
+              手動合成では TabsList に variant を直接指定する。variant=&quot;default&quot;
+              はピル型のリスト、variant=&quot;line&quot; は下線インジケータのリスト。items API
+              を使う場合は Tabs の variant がそのまま TabsList に渡る。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;default&quot;
+                </Text>
+                <Tabs defaultValue="summary">
+                  <TabsList variant="default">
+                    <TabsTrigger value="summary">サマリ</TabsTrigger>
+                    <TabsTrigger value="detail">明細</TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="summary">
+                    <Text as="p">当月の売上合計 ¥4,820,000</Text>
+                  </TabsContent>
+                  <TabsContent value="detail">
+                    <Text as="p">明細 24 件 · 未承認 2 件</Text>
+                  </TabsContent>
+                </Tabs>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;line&quot;
+                </Text>
+                <Tabs defaultValue="summary">
+                  <TabsList variant="line">
+                    <TabsTrigger value="summary">サマリ</TabsTrigger>
+                    <TabsTrigger value="detail">明細</TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="summary">
+                    <Text as="p">当月の売上合計 ¥4,820,000</Text>
+                  </TabsContent>
+                  <TabsContent value="detail">
+                    <Text as="p">明細 24 件 · 未承認 2 件</Text>
+                  </TabsContent>
+                </Tabs>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}