@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-display/badge.tsx

@@ -1,335 +0,0 @@
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  StatusBadge,
-} from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { Star } from "lucide-react";
-
-/**
- * Badge — status / category chip. Composed only from real @godxjp/ui components.
- * variant is STRUCTURAL (default / secondary / outline); tone is SEMANTIC (ToneProp).
- * the reference design: semantic mapping is FIXED (success 若竹 / warning 山吹 / info 群青 /
- * destructive 茜). Labels never wrap (rule #35).
- */
-const variants = [
-  { variant: "default" as const, label: "既定 Default" },
-  { variant: "secondary" as const, label: "区分 Category" },
-  { variant: "outline" as const, label: "補助 Subtle" },
-  { variant: "dashed" as const, label: "点線 Dashed" },
-];
-
-const shapes = [
-  { shape: "default" as const, label: "既定 Default" },
-  { shape: "pill" as const, label: "丸み Pill" },
-  { shape: "sharp" as const, label: "角 Sharp" },
-];
-
-/**
- * Colours a person picked, not colours that mean something — a status and an
- * issue type out of a project's own settings screen, plus the two ends of the
- * range an administrator can still type. `#488a5a` is here because it is the
- * worst case for a SOLID chip: near-black and white measure equal on it, both
- * 4.15:1, under the 4.5 badge-sized text needs. Washed, it clears 8.52.
- */
-const dataColours = [
-  { color: "#4488c5", label: "処理中 In progress" },
-  { color: "#ea9a10", label: "未対応 Open" },
-  { color: "#488a5a", label: "完了 Done" },
-  { color: "#000000", label: "黒 Black" },
-  { color: "#ffffff", label: "白 White" },
-];
-
-const tones = [
-  { tone: "default" as const, label: "既定 Default" },
-  { tone: "primary" as const, label: "ブランド Brand" },
-  { tone: "success" as const, label: "承認済 Approved" },
-  { tone: "warning" as const, label: "保留 Pending" },
-  { tone: "destructive" as const, label: "却下 Rejected" },
-  { tone: "info" as const, label: "情報 Info" },
-  { tone: "muted" as const, label: "控えめ Muted" },
-  { tone: "neutral" as const, label: "中立 Neutral" },
-];
-
-const statuses = ["active", "draft", "pending", "cancelled", "failed", "scheduled"];
-
-/**
- * Subscription/billing lifecycle keys. They ship the SAME canonical status→tone→icon
- * map as every other key, so a billing screen never keeps a page-local colour table. They are
- * demoed explicitly because their i18n labels were once missing. A missing key renders the raw
- * `status.trialing` string, and only a rendered demo makes that regression visible.
- */
-const billingStatuses = ["trialing", "past_due", "incomplete", "canceled"];
-
-/**
- * StatusBadge is the status-first name for the same chip, so it carries the SAME structural
- * axes. `incomplete` is the one canonical key that resolves to the tone-neutral default, which
- * is why the four variants stay legible next to each other: a tone would repaint the fill.
- */
-const statusBadgeVariants = [
-  { variant: "default" as const, note: "既定 Default" },
-  { variant: "secondary" as const, note: "控えめ Secondary" },
-  { variant: "outline" as const, note: "枠線 Outline" },
-  { variant: "dashed" as const, note: "点線 Dashed" },
-];
-
-/** A project status outside the canonical map declares its own tone; the label stays authored. */
-const statusBadgeTones = [
-  { tone: "default" as const, label: "受付 Received" },
-  { tone: "primary" as const, label: "優先対応 Priority" },
-  { tone: "success" as const, label: "検収済 Accepted" },
-  { tone: "warning" as const, label: "修正待ち Awaiting fix" },
-  { tone: "destructive" as const, label: "検収差戻し Rejected" },
-  { tone: "info" as const, label: "監査中 Under audit" },
-  { tone: "muted" as const, label: "対象外 Out of scope" },
-  { tone: "neutral" as const, label: "下書き Draft" },
-];
-
-export default function Demo() {
-  const { t } = useTranslation();
-  return (
-    <PageContainer
-      title="Badge"
-      subtitle="Structural variants, semantic tones, and auto-mapped lifecycle status · labels never wrap"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Structural variants</CardTitle>
-            <CardDescription>
-              variant is structural emphasis only: default (filled), secondary (muted fill), outline
-              (bordered), dashed (dashed border). It carries no semantic meaning; use tone for that.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="sm">
-              {variants.map((v) => (
-                <Badge key={v.variant} variant={v.variant}>
-                  {v.label}
-                </Badge>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Shape</CardTitle>
-            <CardDescription>
-              shape sets corner radius from the tokens: default (badge radius) / pill (fully
-              rounded) / sharp (square). Independent of variant and tone.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="sm">
-              {shapes.map((s) => (
-                <Badge key={s.shape} shape={s.shape} tone="info">
-                  {s.label}
-                </Badge>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>The record&rsquo;s own colour</CardTitle>
-            <CardDescription>
-              color carries DATA: a status an administrator coloured, an issue type, a tag. The chip
-              is washed into the surface rather than filled, because a solid chip has to choose a
-              foreground and no choice is readable for every colour a picker can produce. Retune the
-              wash with --badge-tint-fill / --badge-tint-edge.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="sm">
-              {dataColours.map((c) => (
-                <Badge key={c.color} shape="pill" color={c.color}>
-                  {c.label}
-                </Badge>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Semantic tones</CardTitle>
-            <CardDescription>
-              tone conveys intent, pick by meaning, never aesthetics. success = approved/paid ·
-              warning = pending · destructive = rejected · info · muted · neutral = category.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="sm">
-              {tones.map((t) => (
-                <Badge key={t.tone} tone={t.tone}>
-                  {t.label}
-                </Badge>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Lifecycle status</CardTitle>
-            <CardDescription>
-              status=&quot;key&quot; auto-maps known lifecycle keys to tone + icon + i18n label.
-              Unknown keys fall back to neutral + a generic icon + the raw key text.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="sm">
-              {statuses.map((s) => (
-                <Badge key={s} status={s} />
-              ))}
-              <StatusBadge status="active" />
-              <Badge status="unknown-key" />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Billing lifecycle</CardTitle>
-            <CardDescription>
-              Subscription keys map through the SAME canonical table · trialing = info · past_due =
-              warning · incomplete = default · canceled = destructive. Every label is translated, so
-              a billing screen never shows a raw status.* key and never keeps its own colour map.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="sm">
-              {billingStatuses.map((s) => (
-                <StatusBadge key={s} status={s} />
-              ))}
-              {billingStatuses.map((s) => (
-                <StatusBadge key={`${s}-outline`} status={s} variant="outline" />
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>StatusBadge · 構造 / 形状 / トーン</CardTitle>
-            <CardDescription>
-              StatusBadge はステータス主導の別名で、Badge と同じ variant / shape / tone
-              を受け取ります。canonical マップに無い自社ステータスは tone
-              を明示し、色表をアプリ側に持たせません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  variant · status=&quot;incomplete&quot;（トーン中立のキー）
-                </Text>
-                <Flex direction="row" wrap align="center" gap="sm">
-                  {statusBadgeVariants.map((v) => (
-                    <StatusBadge key={v.variant} status="incomplete" variant={v.variant} />
-                  ))}
-                </Flex>
-              </Flex>
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  shape · 既定 / pill / sharp
-                </Text>
-                <Flex direction="row" wrap align="center" gap="sm">
-                  {shapes.map((s) => (
-                    <StatusBadge key={s.shape} status="scheduled" shape={s.shape} />
-                  ))}
-                </Flex>
-              </Flex>
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  tone · 自社ステータスに意味の色を与える
-                </Text>
-                <Flex direction="row" wrap align="center" gap="sm">
-                  {statusBadgeTones.map((t) => (
-                    <StatusBadge key={t.tone} tone={t.tone}>
-                      {t.label}
-                    </StatusBadge>
-                  ))}
-                </Flex>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>tabular · 数字を桁で揃える</CardTitle>
-            <CardDescription>
-              件数のチップが縦に並ぶときは tabular を。プロポーショナル数字だと 1 が 0
-              より狭いので、列で見たときに桁がずれてチップ幅も揺れます。既定はオフ。語を載せる
-              チップまで幅の広い数字を払う必要はありません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="lg">
-              <Flex direction="col" align="start" gap="xs">
-                <Text size="xs" tone="muted">
-                  既定（比例数字）
-                </Text>
-                <Badge tone="info">11</Badge>
-                <Badge tone="info">100</Badge>
-                <Badge tone="warning">1811</Badge>
-              </Flex>
-              <Flex direction="col" align="start" gap="xs">
-                <Text size="xs" tone="muted">
-                  tabular
-                </Text>
-                <Badge tone="info" tabular>
-                  11
-                </Badge>
-                <Badge tone="info" tabular>
-                  100
-                </Badge>
-                <Badge tone="warning" tabular>
-                  1811
-                </Badge>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("badgeDocs.longLabels.title")}</CardTitle>
-            <CardDescription>{t("badgeDocs.longLabels.description")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" align="start" gap="xs">
-              <Badge tone="info">{t("badgeDocs.longLabels.sample")}</Badge>
-              <Badge status="active" />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Icon overrides</CardTitle>
-            <CardDescription>
-              icon replaces the status-mapped icon; icon=&#123;null&#125; suppresses it entirely
-              while keeping the resolved tone and label.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="sm">
-              <Badge status="active" icon={Star} />
-              <Badge status="active" icon={null} />
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/card/examples/detail-panel.tsx

@@ -1,106 +0,0 @@
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  Descriptions,
-  StatCard,
-  Avatar,
-  AvatarFallback,
-} from "@godxjp/ui/data-display";
-import { Button } from "@godxjp/ui/general";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  ResponsiveGrid,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { BookOpen, FileText, LayoutDashboard, ReceiptText, Users } from "lucide-react";
-
-/**
- * Detail screen — Card as the structural surface: accent stripe + banded header +
- * Descriptions body + separated footer action bar, beside a StatCard summary row.
- * No hand-rolled panels; every surface is a real @godxjp/ui component.
- */
-const sections: SidebarSectionProp[] = [
-  {
-    label: "会計",
-    items: [
-      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
-      { id: "journal", label: "仕訳", icon: FileText },
-      { id: "invoices", label: "請求書", icon: ReceiptText },
-      { id: "partners", label: "取引先", icon: BookOpen },
-    ],
-  },
-  { label: "管理", items: [{ id: "users", label: "ユーザー", icon: Users }] },
-];
-
-export default function Demo() {
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="invoices"
-          sections={sections}
-          onSelect={() => {}}
-          product={{ name: "CoreBooks", role: "管理コンソール", color: "hsl(var(--primary))" }}
-        />
-      }
-      topbar={
-        <Topbar
-          start={
-            <Avatar className="rounded-md">
-              <AvatarFallback className="bg-primary text-primary-foreground font-bold">
-                C
-              </AvatarFallback>
-            </Avatar>
-          }
-        />
-      }
-    >
-      <PageContainer
-        title="請求書 INV-2024-0312"
-        subtitle="株式会社ベトヤ · 2024-04-12"
-        breadcrumb={[{ label: "請求書", to: "#" }, { label: "INV-2024-0312" }]}
-        extra={<Badge tone="warning">承認待ち</Badge>}
-      >
-        <Flex direction="col" gap="lg">
-          <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
-            <StatCard label="合計金額" value="¥482,000" />
-            <StatCard label="消費税 (10%)" value="¥43,818" />
-            <StatCard label="支払期日" value="2024-05-31" hint="あと19日" />
-          </ResponsiveGrid>
-
-          <Card accent="primary">
-            <CardHeader banded>
-              <CardTitle level={2}>明細</CardTitle>
-              <CardDescription>4月分 受注</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Descriptions>
-                <Descriptions.Item label="取引先">株式会社ベトヤ</Descriptions.Item>
-                <Descriptions.Item label="勘定科目">売掛金 / 売上高</Descriptions.Item>
-                <Descriptions.Item label="小計">¥438,182</Descriptions.Item>
-                <Descriptions.Item label="消費税 (10%)">¥43,818</Descriptions.Item>
-                <Descriptions.Item label="合計">¥482,000</Descriptions.Item>
-                <Descriptions.Item label="摘要">INV-2024-0312 / 4月分</Descriptions.Item>
-              </Descriptions>
-            </CardContent>
-            <CardFooter separated>
-              <Flex direction="row" wrap gap="sm" justify="end">
-                <Button variant="outline">却下</Button>
-                <Button>承認</Button>
-              </Flex>
-            </CardFooter>
-          </Card>
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}

package/docs/data-display/card/examples/tab-list.tsx

@@ -1,97 +0,0 @@
-import { useState } from "react";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  DataTable,
-  Descriptions,
-  type CardTabItemProp,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Card `tabList` — Ant Design's card-head tab strip.
- *
- * The strip lives INSIDE the card's head: under the title, on the same surface, inside the same
- * border, so the card and its tabs read as one object. The card's children are the selected tab's
- * body — here a `DataTable` in a `CardContent flush`, which is what lets the table reach the card
- * edge instead of sitting in a second, narrower frame.
- *
- * What NOT to reach for instead: a `Tabs` parked on the page above a card (the strip floats off
- * the card and the two read as two objects), or a `Card` repeated inside every tab (the same
- * header and body shell copied once per view).
- */
-const tabList: CardTabItemProp[] = [
-  { key: "members", tab: "メンバー" },
-  { key: "invitations", tab: "招待" },
-  { key: "settings", tab: "設定" },
-];
-
-const members = [
-  { id: "1", name: "佐藤 花子", email: "sato@example.co.jp", role: "管理者" },
-  { id: "2", name: "鈴木 一郎", email: "suzuki@example.co.jp", role: "編集者" },
-  { id: "3", name: "高橋 美咲", email: "takahashi@example.co.jp", role: "閲覧者" },
-];
-
-const invitations = [{ id: "4", name: "田中 健", email: "tanaka@example.co.jp", role: "編集者" }];
-
-export default function Demo() {
-  const [activeTabKey, setActiveTabKey] = useState("members");
-
-  return (
-    <PageContainer title="組織設定" subtitle="株式会社ベトヤ">
-      <Card
-        tabList={tabList}
-        activeTabKey={activeTabKey}
-        onTabChange={setActiveTabKey}
-        extra={<Button size="sm">メンバーを招待</Button>}
-      >
-        <CardHeader>
-          <CardTitle level={2}>チーム</CardTitle>
-        </CardHeader>
-
-        {activeTabKey === "settings" ? (
-          <CardContent>
-            <Descriptions>
-              <Descriptions.Item label="組織名">株式会社ベトヤ</Descriptions.Item>
-              <Descriptions.Item label="ドメイン">example.co.jp</Descriptions.Item>
-              <Descriptions.Item label="既定の権限">閲覧者</Descriptions.Item>
-            </Descriptions>
-          </CardContent>
-        ) : (
-          <CardContent flush>
-            <DataTable
-              data={activeTabKey === "members" ? members : invitations}
-              getRowId={(row) => row.id}
-              columns={[
-                { key: "name", header: "名前" },
-                { key: "email", header: "メール" },
-                {
-                  key: "role",
-                  header: "権限",
-                  render: (row) => <Badge tone="info">{row.role}</Badge>,
-                },
-              ]}
-            />
-          </CardContent>
-        )}
-
-        <CardFooter separated>
-          <Flex direction="row" justify="between" align="center" gap="sm">
-            <Text tone="muted" size="sm">
-              {activeTabKey === "invitations" ? "1件の保留中の招待" : "3名のメンバー"}
-            </Text>
-            <Button variant="outline" size="sm">
-              CSV で書き出す
-            </Button>
-          </Flex>
-        </CardFooter>
-      </Card>
-    </PageContainer>
-  );
-}

package/docs/data-display/card/index.md

@@ -1,3 +0,0 @@
---- title: Overview ---
-
-The surface container for almost everything. Body content always goes in `CardContent` (a bare `Card` has no padding); titles in `CardHeader`/`CardTitle`; action bars in `CardFooter`. Flat by design — 1px border, no shadow at rest.