@godxjp/ui 31.31.7 → 32.0.0

package/docs/layout/master-detail.tsx

@@ -1,390 +0,0 @@
-import { useState } from "react";
-import { CreditCard, ShieldCheck, Users } from "lucide-react";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  DataTable,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, MasterDetail, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Pass mobilePane="master" or "detail" for one-pane navigation below the token-owned collapse threshold.
- * Supply detailBack with a native back link; own selection in URL/router history.
- * Omit mobilePane to retain the original stacked composition.
- * MasterDetail · チーム画面 (SCR-110) の正準構成 — 流動的な一覧 + 固定幅の詳細レール。
- *
- * Shows: rail="detail" (既定 · 1fr / 320px) と rail="master" (先頭ナビゲーションレール)、
- * railWidth compact/standard、collapseBelow の全段階、そして master 側の選択コントロールを
- * aria-controls / フォーカス移動で detail region に結び付ける方法。
- *
- * 幾何はすべてトークン所有 (--master-detail-rail-*, --master-detail-gap,
- * --master-detail-collapse-below)。このページには grid-template-columns も
- * 画面幅ごとの余白指定も一切ありません — 1440 / 1024 / 390 のいずれでも同じ JSX です。
- *
- * 選択とキーボード操作は呼び出し側の責務 (ここでは DataTable の行クリックと
- * aria-pressed のトグルボタン)。MasterDetail はレイアウトと 2 つの region だけを所有します。
- */
-
-type Team = {
-  id: string;
-  name: string;
-  owner: string;
-  members: number;
-  updatedAt: string;
-  status: "active" | "pending";
-};
-
-const TEAMS: Team[] = [
-  {
-    id: "core",
-    name: "コアプラットフォーム",
-    owner: "佐藤 智",
-    members: 24,
-    updatedAt: "2026-07-28",
-    status: "active",
-  },
-  {
-    id: "billing",
-    name: "請求基盤",
-    owner: "田中 花子",
-    members: 12,
-    updatedAt: "2026-07-26",
-    status: "active",
-  },
-  {
-    id: "support",
-    name: "カスタマーサポート",
-    owner: "鈴木 一郎",
-    members: 38,
-    updatedAt: "2026-07-21",
-    status: "pending",
-  },
-  {
-    id: "security",
-    name: "セキュリティ",
-    owner: "高橋 美咲",
-    members: 6,
-    updatedAt: "2026-07-19",
-    status: "active",
-  },
-];
-
-const SERVICES = [
-  {
-    id: "members",
-    label: "メンバー管理",
-    description: "招待、状態、所属チーム",
-    icon: Users,
-    count: 128,
-  },
-  {
-    id: "security",
-    label: "セキュリティ",
-    description: "MFAポリシーと監査ログ",
-    icon: ShieldCheck,
-    count: 6,
-  },
-  {
-    id: "billing",
-    label: "請求",
-    description: "プラン、請求書、支払い方法",
-    icon: CreditCard,
-    count: 12,
-  },
-];
-
-const RAIL_WIDTHS = ["compact", "standard"] as const;
-const COLLAPSE_STEPS = ["token", "sm", "md", "lg", "xl", "false"] as const;
-const MASTER_VIEWPORTS = ["auto", "compact", "standard"] as const;
-
-/**
- * 実サービスの「長い」コレクション。auto のままだと一覧が数千 px に伸び、
- * 積み重なった 390px 画面では詳細がフォールドの遥か下に押し出される。
- */
-const MEMBERS = Array.from({ length: 60 }, (_, i) => ({
-  id: `member-${i + 1}`,
-  name: `メンバー ${i + 1}`,
-  role: i % 3 === 0 ? "管理者" : i % 3 === 1 ? "編集者" : "閲覧者",
-}));
-
-const numberFormat = new Intl.NumberFormat("ja-JP");
-const dateFormat = new Intl.DateTimeFormat("ja-JP", { dateStyle: "medium" });
-const formatDate = (iso: string) => dateFormat.format(new Date(`${iso}T00:00:00Z`));
-
-const TEAM_DETAIL_ID = "master-detail-team-detail";
-const SERVICE_DETAIL_ID = "master-detail-service-detail";
-const MEMBER_DETAIL_ID = "master-detail-member-detail";
-
-export default function Demo() {
-  const [teamId, setTeamId] = useState("core");
-  const [railWidth, setRailWidth] = useState<(typeof RAIL_WIDTHS)[number]>("standard");
-  const [collapseStep, setCollapseStep] = useState<(typeof COLLAPSE_STEPS)[number]>("token");
-  const [serviceId, setServiceId] = useState("members");
-  const [masterViewport, setMasterViewport] =
-    useState<(typeof MASTER_VIEWPORTS)[number]>("compact");
-  const [memberId, setMemberId] = useState(MEMBERS[0].id);
-
-  const team = TEAMS.find((item) => item.id === teamId) ?? TEAMS[0];
-  const service = SERVICES.find((item) => item.id === serviceId) ?? SERVICES[0];
-  const ServiceIcon = service.icon;
-  const member = MEMBERS.find((item) => item.id === memberId) ?? MEMBERS[0];
-
-  // "token" は prop を渡さない = テーマの --master-detail-collapse-below に委ねる状態。
-  const collapseBelow =
-    collapseStep === "token" ? undefined : collapseStep === "false" ? false : collapseStep;
-
-  const columns: ColumnDef<Team>[] = [
-    {
-      key: "name",
-      header: "チーム",
-      sortable: true,
-      render: (row) => (
-        <Flex direction="row" align="center" gap="sm">
-          <Text weight="medium" truncate>
-            {row.name}
-          </Text>
-          {row.id === teamId ? <Badge tone="info">選択中</Badge> : null}
-        </Flex>
-      ),
-    },
-    { key: "owner", header: "オーナー", hiddenOnMobile: true },
-    {
-      key: "members",
-      header: "人数",
-      align: "right",
-      sortable: true,
-      render: (row) => <Text tabular>{numberFormat.format(row.members)}</Text>,
-    },
-    {
-      key: "status",
-      header: "状態",
-      render: (row) => <Badge status={row.status} />,
-    },
-    {
-      key: "updatedAt",
-      header: "更新日",
-      align: "right",
-      hiddenOnMobile: true,
-      render: (row) => <Text tabular>{formatDate(row.updatedAt)}</Text>,
-    },
-  ];
-
-  return (
-    <PageContainer
-      title="チーム"
-      subtitle="一覧が伸縮し、詳細レールは 320px を保つ (SCR-110)"
-      breadcrumb={[{ label: "組織" }, { label: "チーム" }]}
-      extra={
-        <Flex direction="col" gap="sm">
-          <Flex direction="row" wrap align="center" gap="sm">
-            <Text size="xs" tone="muted">
-              railWidth
-            </Text>
-            {RAIL_WIDTHS.map((value) => (
-              <Button
-                key={value}
-                size="sm"
-                variant={railWidth === value ? "default" : "outline"}
-                aria-pressed={railWidth === value}
-                onClick={() => setRailWidth(value)}
-              >
-                {value}
-              </Button>
-            ))}
-          </Flex>
-          <Flex direction="row" wrap align="center" gap="sm">
-            <Text size="xs" tone="muted">
-              collapseBelow
-            </Text>
-            {COLLAPSE_STEPS.map((value) => (
-              <Button
-                key={value}
-                size="sm"
-                variant={collapseStep === value ? "default" : "outline"}
-                aria-pressed={collapseStep === value}
-                onClick={() => setCollapseStep(value)}
-              >
-                {value}
-              </Button>
-            ))}
-          </Flex>
-          <Flex direction="row" wrap align="center" gap="sm">
-            <Text size="xs" tone="muted">
-              masterViewport
-            </Text>
-            {MASTER_VIEWPORTS.map((value) => (
-              <Button
-                key={value}
-                size="sm"
-                variant={masterViewport === value ? "default" : "outline"}
-                aria-pressed={masterViewport === value}
-                onClick={() => setMasterViewport(value)}
-              >
-                {value}
-              </Button>
-            ))}
-          </Flex>
-        </Flex>
-      }
-    >
-      <Flex direction="col" gap="lg">
-        {/* ── 1. 正準構成: rail="detail" (既定) — 流動的な一覧 + 固定幅の詳細レール ── */}
-        <MasterDetail
-          railWidth={railWidth}
-          collapseBelow={collapseBelow}
-          masterLabel="チーム一覧"
-          detailLabel={`${team.name} の詳細`}
-          detailId={TEAM_DETAIL_ID}
-          master={
-            <Card>
-              <CardContent flush>
-                <DataTable
-                  data={TEAMS}
-                  columns={columns}
-                  getRowId={(row) => row.id}
-                  onRowClick={(row) => setTeamId(row.id)}
-                />
-              </CardContent>
-            </Card>
-          }
-        >
-          <Flex direction="col" gap="md">
-            <Card>
-              <CardHeader>
-                <CardTitle level={2} className="text-base">
-                  {team.name}
-                </CardTitle>
-                <CardDescription>オーナー: {team.owner}</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Flex direction="col" gap="sm">
-                  <Flex direction="row" justify="between" align="baseline" gap="sm">
-                    <Text tone="muted">メンバー</Text>
-                    <Text tabular weight="medium">
-                      {numberFormat.format(team.members)}
-                    </Text>
-                  </Flex>
-                  <Flex direction="row" justify="between" align="baseline" gap="sm">
-                    <Text tone="muted">状態</Text>
-                    <Badge status={team.status} />
-                  </Flex>
-                  <Flex direction="row" justify="between" align="baseline" gap="sm">
-                    <Text tone="muted">最終更新</Text>
-                    <Text tabular>{formatDate(team.updatedAt)}</Text>
-                  </Flex>
-                </Flex>
-              </CardContent>
-            </Card>
-            <Button className="w-full">メンバーを招待</Button>
-          </Flex>
-        </MasterDetail>
-
-        {/* ── 2. rail="master" — 先頭ナビゲーションレール + 流動的な詳細面。
-               master 側のボタンが aria-controls で detail region を指し、
-               「詳細へ移動」は tabIndex={-1} の region にフォーカスを移す。 ── */}
-        <MasterDetail
-          rail="master"
-          railWidth="compact"
-          masterLabel="管理カテゴリー"
-          detailLabel={`${service.label} の詳細`}
-          detailId={SERVICE_DETAIL_ID}
-          master={
-            <Flex direction="col" gap="xs">
-              {SERVICES.map((item) => {
-                const Icon = item.icon;
-                const active = item.id === serviceId;
-
-                return (
-                  <Button
-                    key={item.id}
-                    variant={active ? "secondary" : "ghost"}
-                    aria-pressed={active}
-                    aria-controls={SERVICE_DETAIL_ID}
-                    onClick={() => setServiceId(item.id)}
-                  >
-                    <Icon aria-hidden="true" />
-                    {item.label}
-                    <Badge tone="neutral">{numberFormat.format(item.count)}</Badge>
-                  </Button>
-                );
-              })}
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => document.getElementById(SERVICE_DETAIL_ID)?.focus()}
-              >
-                詳細へ移動
-              </Button>
-            </Flex>
-          }
-        >
-          <Card>
-            <CardHeader>
-              <Flex align="center" gap="sm">
-                <ServiceIcon aria-hidden="true" />
-                <CardTitle level={2}>{service.label}</CardTitle>
-              </Flex>
-              <CardDescription>{service.description}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="md">
-                <Text>現在の設定件数: {numberFormat.format(service.count)}</Text>
-                <Button>設定を開く</Button>
-              </Flex>
-            </CardContent>
-          </Card>
-        </MasterDetail>
-
-        {/* ── 3. masterViewport — 長い実コレクションを境界付きビューポートに収める。
-               auto: 一覧が 60 行ぶん伸び、390px では詳細がフォールドの遥か下に落ちる。
-               compact / standard: --master-detail-master-viewport-* が block サイズを
-               上限とし、コレクションは region の中でスクロールする。
-               region 自体が tabIndex={0} のスクロールコンテナなので、キーボードだけでも
-               スクロールできる (WCAG 2.1.1) — フォーカスは閉じ込められない。 ── */}
-        <MasterDetail
-          rail="detail"
-          masterViewport={masterViewport}
-          masterLabel="メンバー一覧（スクロール領域）"
-          detailLabel={`${member.name} の詳細`}
-          detailId={MEMBER_DETAIL_ID}
-          master={
-            <Flex direction="col" gap="xs">
-              {MEMBERS.map((item) => (
-                <Button
-                  key={item.id}
-                  variant={item.id === memberId ? "secondary" : "ghost"}
-                  aria-pressed={item.id === memberId}
-                  aria-controls={MEMBER_DETAIL_ID}
-                  onClick={() => setMemberId(item.id)}
-                >
-                  {item.name}
-                  <Badge tone="neutral">{item.role}</Badge>
-                </Button>
-              ))}
-            </Flex>
-          }
-        >
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>{member.name}</CardTitle>
-              <CardDescription>権限: {member.role}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Text tone="muted">
-                masterViewport=&quot;{masterViewport}&quot; · 一覧は{" "}
-                {masterViewport === "auto" ? "コンテンツ全高" : "トークン上限つきスクロール"}
-              </Text>
-            </CardContent>
-          </Card>
-        </MasterDetail>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/layout/mobile-shell.tsx

@@ -1,106 +0,0 @@
-import * as React from "react";
-import { Inbox, Package, ScanLine, Truck } from "lucide-react";
-
-import { Badge, Card, CardContent } from "@godxjp/ui/data-display";
-import { Button, Heading, Text } from "@godxjp/ui/general";
-import { Flex, MobileShell } from "@godxjp/ui/layout";
-
-/**
- * MobileShell — the handheld app shell: a status band, an app bar, ONE scroll region, a sticky
- * action bar and a bottom tab bar. The two things a composed `Card` stack cannot do are exactly
- * what the shell owns: the root is one screen tall so the DOCUMENT never scrolls (the tab bar can
- * never slide away under a collapsing URL bar), and every band pads itself out of the device
- * safe areas. Zero custom CSS — no `min-h-dvh`, no `position: sticky`, no page gutter by hand.
- */
-const ITEMS = [
-  { rc: "RC-204881", name: "洗顔フォーム", status: "未仕分け", tone: "warning" as const },
-  { rc: "RC-204882", name: "日焼け止め", status: "棚上", tone: "info" as const },
-  { rc: "RC-204879", name: "ビタミン B", status: "棚上", tone: "info" as const },
-  { rc: "RC-204875", name: "歯ブラシ", status: "梱包済み", tone: "muted" as const },
-  { rc: "RC-204871", name: "入浴剤", status: "棚上", tone: "info" as const },
-  { rc: "RC-204864", name: "解熱鎮痛薬", status: "梱包済み", tone: "muted" as const },
-];
-
-const TABS = [
-  { id: "inbound", label: "入庫", icon: Inbox },
-  { id: "packing", label: "梱包", icon: Package },
-  { id: "outbound", label: "出庫", icon: Truck },
-];
-
-export default function Demo() {
-  const [tab, setTab] = React.useState("inbound");
-
-  return (
-    <MobileShell
-      // `width="phone"` because this frame is READ ON A DESKTOP. The shell's own docstring already
-      // named this case on the block axis (`height="fill"` for "a phone view embedded in a wider
-      // page"); the inline axis had no answer until now, so this page drew a 1232px-wide handheld
-      // app with its four tab-bar destinations spread across the screen.
-      width="phone"
-      statusBar={
-        <>
-          <Text size="sm" weight="medium" tabular>
-            9:41
-          </Text>
-          <Text size="sm" weight="medium" tone="muted" tabular>
-            Acme Handy
-          </Text>
-        </>
-      }
-      header={
-        <Flex align="center" justify="between" gap="xs" className="w-full">
-          <Heading level={3} as="h1">
-            入庫
-          </Heading>
-          <Button variant="ghost" size="sm">
-            選択
-          </Button>
-        </Flex>
-      }
-      actions={
-        <>
-          <Button className="flex-[2]">
-            <ScanLine aria-hidden="true" />
-            スキャン
-          </Button>
-          <Button variant="outline" className="flex-1">
-            手入力
-          </Button>
-        </>
-      }
-      tabBar={TABS.map((t) => {
-        const Icon = t.icon;
-        return (
-          <Button
-            key={t.id}
-            variant="ghost"
-            onClick={() => setTab(t.id)}
-            aria-current={t.id === tab ? "page" : undefined}
-            className="h-full flex-col rounded-none"
-          >
-            <Icon aria-hidden="true" />
-            <Text size="2xs">{t.label}</Text>
-          </Button>
-        );
-      })}
-    >
-      <Flex direction="col" gap="sm">
-        {ITEMS.map((item) => (
-          <Card key={item.rc} density="tight">
-            <CardContent solo>
-              <Flex align="center" justify="between" gap="sm">
-                <Flex direction="col" gap="none">
-                  <Text weight="medium">{item.name}</Text>
-                  <Text size="xs" mono tone="muted" tabular>
-                    {item.rc}
-                  </Text>
-                </Flex>
-                <Badge tone={item.tone}>{item.status}</Badge>
-              </Flex>
-            </CardContent>
-          </Card>
-        ))}
-      </Flex>
-    </MobileShell>
-  );
-}