@godxjp/ui 27.3.1 → 27.5.0

package/docs/data-display/avatar.tsx

@@ -9,7 +9,7 @@ import {
   CardTitle,
   ListRow,
 } from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
+import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { Building2, KeyRound, ShieldCheck, Sparkles } from "lucide-react";
 
@@ -34,7 +34,9 @@ import portraitSlate from "../assets/portrait-slate.svg";
 /**
  * Avatar — identity image with a readable fallback (users, teams, entities).
  * Always compose AvatarImage + AvatarFallback so broken/missing images degrade
- * gracefully. Size via className. Composed only from real @godxjp/ui components.
+ * 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() {
   return (
@@ -322,25 +324,140 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* size — the control ladder (gh#716) */}
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Sizes</CardTitle>
+            <CardTitle level={2}>サイズ · size</CardTitle>
             <CardDescription>
-              Default is var(--control-height); override with a size-* utility (size-8 / size-10 /
-              size-12).
+              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-8">
-                <AvatarFallback>S</AvatarFallback>
-              </Avatar>
               <Avatar className="size-10">
                 <AvatarFallback>M</AvatarFallback>
               </Avatar>
-              <Avatar>
-                <AvatarFallback>D</AvatarFallback>
-              </Avatar>
               <Avatar className="size-12">
                 <AvatarFallback>L</AvatarFallback>
               </Avatar>

package/docs/data-display/prose.tsx

@@ -13,6 +13,34 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
  * semantic HTML inside it from the tokens; the HTML can come from react-markdown, a sanitised
  * string or JSX. Composed only from real @godxjp/ui components.
  */
+
+/**
+ * A CONSUMER'S OWN STYLESHEET — the file their app already has, not part of the package. It is
+ * inlined here so the third card below is the real thing rather than a description of it.
+ *
+ * Both halves of the gh#717 contract are exercised:
+ *   · `--prose-link-*` — the service tunes every link in its wiki once, through the knob;
+ *   · `a[data-unresolved]` — Prose writes `data-*` on its own ROOT only, so every `data-*` on a
+ *     descendant `a` is the consumer's and stays selectable. That is a promise, held by
+ *     src/components/data-display/__tests__/prose-link-717.test.tsx.
+ *
+ * Measured on the card surface (#fdfdfc light / #21201c dark):
+ *   resolved   --text-link  #6400d4 → 8.29:1 light · #dcbcff → 9.85:1 dark
+ *   unresolved --text-error #aa181f → 7.25:1 light · #eb7076 → 5.51:1 dark
+ * The TEXT tier, never `--destructive`: that is the FILL tier, tuned for a white label on top of
+ * it, and it measures 2.95:1 as ink on the dark card (gh#610).
+ */
+const WIKI_STYLESHEET = `
+[data-wiki] {
+  --prose-link-color: var(--text-link);
+}
+
+[data-wiki] a[data-unresolved="true"] {
+  --prose-link-color: var(--text-error);
+  text-decoration-style: dashed;
+}
+`;
+
 export default function Demo() {
   return (
     <PageContainer title="Prose" subtitle="レンダリングされた本文のタイポグラフィ">
@@ -99,6 +127,42 @@ export default function Demo() {
             </Prose>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Wiki body · リンクの状態 (--prose-link-*)</CardTitle>
+            <CardDescription>
+              リンクの色と下線は --prose-link-color / --prose-link-decoration-line で調整する。Prose
+              は自身のルート以外に data-* を書かないため、a[data-…]
+              は利用側が所有するセレクタとして保証される。ここではまだ存在しないページへのリンクを
+              --text-error ＋破線で示した。カード面でのコントラストは、解決済み 8.29:1 (ライト) /
+              9.85:1 (ダーク)、未解決 7.25:1 / 5.51:1。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <style>{WIKI_STYLESHEET}</style>
+            <Prose size="md" data-wiki="">
+              <h2>出張費の精算</h2>
+              <p>
+                原則は <a href="#rules">精算規程</a> に従う。宿泊費の上限は地域区分で変わるため、
+                <a href="#lodging" data-unresolved="true">
+                  宿泊費区分表
+                </a>{" "}
+                を参照すること（このページはまだ書かれていない）。
+              </p>
+              <ul>
+                <li>
+                  <a href="#receipt">領収書の要件</a>
+                </li>
+                <li>
+                  <a href="#foreign" data-unresolved="true">
+                    海外出張の為替レート
+                  </a>
+                </li>
+              </ul>
+            </Prose>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/segmented.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, Segmented } from "@godxjp/ui/data-entry";
-import { Text, VisuallyHidden } from "@godxjp/ui/general";
+import { FormField, Segmented, ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
+import { Button, Text, VisuallyHidden } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { CalendarDays, Columns3, LayoutList, Monitor, Moon, Sun } from "lucide-react";
 
@@ -110,14 +110,25 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>size · vertical · block</CardTitle>
             <CardDescription>
-              size は 3 段（sm / md / lg）。トラックの高さは --control-height そのもので、
-              MobileShell のようにその変数をスコープする領域では自動的にタッチ段（44px）になります。
-              vertical では 1 行ぶんが 1 コントロールの高さになります。横 1 行のときだけトラック
+              size は 4 段（xs 24px / sm 28px / md 32px / lg 36px）。トラックの高さは
+              --control-height そのもので、MobileShell のようにその変数をスコープする領域では
+              自動的にタッチ段（44px）になります。vertical では 1 行ぶんが 1
+              コントロールの高さになります。横 1 行のときだけトラック
               内側の余白を引くので、積んだときは引きません。block は幅いっぱいに広げます。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md" align="start">
+              <Segmented
+                aria-label="サイズ xs"
+                size="xs"
+                defaultValue="a"
+                options={[
+                  { value: "a", label: "小" },
+                  { value: "b", label: "中" },
+                  { value: "c", label: "大" },
+                ]}
+              />
               <Segmented
                 aria-label="サイズ sm"
                 size="sm"
@@ -162,6 +173,45 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>24px の密な行 · size=&quot;xs&quot;</CardTitle>
+            <CardDescription>
+              行の高さが 24px に決まっている監査ログや明細ツールバーでは、xs
+              のトラックがそのまま収まる。同じ段の ToggleGroup size=&quot;xs&quot; と Button
+              size=&quot;xs&quot; と高さが一致するので、行が段差にならない。ここで xs
+              が無かったころは Button を並べて自作するしかなく、radiogroup
+              の読み上げも矢印キーも失われていた。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Flex direction="row" gap="sm" align="center">
+                <Segmented
+                  aria-label="表示期間"
+                  size="xs"
+                  defaultValue="week"
+                  options={[
+                    { value: "day", label: "日" },
+                    { value: "week", label: "週" },
+                    { value: "month", label: "月" },
+                  ]}
+                />
+                <ToggleGroup type="single" size="xs" defaultValue="list" aria-label="表示形式">
+                  <ToggleGroupItem value="list">一覧</ToggleGroupItem>
+                  <ToggleGroupItem value="board">ボード</ToggleGroupItem>
+                </ToggleGroup>
+                <Button size="xs" variant="outline">
+                  絞り込み
+                </Button>
+              </Flex>
+              <Text as="p" size="xs" tone="muted">
+                いずれも --control-height-xs（24px）。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>短い記号を出して、長い名前を読ませる</CardTitle>

package/docs/data-entry/toggle-group.tsx

@@ -129,14 +129,26 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>size · sm / md / lg</CardTitle>
+            <CardTitle level={2}>size · xs / sm / md / lg</CardTitle>
             <CardDescription>
-              size も ToggleGroup にだけ指定すれば全アイテムへ伝播する。md
-              が既定。周囲のコントロール密度に合わせて sm または lg を選ぶ。
+              size も ToggleGroup にだけ指定すれば全アイテムへ伝播する。md が既定。xs 24px / sm 28px
+              / md 32px / lg 36px はすべて --control-height
+              の同じ段なので、行の高さが先に決まっている場所ではその段を選ぶ。xs は 24px
+              の密な行にセグメントを載せるための段。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  size=&quot;xs&quot; · 24px の密な行
+                </Text>
+                <ToggleGroup type="single" size="xs" defaultValue="day">
+                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
+                  <ToggleGroupItem value="month">月次</ToggleGroupItem>
+                  <ToggleGroupItem value="year">年次</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
               <Flex direction="col" gap="sm">
                 <Text as="p" size="sm" tone="muted">
                   size=&quot;sm&quot;

package/docs/data-entry/toggle.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { Toggle } from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -73,10 +74,18 @@ export default function Demo() {
         <Card>
           <CardHeader>
             <CardTitle level={2}>Sizes</CardTitle>
-            <CardDescription>sm / md / lg · match surrounding density.</CardDescription>
+            <CardDescription>
+              xs 24px / sm 28px / md 32px / lg 36px · すべて --control-height
+              の同じ段。行の高さが先に決まっている場所では、その段を選ぶ。xs は 24px
+              の密な行にセグメント状のチップを載せるための段で、Button
+              を並べて自作する代わりになる。
+            </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="row" gap="md" align="center">
+              <Toggle size="xs" aria-label="極小サイズ">
+                極小
+              </Toggle>
               <Toggle size="sm" aria-label="小サイズ">
                 小
               </Toggle>
@@ -90,6 +99,35 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>24px の密な行 · size=&quot;xs&quot;</CardTitle>
+            <CardDescription>
+              行の高さが 24px に決まっている監査ログや明細ツールバーでは、xs
+              のチップがそのまま収まる。同じ段の Button size=&quot;xs&quot;
+              と高さが一致するので、行が段差にならない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Flex direction="row" gap="sm" align="center">
+                <Toggle size="xs" defaultPressed aria-label="未読のみ">
+                  未読のみ
+                </Toggle>
+                <Toggle size="xs" aria-label="添付あり">
+                  添付あり
+                </Toggle>
+                <Button size="xs" variant="outline">
+                  絞り込み
+                </Button>
+              </Flex>
+              <Text as="p" size="xs" tone="muted">
+                いずれも --control-height-xs（24px）。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Count</CardTitle>

package/docs/data-entry/upload.tsx

@@ -36,6 +36,25 @@ export default function Demo() {
   const [pictureItem, setPictureItem] = useState<UploadFileItem[]>([]);
   const [avatarItem, setAvatarItem] = useState<UploadFileItem[]>([]);
   const [avatarCropItem, setAvatarCropItem] = useState<UploadFileItem[]>([]);
+  /** A test-result drawer: one screenshot, one machine-readable result, one log, one archive. */
+  const mixedItems: UploadFileItem[] = [
+    {
+      uid: "mixed-screenshot",
+      name: "screenshot.png",
+      size: 184 * 1024,
+      mimeType: "image/png",
+      status: "done",
+      previewUrl:
+        "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72'><rect width='72' height='72' fill='%23c9c6bd'/><circle cx='26' cy='26' r='9' fill='%238a877d'/></svg>",
+    },
+    // Server media whose thumbnail has not been generated yet: still an image, still marked as one.
+    { uid: "mixed-original", name: "photo-original.png", size: 4 * 1024 * 1024, status: "done" },
+    { uid: "mixed-result", name: "result.json", size: 12 * 1024, status: "done" },
+    { uid: "mixed-log", name: "run.txt", size: 3 * 1024, status: "done" },
+    { uid: "mixed-bundle", name: "evidence.zip", size: 2 * 1024 * 1024, status: "done" },
+    { uid: "mixed-spec", name: "spec.pdf", size: 640 * 1024, status: "done" },
+    { uid: "mixed-dump", name: "device-dump", size: 96 * 1024, status: "done" },
+  ];
   const failedItems: UploadFileItem[] = [
     {
       uid: "failed-invoice",
@@ -105,6 +124,25 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>List type · 添付ファイル一覧</CardTitle>
+            <CardDescription>
+              listType は variant と独立した軸です。dropzone のまま listType=&quot;picture&quot;
+              にすると、画像はサムネイル、それ以外はファイル種別のアイコンで並びます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Upload
+              variant="dropzone"
+              listType="picture"
+              value={mixedItems}
+              onValueChange={() => {}}
+              onDownload={() => {}}
+            />
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Error and recovery</CardTitle>