@godxjp/ui 31.31.7 → 32.0.0

package/docs/data-display/avatar.tsx

@@ -1,502 +0,0 @@
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  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 { useTranslation } from "@godxjp/ui/i18n";
-import { Building2, KeyRound, ShieldCheck, Sparkles } from "lucide-react";
-
-import portraitAmber from "../assets/portrait-amber.svg";
-import shotLandscape from "../assets/shot-landscape.svg";
-import portraitClay from "../assets/portrait-clay.svg";
-import portraitIndigo from "../assets/portrait-indigo.svg";
-import portraitIris from "../assets/portrait-iris.svg";
-import portraitMoss from "../assets/portrait-moss.svg";
-import portraitPlum from "../assets/portrait-plum.svg";
-import portraitSlate from "../assets/portrait-slate.svg";
-
-/* The portraits are committed SVG files under docs/assets, imported so the bundler rewrites each
- * URL against PREVIEW_BASE — an absolute "/assets/…" would 404 wherever the site is served from a
- * sub-path.
- *
- * A docs page must never fetch a THIRD-PARTY image: without the public internet it cannot render,
- * and on CI it does not merely look wrong, it hangs — the request never settles, `networkidle`
- * never fires, and `page.goto` times out. Committed files cost no request that can hang and no
- * service that can disappear.
- */
-
-/**
- * Avatar — identity image with a readable fallback (users, teams, entities).
- * Always compose AvatarImage + AvatarFallback so broken/missing images degrade
- * gracefully. Size on the control ladder with `size` (xs/sm/md/lg, the same
- * --control-height tier Button reads); className only for sizes off that ladder.
- * Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  const { t } = useTranslation();
-  return (
-    <PageContainer title="Avatar" subtitle="Identity image with a readable fallback">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("avatarDocs.fitTitle")}</CardTitle>
-            <CardDescription>{t("avatarDocs.fitDescription")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {/* gh#1176: a wide logo — cover crops it, contain shows it whole. */}
-            <Flex direction="row" wrap align="center" gap="md">
-              <Flex direction="col" align="center" gap="xs">
-                <Avatar shape="square" size="lg">
-                  <AvatarImage src={shotLandscape} alt={t("avatarDocs.logo")} />
-                  <AvatarFallback>AC</AvatarFallback>
-                </Avatar>
-                <Text size="sm" tone="muted">
-                  cover
-                </Text>
-              </Flex>
-              <Flex direction="col" align="center" gap="xs">
-                <Avatar shape="square" size="lg">
-                  <AvatarImage src={shotLandscape} alt={t("avatarDocs.logo")} fit="contain" />
-                  <AvatarFallback>AC</AvatarFallback>
-                </Avatar>
-                <Text size="sm" tone="muted">
-                  contain
-                </Text>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Image + fallback</CardTitle>
-            <CardDescription>
-              Compose AvatarImage with AvatarFallback: a loaded photo shows the image, an avatar
-              with no image shows initials.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="md">
-              <Avatar>
-                <AvatarImage src={portraitSlate} alt="担当者" />
-                <AvatarFallback>NA</AvatarFallback>
-              </Avatar>
-              <Avatar>
-                <AvatarImage src={portraitPlum} alt="担当者" />
-                <AvatarFallback>TK</AvatarFallback>
-              </Avatar>
-              <Avatar>
-                <AvatarFallback>VB</AvatarFallback>
-              </Avatar>
-              <Avatar>
-                <AvatarFallback>経理</AvatarFallback>
-              </Avatar>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Fallback on a broken image</CardTitle>
-            <CardDescription>
-              When the src fails to load, AvatarImage swaps in the AvatarFallback automatically,
-              never a blank circle. delayMs holds the fallback back briefly so it does not flash
-              before a slow image arrives.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="md">
-              <Avatar>
-                <AvatarImage src="/__missing-avatar.png" alt="退職済みの担当者" />
-                <AvatarFallback>YM</AvatarFallback>
-              </Avatar>
-              <Avatar>
-                <AvatarImage src="/__missing-avatar.png" alt="未設定の担当者" />
-                <AvatarFallback delayMs={600}>HS</AvatarFallback>
-              </Avatar>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* shape="square" — the entity-header organization / service mark */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>エンティティヘッダー · shape=&quot;square&quot;</CardTitle>
-            <CardDescription>
-              組織・サービスのマークは shape=&quot;square&quot; (角丸スクエア +
-              ブランド面)、人物は既定の shape=&quot;circle&quot;。 半径・サイズ・配色はすべて
-              --avatar-square-* トークン所有なので、サービス側は className を上書きせずテーマ 1
-              か所で調整できる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" align="center" gap="md">
-                <Avatar shape="square">
-                  <AvatarFallback>山</AvatarFallback>
-                </Avatar>
-                <Flex direction="col">
-                  <Text weight="medium">株式会社山田商事</Text>
-                  <Text size="xs" tone="muted">
-                    組織 · 取引先コード 100482
-                  </Text>
-                </Flex>
-              </Flex>
-              <Flex direction="row" wrap align="center" gap="md">
-                <Avatar shape="square">
-                  <AvatarImage src={portraitIndigo} alt="組織ロゴ" />
-                  <AvatarFallback>山</AvatarFallback>
-                </Avatar>
-                <Avatar shape="square">
-                  <AvatarFallback>経理</AvatarFallback>
-                </Avatar>
-                <Avatar shape="square" className="size-12">
-                  <AvatarFallback>DX</AvatarFallback>
-                </Avatar>
-                <Avatar shape="circle">
-                  <AvatarFallback>田</AvatarFallback>
-                </Avatar>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* appearance="tinted" — the capability medallion */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              ケイパビリティ メダリオン · appearance=&quot;tinted&quot;
-            </CardTitle>
-            <CardDescription>
-              機能・ケイパビリティのアイコンは、淡いロール地の角丸スクエア（メダリオン）に載せる。
-              メダリオンは Avatar + Lucide グリフの合成パターン（docs/COMPOSITION-VS-COMPONENT.md）
-              なので、ライブラリが持つべきは「淡色」そのもの · appearance=&quot;tinted&quot;。
-              これが無いと消費側は hsl(var(--primary) / 0.1) をページ CSS
-              に書き写すか、素のグリフを置くしかなかった。 shape と直交するので、円形メダリオンも
-              同じ 1 語で得られる。配色は --avatar-tinted-* トークン所有。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {/* The left-aligned capability card: medallion, title, one line of prose. */}
-              <Flex direction="row" align="center" gap="md">
-                <Avatar shape="square" appearance="tinted">
-                  <AvatarFallback>
-                    <ShieldCheck aria-hidden="true" />
-                  </AvatarFallback>
-                </Avatar>
-                <Flex direction="col">
-                  <Text weight="medium">シングルサインオン</Text>
-                  <Text size="xs" tone="muted">
-                    1 つの ID で全サービスへ
-                  </Text>
-                </Flex>
-              </Flex>
-              <Flex direction="row" wrap align="center" gap="md">
-                <Avatar shape="square" appearance="tinted">
-                  <AvatarFallback>
-                    <KeyRound aria-hidden="true" />
-                  </AvatarFallback>
-                </Avatar>
-                <Avatar shape="square" appearance="tinted">
-                  <AvatarFallback>
-                    <Building2 aria-hidden="true" />
-                  </AvatarFallback>
-                </Avatar>
-                <Avatar appearance="tinted">
-                  <AvatarFallback>
-                    <Sparkles aria-hidden="true" />
-                  </AvatarFallback>
-                </Avatar>
-                {/* Solid entity mark beside it — the two treatments are different jobs. */}
-                <Avatar shape="square">
-                  <AvatarFallback>山</AvatarFallback>
-                </Avatar>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* presence — the realtime reachability dot */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>プレゼンス · presence</CardTitle>
-            <CardDescription>
-              「今つながるか」はマークの上に出る。presence を渡すとドットとローカライズ済みの
-              sr-only テキストが同時に付く（色だけで状態を伝えない · WCAG 1.4.1）。 4
-              つの値は色に加えて形でも区別する。online は塗り、away は下半分塗り、busy
-              は横棒入り、offline は中空リング。 グレースケールでも、色覚特性があっても、Windows
-              ハイコントラストでも 4 状態が判別できる。 直径・食い込み・リング幅・リング色は
-              --avatar-presence-* トークン所有（#44 / #45）。 直径はマークに対する比率なので、size-8
-              でも size-12 でも組織マークでも同じ 1 つの値で追従する。 presence
-              を渡さない＝「プレゼンスという概念が無い」（組織マーク）で、DOM
-              には何も出ない。presence=&quot;offline&quot; は「不在だと分かっている」で、別の意味。
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <ListRow
-              leading={
-                <Avatar presence="online">
-                  <AvatarImage src={portraitSlate} alt="" />
-                  <AvatarFallback>田</AvatarFallback>
-                </Avatar>
-              }
-              title="田中 未来"
-              description="プロダクト · #general"
-            />
-            <ListRow
-              leading={
-                <Avatar presence="busy">
-                  <AvatarImage src={portraitPlum} alt="" />
-                  <AvatarFallback>佐</AvatarFallback>
-                </Avatar>
-              }
-              title="佐藤 玲"
-              description="デザイン · #general"
-            />
-            <ListRow
-              leading={
-                <Avatar presence="away">
-                  <AvatarFallback>鈴</AvatarFallback>
-                </Avatar>
-              }
-              title="鈴木 大輔"
-              description="エンジニアリング · #general"
-            />
-            <ListRow
-              leading={
-                <Avatar presence="offline">
-                  <AvatarFallback>山</AvatarFallback>
-                </Avatar>
-              }
-              title="山本 彩"
-              description="サポート · #general"
-            />
-            {/* No presence at all — an organization mark has no reachability to report. */}
-            <ListRow
-              leading={
-                <Avatar shape="square">
-                  <AvatarFallback>山</AvatarFallback>
-                </Avatar>
-              }
-              title="株式会社山田商事"
-              description="組織 · プレゼンスの概念なし"
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>プレゼンス · 4 状態と寸法追従</CardTitle>
-            <CardDescription>
-              上段は 4 状態を写真の上に重ねたもの。リングが写真から
-              ドットを切り離すために幅を稼いでいることが分かる。 中段は同じ
-              presence=&quot;online&quot; を size-8 / 既定 / size-12 / 組織マークに載せたもので、
-              ドットが px 固定ではなくマーク比で追従することを示す。下段は密度の高い行（36px
-              マーク）での見え方。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" wrap align="center" gap="md">
-                <Avatar presence="online">
-                  <AvatarImage src={portraitMoss} alt="オンライン" />
-                  <AvatarFallback>在</AvatarFallback>
-                </Avatar>
-                <Avatar presence="away">
-                  <AvatarImage src={portraitAmber} alt="離席中" />
-                  <AvatarFallback>離</AvatarFallback>
-                </Avatar>
-                <Avatar presence="busy">
-                  <AvatarImage src={portraitClay} alt="取り込み中" />
-                  <AvatarFallback>取</AvatarFallback>
-                </Avatar>
-                <Avatar presence="offline">
-                  <AvatarImage src={portraitIris} alt="オフライン" />
-                  <AvatarFallback>離</AvatarFallback>
-                </Avatar>
-              </Flex>
-              <Flex direction="row" wrap align="center" gap="md">
-                <Avatar className="size-8" presence="online">
-                  <AvatarFallback>S</AvatarFallback>
-                </Avatar>
-                <Avatar presence="online">
-                  <AvatarFallback>D</AvatarFallback>
-                </Avatar>
-                <Avatar className="size-12" presence="online">
-                  <AvatarFallback>L</AvatarFallback>
-                </Avatar>
-                <Avatar shape="square" presence="online">
-                  <AvatarFallback>山</AvatarFallback>
-                </Avatar>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent flush>
-            <ListRow
-              density="compact"
-              leading={
-                <Avatar className="size-9" presence="busy" presenceLabel="会議中 · 15:00まで">
-                  <AvatarFallback>佐</AvatarFallback>
-                </Avatar>
-              }
-              title="佐藤 玲"
-              description="presenceLabel でプロダクト側の言い回しに差し替え（表示はされない）"
-            />
-          </CardContent>
-        </Card>
-
-        {/* size — the control ladder (gh#716) */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>サイズ · size</CardTitle>
-            <CardDescription>
-              xs 24px / sm 28px / md 32px（既定） / lg 36px。すべて Button や Input と同じ
-              --control-height の段なので、同じ段の Button
-              と並べたときに高さがそろう。イニシャルの級数もグリフの箱も同じ段で動くため、小さい
-              マークは「小さい」であって「切れている」ではない。shape=&quot;square&quot;
-              も同じ段に乗る。 ラダーの外側のサイズ（プロフィール用の 96px マークなど）は従来どおり
-              className。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" wrap align="center" gap="md">
-                <Avatar size="xs">
-                  <AvatarFallback>XS</AvatarFallback>
-                </Avatar>
-                <Avatar size="sm">
-                  <AvatarFallback>SM</AvatarFallback>
-                </Avatar>
-                <Avatar>
-                  <AvatarFallback>MD</AvatarFallback>
-                </Avatar>
-                <Avatar size="lg">
-                  <AvatarFallback>LG</AvatarFallback>
-                </Avatar>
-              </Flex>
-              {/* square rides the identical ladder */}
-              <Flex direction="row" wrap align="center" gap="md">
-                <Avatar size="xs" shape="square">
-                  <AvatarFallback>山</AvatarFallback>
-                </Avatar>
-                <Avatar size="sm" shape="square">
-                  <AvatarFallback>山</AvatarFallback>
-                </Avatar>
-                <Avatar shape="square">
-                  <AvatarFallback>山</AvatarFallback>
-                </Avatar>
-                <Avatar size="lg" shape="square">
-                  <AvatarFallback>山</AvatarFallback>
-                </Avatar>
-              </Flex>
-              {/* the glyph steps with the box, so a medallion is never clipped */}
-              <Flex direction="row" wrap align="center" gap="md">
-                <Avatar size="xs" shape="square" appearance="tinted">
-                  <AvatarFallback>
-                    <ShieldCheck aria-hidden="true" />
-                  </AvatarFallback>
-                </Avatar>
-                <Avatar size="sm" shape="square" appearance="tinted">
-                  <AvatarFallback>
-                    <ShieldCheck aria-hidden="true" />
-                  </AvatarFallback>
-                </Avatar>
-                <Avatar shape="square" appearance="tinted">
-                  <AvatarFallback>
-                    <ShieldCheck aria-hidden="true" />
-                  </AvatarFallback>
-                </Avatar>
-                <Avatar size="lg" shape="square" appearance="tinted">
-                  <AvatarFallback>
-                    <ShieldCheck aria-hidden="true" />
-                  </AvatarFallback>
-                </Avatar>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* The row that could not be built before #716 */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>行に入るマーク · size=&quot;sm&quot; と icon-sm</CardTitle>
-            <CardDescription>
-              行の高さが先に決まっている場所（28px の icon-sm トリガ、24/28px
-              の密なテーブル行）では、マークの側が行に合わせる。#716 以前は箱が --control-height
-              に固定されていたため、28px のトリガに 32px
-              のマークが入って外へはみ出し、消費側に残された手は「行全体を 32px
-              に上げる」だけだった。 下の 1 段目は同じ段の Button と並べたもの、2 段目は icon-sm
-              トリガの中に入れたもの。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" wrap align="center" gap="sm">
-                <Avatar size="sm">
-                  <AvatarImage src={portraitSlate} alt="" />
-                  <AvatarFallback>田</AvatarFallback>
-                </Avatar>
-                <Button size="sm" variant="outline">
-                  担当者を変更
-                </Button>
-                <Avatar size="xs">
-                  <AvatarFallback>佐</AvatarFallback>
-                </Avatar>
-                <Button size="xs" variant="outline">
-                  履歴
-                </Button>
-              </Flex>
-              <Flex direction="row" wrap align="center" gap="sm">
-                <Button size="icon-sm" variant="ghost" aria-label="担当者 田中 未来">
-                  <Avatar size="sm">
-                    <AvatarImage src={portraitMoss} alt="" />
-                    <AvatarFallback>田</AvatarFallback>
-                  </Avatar>
-                </Button>
-                <Button size="icon-xs" variant="ghost" aria-label="担当者 佐藤 玲">
-                  <Avatar size="xs">
-                    <AvatarFallback>佐</AvatarFallback>
-                  </Avatar>
-                </Button>
-                <Text as="p" size="xs" tone="muted">
-                  マークはトリガの内寸に収まる（28px の中に 28px、24px の中に 24px）。
-                </Text>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ラダーの外 · className</CardTitle>
-            <CardDescription>
-              コントロール行の段に無いサイズ（プロフィールヘッダの大きなマークなど）は、従来どおり
-              size-* ユーティリティで指定する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="md">
-              <Avatar className="size-10">
-                <AvatarFallback>M</AvatarFallback>
-              </Avatar>
-              <Avatar className="size-12">
-                <AvatarFallback>L</AvatarFallback>
-              </Avatar>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}