@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-display/empty-state.tsx

@@ -1,164 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle, EmptyState } from "@godxjp/ui/data-display";
-import { Button } from "@godxjp/ui/general";
-import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-import {
-  AlertTriangle,
-  Archive,
-  CheckCircle2,
-  Inbox,
-  Info,
-  Plus,
-  SearchX,
-  XCircle,
-} from "lucide-react";
-
-/**
- * EmptyState — centred zero-state with icon, title, description, and an optional
- * CTA. Use for non-DataTable lists / zero-state pages (DataTable embeds its own).
- *
- * Heading hierarchy: the title is a real heading (default `<h3>`). Pick
- * `titleLevel` for a VALID page outline (page `<h1>` → section `<h2>` → nested
- * `<h3>`), never for visual size — the size is fixed by tokens. Below, the page
- * title is `<h1>` (PageContainer) and each case owns a `<CardTitle level={2}>`
- * (`<h2>`), so the empty-state titles are `titleLevel={3}` — or `titleAs="p"`
- * when the message is not itself a heading. Composed only from real @godxjp/ui.
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="EmptyState"
-      subtitle="Contextual zero-state · page / section / compact · tone · valid heading order"
-    >
-      <Flex direction="col" gap="lg">
-        {/* page — the empty condition IS the page's primary job (onboarding). */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>page：主要な空状態（オンボーディング）</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <EmptyState
-              variant="page"
-              icon={Inbox}
-              title="請求書がありません"
-              description="最初の請求書を作成して開始しましょう。"
-              titleLevel={3}
-              action={
-                <Button>
-                  <Plus />
-                  新規請求書
-                </Button>
-              }
-            />
-          </CardContent>
-        </Card>
-
-        {/* page — post-search zero result with a clear recovery. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>page：検索結果ゼロ</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <EmptyState
-              icon={SearchX}
-              title="該当する結果がありません"
-              description="フィルター条件を変更して、もう一度お試しください。"
-              titleLevel={3}
-            />
-          </CardContent>
-        </Card>
-
-        {/* section — restrained spacing for a subsection inside a normal page. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>section：セクション内の空状態</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <EmptyState
-              variant="section"
-              icon={SearchX}
-              title="このセクションに結果はありません"
-              description="ページ全体ではない、主要セクション内の空状態です。"
-              titleLevel={3}
-            />
-          </CardContent>
-        </Card>
-
-        {/* compact — secondary content; no medallion, minimal padding, and the
-            message is NOT a heading (titleAs="p") because the card already has one. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>compact：補助的な空状態</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <EmptyState
-              variant="compact"
-              title="保留中の招待はありません"
-              description="補助的な空状態はアイコンを省き、最小限の余白で表示します。"
-              titleAs="p"
-            />
-          </CardContent>
-        </Card>
-
-        {/* tone — a semantic confirmation zero-state. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>tone：承認済み（success）</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <EmptyState
-              tone="success"
-              icon={CheckCircle2}
-              title="端末を承認しました"
-              description="この端末からサインインできるようになりました。"
-              titleLevel={3}
-            />
-          </CardContent>
-        </Card>
-
-        {/* tone — the remaining four steps. tone tints the icon medallion only; the copy still
-            carries the meaning, so a zero-state never relies on colour alone. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>tone：warning / destructive / info / muted（既定）</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
-              <EmptyState
-                variant="section"
-                tone="warning"
-                icon={AlertTriangle}
-                title="未処理の取込エラーがあります"
-                description="取込ログを確認してから再実行してください。"
-                titleLevel={3}
-              />
-              <EmptyState
-                variant="section"
-                tone="destructive"
-                icon={XCircle}
-                title="同期が停止しています"
-                description="接続資格情報の期限が切れたため、データを取得できません。"
-                titleLevel={3}
-              />
-              <EmptyState
-                variant="section"
-                tone="info"
-                icon={Info}
-                title="集計はまだ準備中です"
-                description="当月分の集計は翌営業日の午前に反映されます。"
-                titleLevel={3}
-              />
-              <EmptyState
-                variant="section"
-                tone="muted"
-                icon={Archive}
-                title="アーカイブは空です"
-                description="tone を省略したときの既定です。中立な余白として振る舞います。"
-                titleLevel={3}
-              />
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/feature-list.tsx

@@ -1,159 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  FeatureList,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-
-const STARTER = [
-  { state: "included", label: "ユーザー 10 名まで" },
-  { state: "included", label: "監査ログ", description: "直近 30 日分を保持します。" },
-  {
-    state: "limited",
-    label: "API 呼び出し",
-    description: "月 10,000 回を超えると 429 を返します。",
-  },
-  { state: "excluded", label: "SAML / OIDC シングルサインオン" },
-  { state: "excluded", label: "監査ログのエクスポート" },
-] as const;
-
-const ENTERPRISE = [
-  { state: "included", label: "ユーザー数 無制限" },
-  { state: "included", label: "監査ログ", description: "保持期間は契約単位で設定します。" },
-  { state: "included", label: "API 呼び出し", description: "レート上限は個別に調整します。" },
-  {
-    state: "included",
-    label: "SAML / OIDC シングルサインオン",
-    description: "SAML 2.0 と OIDC の両方に対応。",
-  },
-  { state: "included", label: "監査ログのエクスポート" },
-] as const;
-
-/**
- * FeatureList — 先頭の状態グリフ（含む／含まない／制限あり）を持つ「文」のリスト。
- *
- * ListRow は 1 行のエンティティ行（区切り線・末尾アクション）、Timeline は順序のあるイベント
- * レール、Descriptions は用語／値のグリッド。どれも「折り返す説明文つきの状態リスト」ではない。
- * Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="FeatureList"
-      subtitle="状態グリフつきの文のリスト · グリフは最初の行に揃う"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>三つの状態</CardTitle>
-            <CardDescription>
-              included（✓）· limited（−）· excluded（✗）。色は意味を運ぶ唯一の手段ではありません ——
-              形が違い、読み上げ用の語も添えられます（WCAG 1.4.1）。excluded を赤で塗らないのは、
-              「含まれない」は失敗ではなく事実だからです。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FeatureList items={[...STARTER]} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>折り返しても、グリフは最初の行に揃う</CardTitle>
-            <CardDescription>
-              グリフの枠は 1 行分（1lh）の高さで、その中央にグリフが置かれます。だから 3 行に
-              折り返すラベルでも、揃う先は箱の上端ではなく最初の行です。呼び出し側に数値は
-              ありません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FeatureList
-              items={[
-                {
-                  state: "included",
-                  label:
-                    "組織をまたぐ権限の委譲（部門管理者が自部門の範囲内でだけロールを付け替えられる設定を含みます）",
-                  description:
-                    "委譲の範囲は組織ツリーのノード単位で決まり、親を超える付与はできません。監査ログには委譲元と委譲先の両方が記録されます。",
-                },
-                { state: "limited", label: "短いラベル" },
-              ]}
-            />
-          </CardContent>
-        </Card>
-
-        <ResponsiveGrid columns={{ base: 1, md: 2 }}>
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>Starter</CardTitle>
-              <CardDescription>小さなチームのための最小構成。</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <FeatureList items={[...STARTER]} />
-            </CardContent>
-            <CardFooter>
-              <Button variant="outline">Starter を選ぶ</Button>
-            </CardFooter>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>Enterprise</CardTitle>
-              <CardDescription>監査と SSO を必要とする組織向け。</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <FeatureList items={[...ENTERPRISE]} />
-            </CardContent>
-            <CardFooter>
-              <Button>Enterprise を選ぶ</Button>
-            </CardFooter>
-          </Card>
-        </ResponsiveGrid>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>数量はラベルに組み立てる</CardTitle>
-            <CardDescription>
-              「· 10,000 req/mo」のような数量に専用の prop はありません。Text を label に入れる
-              書き方がすでに合法で audit も通るため、prop を足すと docs/WHAT-BELONGS-HERE.md の問い
-              1（consumer に手がないか）に落ちます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FeatureList
-              items={[
-                {
-                  state: "limited",
-                  label: (
-                    <>
-                      API 呼び出し{" "}
-                      <Text tone="muted" tabular>
-                        10,000 req/mo
-                      </Text>
-                    </>
-                  ),
-                },
-                {
-                  state: "included",
-                  label: (
-                    <>
-                      ストレージ{" "}
-                      <Text tone="muted" tabular>
-                        250 GB
-                      </Text>
-                    </>
-                  ),
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

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

@@ -1,181 +0,0 @@
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-
-/**
- * HoverCard — a rich popover shown on hover/focus of a trigger (sighted-pointer
- * affordance; not a replacement for Tooltip). Composed only from real
- * @godxjp/ui components. Touch layouts must keep essential identity/actions visible in the
- * trigger or destination; never make HoverCard the only route to required information.
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="HoverCard"
-      subtitle="Rich preview on hover/focus · entity peek, user card, positioning & delay"
-    >
-      <Flex direction="col" gap="lg">
-        {/* Entity peek — hover (or focus) the link to reveal the card */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>取引先プレビュー</CardTitle>
-            <CardDescription>
-              リンクをホバーまたはフォーカスすると、ページを離れずに取引先を確認できます。トリガーは
-              フォーカス可能なリンクなので、キーボード操作でも開きます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <HoverCard>
-              <HoverCardTrigger asChild>
-                <Button variant="link">株式会社ベトヤ</Button>
-              </HoverCardTrigger>
-              <HoverCardContent>
-                <Flex direction="row" gap="md" align="center">
-                  <Avatar>
-                    <AvatarFallback>VB</AvatarFallback>
-                  </Avatar>
-                  <Flex direction="col" gap="xs">
-                    <Text weight="medium">株式会社ベトヤ</Text>
-                    <Text size="xs" tone="muted">
-                      取引先 · BTY-0012 · 売掛 ¥482,000
-                    </Text>
-                  </Flex>
-                </Flex>
-              </HoverCardContent>
-            </HoverCard>
-          </CardContent>
-        </Card>
-
-        {/* User card — the second pattern promised by the subtitle */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ユーザーカード</CardTitle>
-            <CardDescription>
-              担当者名にホバーすると、連絡先と所属を含むユーザーカードを表示します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <HoverCard>
-              <HoverCardTrigger asChild>
-                <Button variant="link">田中 美咲</Button>
-              </HoverCardTrigger>
-              <HoverCardContent>
-                <Flex direction="row" gap="md" align="center">
-                  <Avatar>
-                    <AvatarImage src="/avatars/tanaka.png" alt="田中 美咲" />
-                    <AvatarFallback>田</AvatarFallback>
-                  </Avatar>
-                  <Flex direction="col" gap="xs">
-                    <Text weight="medium">田中 美咲</Text>
-                    <Text size="xs" tone="muted">
-                      営業部 · 主任
-                    </Text>
-                    <Text size="xs" tone="muted">
-                      misaki.tanaka@example.co.jp
-                    </Text>
-                  </Flex>
-                </Flex>
-              </HoverCardContent>
-            </HoverCard>
-          </CardContent>
-        </Card>
-
-        {/* Positioning — every `side` value, plus `align` and `sideOffset` */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>配置（side · align · sideOffset）</CardTitle>
-            <CardDescription>
-              ポップオーバーを開く向きは side（top / right / bottom / left）、トリガーに沿った
-              位置は align、トリガーとの距離は sideOffset で制御します。各リンクをホバーすると
-              その向きで表示されます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
-              <HoverCard>
-                <HoverCardTrigger asChild>
-                  <Button variant="link">side=top</Button>
-                </HoverCardTrigger>
-                <HoverCardContent side="top">
-                  <Text>上に表示（align=center）</Text>
-                </HoverCardContent>
-              </HoverCard>
-
-              <HoverCard>
-                <HoverCardTrigger asChild>
-                  <Button variant="link">side=right</Button>
-                </HoverCardTrigger>
-                <HoverCardContent side="right" align="start">
-                  <Text>右に表示（align=start）</Text>
-                </HoverCardContent>
-              </HoverCard>
-
-              <HoverCard>
-                <HoverCardTrigger asChild>
-                  <Button variant="link">side=bottom</Button>
-                </HoverCardTrigger>
-                <HoverCardContent side="bottom" align="end">
-                  <Text>下に表示（align=end）</Text>
-                </HoverCardContent>
-              </HoverCard>
-
-              <HoverCard>
-                <HoverCardTrigger asChild>
-                  <Button variant="link">side=left</Button>
-                </HoverCardTrigger>
-                <HoverCardContent side="left" sideOffset={12}>
-                  <Text>左に表示（sideOffset=12）</Text>
-                </HoverCardContent>
-              </HoverCard>
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-
-        {/* Delay — openDelay / closeDelay tune the hover affordance */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>開閉ディレイ（openDelay · closeDelay）</CardTitle>
-            <CardDescription>
-              openDelay はホバーから表示までの待ち時間、closeDelay は離れてから閉じるまでの
-              猶予です。長い openDelay で誤爆を防ぎ、長い closeDelay でポップオーバー内へ
-              ポインタを移動しやすくします。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="lg" wrap>
-              <HoverCard openDelay={700} closeDelay={150}>
-                <HoverCardTrigger asChild>
-                  <Button variant="link">openDelay=700ms</Button>
-                </HoverCardTrigger>
-                <HoverCardContent>
-                  <Text>待ってから表示。意図しないホバーで開きません。</Text>
-                </HoverCardContent>
-              </HoverCard>
-
-              <HoverCard openDelay={0} closeDelay={600}>
-                <HoverCardTrigger asChild>
-                  <Button variant="link">closeDelay=600ms</Button>
-                </HoverCardTrigger>
-                <HoverCardContent>
-                  <Text>即座に表示し、離れても少し残るのでカード内に移動できます。</Text>
-                </HoverCardContent>
-              </HoverCard>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/image.tsx

@@ -1,170 +0,0 @@
-import * as React from "react";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Image,
-  ImagePreviewGroup,
-  Prose,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-import coverTerrain from "../assets/cover-terrain.svg";
-import portraitIris from "../assets/portrait-iris.svg";
-import shotLandscape from "../assets/shot-landscape.svg";
-import shotPortrait from "../assets/shot-portrait.svg";
-
-/* Committed SVG files under docs/assets — a docs page never fetches a third-party image. */
-
-/**
- * Image + ImagePreviewGroup — antd `Image` / `Image.PreviewGroup` (gh#1077).
- *
- * Click (or Enter on) a picture: it opens full-viewport with zoom in/out (buttons, wheel,
- * double-click), rotate, flip and reset; drag pans a zoomed picture. Inside a group, ←/→ and the
- * side buttons page every picture of the group with a "2 / 3" counter. Esc closes and focus goes
- * back to the picture.
- *
- * Deviations from antd, on purpose: the thumbnail is a real button (keyboard-openable); the
- * preview traps focus and restores it; ←/→ follow the reading direction (RTL: ← is next); with
- * `items`, a clicked child opens at its own src (antd opens 0); `alt` is required; the
- * `toolbarRender` / `imageRender` / `countRender` render props, `movable` and `getContainer` are
- * not ported.
- */
-export default function Demo() {
-  const [current, setCurrent] = React.useState(0);
-  const [visible, setVisible] = React.useState(false);
-
-  return (
-    <PageContainer title="Image" subtitle="Click to preview large · ←/→ page through a group">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Every screenshot of a Markdown body in one preview</CardTitle>
-            <CardDescription>
-              Every Image under an ImagePreviewGroup, however deep, joins one gallery in document
-              order. Mapping a Markdown renderer&apos;s img to Image is enough to page through the
-              article&apos;s screenshots.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ImagePreviewGroup>
-              <Prose>
-                <h3>Test result</h3>
-                <p>Before the fix:</p>
-                <p>
-                  <Image src={shotPortrait} width={180} alt="List screen before the fix" />
-                </p>
-                <p>After the fix:</p>
-                <p>
-                  <Image src={shotLandscape} width={320} alt="Dashboard after the fix" />
-                </p>
-                <p>
-                  The logo leaves the group with preview=&#123;false&#125;:{" "}
-                  <Image src={portraitIris} width={48} alt="App icon" preview={false} />
-                </p>
-              </Prose>
-            </ImagePreviewGroup>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>items and controlled preview.current / visible</CardTitle>
-            <CardDescription>
-              `items` lists the gallery explicitly; `preview` controls current / onChange and
-              visible / onVisibleChange with antd&apos;s (next, prev) argument order.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Text tone="muted">
-                Showing {current + 1} / 3 · {visible ? "open" : "closed"}
-              </Text>
-              <Flex gap="sm" wrap>
-                <Button onClick={() => setVisible(true)}>Open the gallery</Button>
-              </Flex>
-              <ImagePreviewGroup
-                items={[
-                  { src: shotPortrait, alt: "List screen" },
-                  { src: shotLandscape, alt: "Dashboard" },
-                  { src: coverTerrain, alt: "Cover image" },
-                ]}
-                preview={{
-                  current,
-                  visible,
-                  onChange: (next) => setCurrent(next),
-                  onVisibleChange: (next) => setVisible(next),
-                }}
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Standalone · fallback · placeholder</CardTitle>
-            <CardDescription>
-              An Image outside a group previews only itself. A picture that fails to load shows its
-              fallback and does not open a preview (as in antd).
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex gap="md" wrap align="start">
-              <Image src={coverTerrain} width={240} alt="Cover image" placeholder />
-              <Image
-                src="/missing-screenshot.png"
-                fallback={portraitIris}
-                width={96}
-                alt="A picture that failed to load"
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Thumbnail size · fit · caption</CardTitle>
-            <CardDescription>
-              size puts the frame on the Thumbnail height scale (sm 64px, md 96px, lg 160px) at 4:3,
-              cropped to fill; fit=&quot;contain&quot; letterboxes instead. caption keeps a long
-              file name under the picture, truncated at the picture&apos;s width.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ImagePreviewGroup>
-              <Flex gap="sm" wrap align="start">
-                <Image
-                  src={shotLandscape}
-                  size="md"
-                  alt="Dashboard"
-                  caption={
-                    <Text size="xs" truncate>
-                      dashboard-after-the-fix-2026-09-30-full-resolution.png
-                    </Text>
-                  }
-                />
-                <Image
-                  src={shotPortrait}
-                  size="md"
-                  fit="contain"
-                  alt="List screen"
-                  caption={
-                    <Text size="xs" truncate>
-                      list-screen.png
-                    </Text>
-                  }
-                />
-                <Image src={coverTerrain} size="sm" alt="Cover image" />
-                <Image src={portraitIris} size="lg" alt="Portrait" />
-              </Flex>
-            </ImagePreviewGroup>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}