@godxjp/ui 23.0.0 → 23.2.0

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/table.tsx

@@ -181,7 +181,7 @@ export default function Demo() {
               full frame. The suppression above is scoped to a flush body, never to `bordered`.
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          <CardContent flush>
             <Table bordered>
               <TableHeader>
                 <TableRow>

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/data-entry/segmented-in-filter-row.tsx

@@ -0,0 +1,77 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Segmented } from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * The composition a consumer actually filters a list with: a Segmented that carries a count badge
+ * per option, sharing a WRAPPING flex row with the other filter controls, inside a Card.
+ *
+ * It is a separate frame from `segmented.tsx` because the row is the variable. `#four-with-counts`
+ * over there puts the track directly in a CardContent, where it is a block box and shrinks to the
+ * column; here it is a FLEX ITEM, and a flex item's `min-inline-size` defaults to `auto` — its
+ * max-content width — so nothing makes it give ground to the row.
+ */
+const OPTIONS = [
+  { value: "all", label: "すべて", count: 133 },
+  { value: "ginou", label: "技能実習", count: 82 },
+  { value: "tokutei", label: "特定技能", count: 51 },
+  { value: "ikusei", label: "育成就労", count: 0 },
+].map(({ value, label, count }) => ({
+  value,
+  label: (
+    <>
+      {label}
+      <Badge as="span" variant="secondary">
+        {count}
+      </Badge>
+    </>
+  ),
+}));
+
+export default function SegmentedInFilterRow() {
+  return (
+    <PageContainer title="Segmented in a filter row" subtitle="4 択 + 件数バッジ · Flex wrap の中">
+      <Card id="four-in-wrap-row">
+        <CardHeader>
+          <CardTitle level={2}>制度の絞り込み</CardTitle>
+          <CardDescription>
+            `check:segmented-wrap` がこのカードも測ります。トラックは行の中でも縮み、393px
+            でラベルも件数も切り詰めません。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex gap="sm" align="center" wrap>
+            <Segmented aria-label="制度" defaultValue="all" options={OPTIONS} />
+            <Button variant="outline" size="sm">
+              絞り込みを解除
+            </Button>
+          </Flex>
+        </CardContent>
+      </Card>
+
+      <Card id="four-in-wrap-row-alone">
+        <CardHeader>
+          <CardTitle level={2}>同じトラック、行の中に一つだけ</CardTitle>
+          <CardDescription>
+            <Text size="sm" tone="muted">
+              兄弟が無くても行は行。フレックス項目としての縮み方を切り分けるための対照。
+            </Text>
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex gap="sm" align="center" wrap>
+            <Segmented aria-label="制度（単独）" defaultValue="all" options={OPTIONS} />
+          </Flex>
+        </CardContent>
+      </Card>
+    </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 は適用されない",

package/docs/navigation/dropdown-menu.tsx

@@ -70,7 +70,7 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="row" align="center" gap="md">
+            <Flex direction="row" align="center" gap="md" wrap>
               <Text>JE-0042 · 売上計上 ¥480,000</Text>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -102,7 +102,7 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="row" align="center" gap="md">
+            <Flex direction="row" align="center" gap="md" wrap>
               <DropdownMenu trigger={["contextMenu"]}>
                 <DropdownMenuTrigger asChild>
                   <Button variant="outline">仕訳 JE-0042 を右クリック</Button>
@@ -130,7 +130,7 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="row" align="center" gap="md">
+            <Flex direction="row" align="center" gap="md" wrap>
               <DropdownMenu trigger={["hover"]}>
                 <DropdownMenuTrigger asChild>
                   <Button variant="outline">エクスポート</Button>
@@ -171,7 +171,7 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="row" align="center" gap="md">
+            <Flex direction="row" align="center" gap="md" wrap>
               <span className="text-sm">
                 現在のステータス:{" "}
                 <strong>