@godxjp/ui 19.1.0 → 19.2.0

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

@@ -0,0 +1,181 @@
+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/list-row.tsx

@@ -0,0 +1,420 @@
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ListRow,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { KeyRound, Laptop, Link2, Smartphone } from "lucide-react";
+
+/**
+ * ListRow — the single-line entity-row surface for SHORT lists inside a Card. Replaces the
+ * hand-rolled `flex items-center justify-between border-b py-3` repeated across account pages.
+ * Drop rows into a flush CardContent: they stack with a quiet divider and the Card border closes
+ * the list. Border / radius / padding are tokenized (`--list-row-*`).
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="ListRow"
+      subtitle="leading · title/description · trailing action · short entity lists inside a Card"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>アクティブなセッション Active sessions</CardTitle>
+            <CardDescription>
+              Rows live in a flush CardContent and draw their own dividers. Trailing holds the row
+              action: a status Badge or a destructive Button.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ListRow
+              leading={<Smartphone aria-hidden="true" className="size-4" />}
+              title="iPhone 15 · Tokyo"
+              description="最終アクセス 2分前 · 153.240.x.x"
+              trailing={<Badge status="active" />}
+            />
+            <ListRow
+              leading={<Laptop aria-hidden="true" className="size-4" />}
+              title="MacBook Pro · Osaka"
+              description="最終アクセス 3日前 · 126.18.x.x"
+              trailing={
+                <Button size="xs" variant="outline">
+                  ログアウト Sign out
+                </Button>
+              }
+            />
+            <ListRow
+              leading={<Laptop aria-hidden="true" className="size-4" />}
+              title="Windows · Nagoya"
+              description="最終アクセス 先月 · 49.98.x.x"
+              trailing={
+                <Button size="xs" variant="outline">
+                  ログアウト Sign out
+                </Button>
+              }
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>連携アカウント Linked accounts</CardTitle>
+            <CardDescription>
+              Leading takes an icon or Avatar; trailing takes any action control. `as="li"` when the
+              rows are a semantic list.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            {/* `as="li"` rows are a SEMANTIC list — axe's `listitem` rule requires the parent to
+                actually be a list container (ul/ol/role=list), not just visually stacked divs. */}
+            <ul>
+              <ListRow
+                as="li"
+                leading={<Link2 aria-hidden="true" className="size-4" />}
+                title="GitHub"
+                description="taro@example.com として接続済み"
+                trailing={
+                  <Button size="xs" variant="ghost">
+                    解除 Disconnect
+                  </Button>
+                }
+              />
+              <ListRow
+                as="li"
+                leading={<KeyRound aria-hidden="true" className="size-4" />}
+                title="Passkey · iCloud Keychain"
+                description="2026年3月12日に追加"
+                trailing={<Badge tone="neutral">未使用</Badge>}
+              />
+            </ul>
+          </CardContent>
+        </Card>
+
+        {/* #224 — a long organization name plus TWO trailing Buttons. The content column shrinks
+            to `min(--list-row-body-min-width, 100%)` and the actions wrap onto their own line at
+            narrow widths, so the page root never scrolls horizontally at 390px. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>招待 Pending invitations</CardTitle>
+            <CardDescription>
+              Long titles + two actions: the row wraps instead of widening the page. Retune the
+              stack threshold with `--list-row-body-min-width`, the action gap with
+              `--list-row-trailing-gap`.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ListRow
+              align="start"
+              overflow="wrap"
+              leading={
+                <Avatar className="size-8">
+                  <AvatarFallback>グ</AvatarFallback>
+                </Avatar>
+              }
+              title="グローバル・トランスフォーメーション推進本部 デジタルプラットフォーム統括部"
+              description="招待者 山田 太郎 · 2026-07-28"
+              trailing={
+                <>
+                  <Button size="xs" variant="ghost">
+                    辞退 Decline
+                  </Button>
+                  <Button size="xs" variant="outline">
+                    参加 Accept
+                  </Button>
+                </>
+              }
+            />
+            <ListRow
+              align="start"
+              overflow="wrap"
+              leading={
+                <Avatar className="size-8">
+                  <AvatarFallback>T</AvatarFallback>
+                </Avatar>
+              }
+              title="Trung tâm Điều phối Chuyển đổi số và Quản trị Dữ liệu Doanh nghiệp Toàn cầu"
+              description="Người mời nguyễn.van.a@example.com · 2026-07-27"
+              trailing={
+                <>
+                  <Button size="xs" variant="ghost">
+                    Từ chối
+                  </Button>
+                  <Button size="xs" variant="outline">
+                    Chấp nhận
+                  </Button>
+                </>
+              }
+            />
+            <ListRow
+              leading={
+                <Avatar className="size-8">
+                  <AvatarFallback>A</AvatarFallback>
+                </Avatar>
+              }
+              title="Acme Global Transformation Office · Data Platform Division"
+              description="Invited by taro@example.com · 2026-07-26"
+              trailing={
+                <>
+                  <Button size="xs" variant="ghost">
+                    Decline
+                  </Button>
+                  <Button size="xs" variant="outline">
+                    Accept
+                  </Button>
+                </>
+              }
+            />
+          </CardContent>
+        </Card>
+
+        {/* #246 — `density="compact"` inline-actions geometry. Inside the canonical narrow card
+            (358px at a 390px viewport → 326px content column) the 36px Avatar, the shrinkable
+            title/description and the two small trailing Buttons stay on ONE line, and the history
+            rows keep their status Badge + ISO-8601 date inline with the title. The #224 wrap
+            contract is untouched: a cluster that cannot fit still wraps, never widening the page. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>招待 · コンパクト Compact invitations</CardTitle>
+            <CardDescription>
+              `density=&quot;compact&quot;` lowers the row inset, the column gap and the body
+              threshold (`--list-row-compact-*`) so avatar · title · actions read as one line in a
+              narrow card, instead of the actions dropping to a second row.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ListRow
+              density="compact"
+              leading={
+                <Avatar className="size-9">
+                  <AvatarFallback>グ</AvatarFallback>
+                </Avatar>
+              }
+              title="グローバル推進本部"
+              description="山田 太郎 · 2026-07-28"
+              trailing={
+                <>
+                  <Button size="xs" variant="ghost">
+                    辞退
+                  </Button>
+                  <Button size="xs" variant="outline">
+                    参加
+                  </Button>
+                </>
+              }
+            />
+            <ListRow
+              density="compact"
+              leading={
+                <Avatar className="size-9">
+                  <AvatarFallback>T</AvatarFallback>
+                </Avatar>
+              }
+              title="Trung tâm Dữ liệu"
+              description="nguyen.van.a@example.com · 2026-07-27"
+              trailing={
+                <>
+                  <Button size="xs" variant="ghost">
+                    Từ chối
+                  </Button>
+                  <Button size="xs" variant="outline">
+                    Đồng ý
+                  </Button>
+                </>
+              }
+            />
+            <ListRow
+              density="compact"
+              leading={
+                <Avatar className="size-9">
+                  <AvatarFallback>A</AvatarFallback>
+                </Avatar>
+              }
+              title="Acme Data Platform"
+              description="taro@example.com · 2026-07-26"
+              trailing={
+                <>
+                  <Button size="xs" variant="ghost">
+                    Decline
+                  </Button>
+                  <Button size="xs" variant="outline">
+                    Accept
+                  </Button>
+                </>
+              }
+            />
+            {/* Compact does NOT give up the #224 safety net: a title too long for the compact
+                threshold still wraps (and the actions drop to their own line if they cannot fit),
+                so the page root never scrolls horizontally. */}
+            <ListRow
+              density="compact"
+              align="start"
+              overflow="wrap"
+              leading={
+                <Avatar className="size-9">
+                  <AvatarFallback>グ</AvatarFallback>
+                </Avatar>
+              }
+              title="グローバル・トランスフォーメーション推進本部 デジタルプラットフォーム統括部"
+              description="Trung tâm Điều phối Chuyển đổi số · 2026-07-25"
+              trailing={
+                <>
+                  <Button size="xs" variant="ghost">
+                    辞退 Decline
+                  </Button>
+                  <Button size="xs" variant="outline">
+                    参加 Accept
+                  </Button>
+                </>
+              }
+            />
+          </CardContent>
+        </Card>
+
+        {/* #246 — the compact HISTORY row: no leading slot, status Badge + ISO-8601 date inline. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>履歴 Invitation history</CardTitle>
+            <CardDescription>
+              A compact row with a status Badge and an ISO-8601 date in `trailing` stays a single
+              line at 390px. The metadata never drops under the title.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ListRow
+              density="compact"
+              title="グローバル推進本部"
+              trailing={
+                <>
+                  <Badge tone="success">承認済み</Badge>
+                  <Text size="xs" tone="muted">
+                    2026-07-12
+                  </Text>
+                </>
+              }
+            />
+            <ListRow
+              density="compact"
+              title="Trung tâm Dữ liệu"
+              trailing={
+                <>
+                  <Badge tone="neutral">期限切れ</Badge>
+                  <Text size="xs" tone="muted">
+                    2026-06-30
+                  </Text>
+                </>
+              }
+            />
+            <ListRow
+              density="compact"
+              title="Acme Data Platform"
+              trailing={
+                <>
+                  <Badge tone="destructive">辞退</Badge>
+                  <Text size="xs" tone="muted">
+                    2026-06-18
+                  </Text>
+                </>
+              }
+            />
+          </CardContent>
+        </Card>
+
+        {/* Both density branches on the same content, so the inset difference is readable at rest
+            without toggling anything. `default` is what a row renders with density omitted. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>密度の対比 density=default vs compact</CardTitle>
+            <CardDescription>
+              同じ行を density=&quot;default&quot;（既定 · ゆとりのある行間）と
+              density=&quot;compact&quot;（明細向けの詰めた行間）で並べています。切り替えるのは
+              inset · 列間 · 本文の折り返し閾値だけで、内容と操作は変わりません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ListRow
+              density="default"
+              leading={<Laptop aria-hidden="true" className="size-4" />}
+              title="MacBook Pro · Osaka"
+              description={'density="default" · 最終アクセス 3日前'}
+              trailing={<Badge status="active" />}
+            />
+            <ListRow
+              density="compact"
+              leading={<Laptop aria-hidden="true" className="size-4" />}
+              title="MacBook Pro · Osaka"
+              description={'density="compact" · 最終アクセス 3日前'}
+              trailing={<Badge status="active" />}
+            />
+          </CardContent>
+        </Card>
+
+        {/* #225 — notification rows. `unread` renders the indicator dot (a SHAPE with localized
+            sr-only text, never colour alone) plus the tokenized emphasis surface; read rows keep
+            the gutter so every title stays on one optical axis. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>通知 Notifications</CardTitle>
+            <CardDescription>
+              `unread` = indicator dot + `--list-row-unread-background`; `unread={false}` = the
+              neutral `--list-row-read-background`. Zero, one or two inline trailing actions.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ListRow
+              unread
+              align="start"
+              overflow="wrap"
+              title="組織「グローバル・トランスフォーメーション推進本部」への招待が届いています"
+              description="2026-07-30 09:12"
+              trailing={
+                <>
+                  <Button size="xs" variant="ghost">
+                    既読にする
+                  </Button>
+                  <Button size="xs" variant="outline">
+                    開く
+                  </Button>
+                </>
+              }
+            />
+            <ListRow
+              unread
+              align="start"
+              overflow="wrap"
+              title="Yêu cầu phê duyệt hợp đồng cung cấp dịch vụ vận hành hạ tầng đám mây quý III"
+              description="2026-07-29 17:04"
+              trailing={
+                <Button size="xs" variant="outline">
+                  Mở
+                </Button>
+              }
+            />
+            <ListRow
+              unread={false}
+              align="start"
+              overflow="wrap"
+              title="Your monthly platform usage report for the Data Platform Division is ready"
+              description="2026-07-28 08:00"
+            />
+            <ListRow
+              unread={false}
+              align="start"
+              overflow="wrap"
+              title="請求書 INV-2026-0731 が発行されました"
+              description="2026-07-27 18:40"
+              trailing={<Badge tone="neutral">既読</Badge>}
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}