@godxjp/ui 23.1.0 → 23.2.0

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

@@ -0,0 +1,159 @@
+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/swatch.tsx

@@ -0,0 +1,107 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ListRow,
+  Swatch,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const BRAND = {
+  name: "株式会社山田製作所",
+  primary: "#0071bd",
+  secondary: "#c0392f",
+};
+
+const CATEGORIES = [
+  { name: "定例会議", color: "#7c3aed" },
+  { name: "出張", color: "#0f9d58" },
+  { name: "締切", color: "#c0392f" },
+  { name: "予備", color: "#ffffff" },
+];
+
+/**
+ * Swatch — a read-only sample of ONE colour a person chose.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer title="Swatch" subtitle="利用者が選んだ色を、そのまま見せる読み取り専用の見本">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ブランドカラー</CardTitle>
+            <CardDescription>
+              組織が登録した色は tone ではなく値です。見本に名前を渡すと、見える文字を増やさずに
+              読み上げられます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Flex align="center" gap="sm">
+                <Swatch color={BRAND.primary} aria-label={`プライマリカラー: ${BRAND.primary}`} />
+                <Text weight="medium">{BRAND.name}</Text>
+                <Text tone="muted" mono size="xs">
+                  {BRAND.primary}
+                </Text>
+              </Flex>
+              <Flex align="center" gap="sm">
+                <Swatch
+                  color={BRAND.secondary}
+                  aria-label={`セカンダリカラー: ${BRAND.secondary}`}
+                />
+                <Text weight="medium">{BRAND.name}</Text>
+                <Text tone="muted" mono size="xs">
+                  {BRAND.secondary}
+                </Text>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>一覧の先頭マークとして</CardTitle>
+            <CardDescription>
+              行のラベルが色の意味を言っているので、見本は aria-hidden
+              のままにします。同じことを二度読み上げないためです。最後の「予備」は白で、
+              白いカードの上でも見本の輪郭が残ることを示します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="none">
+              {CATEGORIES.map((category) => (
+                <ListRow
+                  key={category.name}
+                  leading={<Swatch color={category.color} />}
+                  title={category.name}
+                  description={category.color}
+                />
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>色の形式は問いません</CardTitle>
+            <CardDescription>
+              hex でも rgb() でも oklch() でも、CSS の色として有効ならそのまま塗ります。
+              値はスタイルシートには入らず、要素の上にだけ乗ります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex align="center" gap="md" wrap>
+              <Swatch color="#7c3aed" aria-label="hex: #7c3aed" />
+              <Swatch color="rgb(15 157 88)" aria-label="rgb: rgb(15 157 88)" />
+              <Swatch color="oklch(0.72 0.15 45)" aria-label="oklch: oklch(0.72 0.15 45)" />
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/thumbnail.tsx

@@ -0,0 +1,128 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Thumbnail,
+} from "@godxjp/ui/data-display";
+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, imported so the bundler rewrites each URL against
+ * PREVIEW_BASE. A docs page must never fetch a third-party image: on CI the request never
+ * settles, `networkidle` never fires, and the page load times out. */
+
+/** Four DIFFERENT intrinsic ratios — the case AspectRatio cannot express with one number. */
+const SHOTS = [
+  { src: shotPortrait, width: 360, height: 640, alt: "モバイル版の一覧画面" },
+  { src: shotLandscape, width: 960, height: 540, alt: "デスクトップ版のダッシュボード" },
+  { src: coverTerrain, width: 480, height: 270, alt: "ストア掲載用のカバー画像" },
+  { src: portraitIris, width: 96, height: 96, alt: "アプリアイコン" },
+];
+
+/**
+ * Thumbnail — 高さは固定、幅は画像そのものの比率。囲みは画像に直接かかる hairline。
+ *
+ * AspectRatio は比率を固定して幅 100% に広げるので、比率の違う数枚を並べるとレターボックスか
+ * 切り抜きになる。Avatar は人・組織の識別マーク、Card は囲みと画像のあいだに padding を入れる、
+ * CardCover は Card の中のスロット。Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer title="Thumbnail" subtitle="高さ固定・幅は実寸比 · 画像に直接かかる hairline">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>比率の違う画像を 1 行に並べる</CardTitle>
+            <CardDescription>
+              縦長・横長・ワイド・正方形が同じ行に並んでも、高さはそろい、幅はそれぞれの比率の
+              まま。切り抜きもレターボックスも起きません。狭い画面では折り返します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex gap="sm" wrap align="start">
+              {SHOTS.map((shot) => (
+                <Thumbnail key={shot.alt} size="lg" {...shot} />
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>size · sm · md（既定）· lg</CardTitle>
+            <CardDescription>
+              sm 64px は添付ファイルの行に、md 96px はギャラリー行に、lg 160px は画像そのものが
+              本文である審査画面に。px 指定はありません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex gap="sm" wrap align="start">
+                <Thumbnail size="sm" {...SHOTS[0]} />
+                <Thumbnail size="sm" {...SHOTS[1]} />
+              </Flex>
+              <Flex gap="sm" wrap align="start">
+                <Thumbnail {...SHOTS[0]} />
+                <Thumbnail {...SHOTS[1]} />
+              </Flex>
+              <Flex gap="sm" wrap align="start">
+                <Thumbnail size="lg" {...SHOTS[0]} />
+                <Thumbnail size="lg" {...SHOTS[1]} />
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>読み込み前に幅を確保する</CardTitle>
+            <CardDescription>
+              幅が実寸比のままということは、画像が届くまで幅が決まらないということでもあります。
+              元ファイルの width / height をそのまま渡すと、ブラウザが比率を先に知るので、
+              高さが固定されている分だけ最初の描画から最終的な幅になります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex gap="sm" wrap align="start">
+              <Thumbnail
+                src={shotPortrait}
+                width={360}
+                height={640}
+                alt="幅を先に確保した縦長の画面"
+              />
+              <Thumbnail
+                src={shotLandscape}
+                width={960}
+                height={540}
+                alt="幅を先に確保した横長の画面"
+                loading="lazy"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>alt は省略できない</CardTitle>
+            <CardDescription>
+              型の上で必須です。ページが既に述べていることしか写っていない画像には alt=&quot;&quot;
+              を渡します —— 空文字は著者が下す「決定」で、属性そのものを書き忘れるのとは違います
+              （WCAG 1.1.1）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex gap="sm" wrap align="start">
+              <Thumbnail src={coverTerrain} width={480} height={270} alt="" />
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/feedback/skeleton.tsx

@@ -1,6 +1,12 @@
 import {
   Skeleton,
+  SkeletonArticle,
+  SkeletonAvatar,
+  SkeletonButton,
   SkeletonDetail,
+  SkeletonImage,
+  SkeletonInput,
+  SkeletonNode,
   SkeletonRows,
   SkeletonStat,
   SkeletonTable,
@@ -14,6 +20,8 @@ import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
  *   SkeletonTable · pre-mount DataTable placeholder (rows, columns props).
  *   SkeletonStat · StatCard/KPI tile placeholder (no props; use in ResponsiveGrid).
  *   SkeletonDetail · single-record detail placeholder (title + metadata rows, no props).
+ *   SkeletonArticle · avatar + heading + paragraph (Ant Design's own Skeleton shape).
+ *   SkeletonAvatar/Button/Input/Node/Image · the shaped presets, also on the Skeleton namespace.
  * Never use a spinner overlay on skeletonable content.
  */
 export default function Demo() {
@@ -48,6 +56,55 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>SkeletonArticle · avatar + heading + paragraph</CardTitle>
+            <CardDescription>
+              Ant Design's own Skeleton shape. Defaults follow it exactly: no avatar, a 38% heading
+              and three body lines; with an avatar the heading drops to 50% and the body to two
+              lines. `active` swaps the resting pulse for the travelling sheen · `round` pills every
+              line · `loading={false}` renders children instead.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <SkeletonArticle />
+              <SkeletonArticle avatar />
+              <SkeletonArticle avatar active round paragraph={{ rows: 4, width: ["90%", "80%"] }} />
+              <SkeletonArticle avatar paragraph={false} title={{ width: "14rem" }} />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Shaped presets · the boxes the controls occupy</CardTitle>
+            <CardDescription>
+              Each preset carries the box of the control it stands in for, from the --control-height
+              tier · SkeletonButton is two heights wide, SkeletonInput five. Reachable as named
+              exports or through the Skeleton namespace (Skeleton.Button…).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" gap="sm" align="center" wrap>
+                <SkeletonAvatar size="sm" />
+                <SkeletonAvatar />
+                <SkeletonAvatar size="lg" shape="square" />
+                <SkeletonButton size="sm" />
+                <SkeletonButton />
+                <SkeletonButton size="lg" shape="pill" active />
+                <SkeletonInput size="sm" />
+              </Flex>
+              <SkeletonInput block />
+              <Flex direction="row" gap="sm" align="center" wrap>
+                <SkeletonNode />
+                <SkeletonImage active />
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle>SkeletonRows · generic repeated rows</CardTitle>

package/docs/layout/flex.tsx

@@ -280,6 +280,35 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>刻みにない幅で折りたたむ</CardTitle>
+            <CardDescription>
+              hideBelow の 4 段（40/48/64/80rem）に無い幅は hideBelowRaw / hideFromRaw
+              で指定します。900px ちょうどでは「広い側」だけが残り、両方消える隙間はありません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex align="center" gap="sm">
+              <Flex id="raw-wide-nav" hideBelowRaw={900} align="center" gap="sm">
+                <Button variant="ghost" size="sm">
+                  機能
+                </Button>
+                <Button variant="ghost" size="sm">
+                  料金
+                </Button>
+                <Button variant="ghost" size="sm">
+                  導入事例
+                </Button>
+              </Flex>
+              <Flex id="raw-narrow-nav" hideFromRaw={900} align="center" gap="sm">
+                <Button variant="outline" size="sm">
+                  メニュー
+                </Button>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>軽い強調と行アクション</CardTitle>

package/docs/layout/sidebar.tsx

@@ -39,6 +39,7 @@ import {
   PanelLeftClose,
   PanelLeftOpen,
   Search,
+  ChevronsUpDown,
 } from "lucide-react";
 
 /**
@@ -229,18 +230,31 @@ export default function Demo() {
         color: "hsl(var(--primary))",
       }}
       onProductClick={() => undefined}
-      footer={
-        <Flex direction="col" gap="xs">
-          <Text as="div" weight="medium">
-            山田 太郎
-          </Text>
-          <Flex align="center" gap="xs">
-            <span className="bg-success size-1.5 rounded-full" />
-            <Text size="xs" tone="muted">
-              オンライン
+      /*
+       * footer · brand と同じ「関数を渡すと EFFECTIVE な collapsed が来る」形。自前の collapsed
+       * を読むと、AppShell が同じ Sidebar をドロワーにも渡す（ドロワーは展開表示に戻す）ため
+       * 全幅のドロワーの中でアイコンだけの足元になります。
+       */
+      footer={(railCollapsed) =>
+        railCollapsed ? (
+          <Flex justify="center">
+            <Avatar className="size-7 shrink-0">
+              <AvatarFallback>山</AvatarFallback>
+            </Avatar>
+          </Flex>
+        ) : (
+          <Flex direction="col" gap="xs">
+            <Text as="div" weight="medium">
+              山田 太郎
             </Text>
+            <Flex align="center" gap="xs">
+              <span className="bg-success size-1.5 rounded-full" />
+              <Text size="xs" tone="muted">
+                オンライン
+              </Text>
+            </Flex>
           </Flex>
-        </Flex>
+        )
       }
     />
   );
@@ -574,6 +588,46 @@ export default function Demo() {
             </CardContent>
           </Card>
 
+          {/* trailingIcon · 行の末尾に置く 16px の「開くよ」グリフ。badge（件数ピル）とは別枠。 */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>trailingIcon プロップ（末尾のグリフ）</CardTitle>
+              <CardDescription>
+                ワークスペース切替のような「押すと何か開く」行の末尾に置く 16px
+                のグリフです。件数ピルの badge とは別の枠で、背景も角丸も描きません · badge に ⌃⌄
+                を入れると .sb-badge の灰色ピル（実測 36×24、中の SVG は 24×24）に
+                なってしまうため、サイズを DS 側で固定した専用の枠にしています。 icon
+                と同じくコンポーネントを渡す形なので、SVG の寸法は 16px に固定されます。
+                折りたたみレールでは badge と同じように隠れます。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Card className="h-64 w-64 overflow-hidden">
+                <CardContent flush>
+                  <Flex direction="col">
+                    <Sidebar
+                      ariaLabel="切替行つきのナビゲーション"
+                      activeId={brandActiveId}
+                      onSelect={setBrandActiveId}
+                      sections={BRAND_SECTIONS}
+                      aria-label="trailingIcon 例のナビゲーション"
+                      footer={
+                        <SidebarItem
+                          item={{
+                            id: "workspace",
+                            label: "アクメ株式会社",
+                            icon: Building2,
+                            trailingIcon: ChevronsUpDown,
+                          }}
+                        />
+                      }
+                    />
+                  </Flex>
+                </CardContent>
+              </Card>
+            </CardContent>
+          </Card>
+
           {/* Feature notes */}
           <Card>
             <CardHeader>
@@ -590,6 +644,8 @@ export default function Demo() {
                   "badgeTone で未読（neutral）と自分宛て（destructive）を色だけで区別",
                   "disabled=true で項目を非活性化（クリック不可）",
                   "footer prop でスクロール外にユーザー情報を固定",
+                  "footer は brand と同じく関数も受け取る · 実効の collapsed が渡る",
+                  "trailingIcon で行の末尾に 16px のグリフ（切替の ⌃⌄ など）を置ける",
                   "linkComponent · ルーター Link は「要素だけ」渡す。行の中身はライブラリが組み立てる",
                   "linkComponent は葉・サブメニュー・折りたたみレール・フライアウトの全てに適用される",
                   "グループのトリガーは aria-expanded を持つ開閉ボタンのままなので linkComponent は適用されない",