@godxjp/ui 19.1.0 → 19.3.1

package/docs/general/activity.tsx

@@ -0,0 +1,224 @@
+import { Activity, Heading, Text } from "@godxjp/ui/general";
+import {
+  Avatar,
+  AvatarFallback,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Textarea } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
+
+/**
+ * Activity · the official AMBIENT-motion primitive: a continuous, unbounded "something is happening
+ * right now, elsewhere". The LOOP counterpart to `Reveal`'s one-shot entrance (gh#313).
+ *
+ * Reads the DS motion tokens (`--activity-interval`, `--activity-stagger-step`,
+ * `--activity-mark-offset`, `--activity-color`, `--ease-standard`) so a consumer never hand-rolls a
+ * looping `@keyframes` + its own `prefers-reduced-motion` guard. Under reduced motion the loop is
+ * dropped and each mark falls back to a DESIGNED resting state · three solid dots, a solid pulse
+ * mark, a bar segment parked at the reading-start · never to nothing.
+ *
+ * Composed only from real @godxjp/ui components. All copy is consumer-owned and localized.
+ */
+
+const MESSAGES = [
+  { id: "m1", who: "田中", initials: "田", body: "在庫の締めは今日の18時でお願いします。" },
+  { id: "m2", who: "佐藤", initials: "佐", body: "了解しました。倉庫Bの棚卸しを先に片付けます。" },
+  { id: "m3", who: "田中", initials: "田", body: "助かります。差異があれば共有してください。" },
+];
+
+const TONES = [
+  { tone: "muted", label: "muted · 既定（環境音）" },
+  { tone: "default", label: "default · 前景色" },
+  { tone: "primary", label: "primary · 主要導線" },
+  { tone: "success", label: "success · 接続中" },
+  { tone: "warning", label: "warning · 再接続中" },
+  { tone: "destructive", label: "destructive · 録画中" },
+  { tone: "info", label: "info · 同期中" },
+] as const;
+
+const SIZES = [
+  { size: "xs", label: "xs" },
+  { size: "sm", label: "sm（既定）" },
+  { size: "md", label: "md" },
+  { size: "lg", label: "lg" },
+] as const;
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Activity"
+      subtitle="環境モーション（無限ループ）· モーショントークン準拠 · prefers-reduced-motion で静止フレームに退避"
+    >
+      <Flex direction="col" gap="lg">
+        {/* ── The real screen: a channel with a live typing affordance under the composer ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>#倉庫-運用</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {/* Ambient sync state at the top of the channel · the same primitive, `bar` mark. */}
+              <Activity variant="bar" tone="info" label="同期中…" />
+
+              {MESSAGES.map((message) => (
+                <Flex key={message.id} direction="row" gap="sm" align="start">
+                  <Avatar>
+                    <AvatarFallback>{message.initials}</AvatarFallback>
+                  </Avatar>
+                  <Flex direction="col" gap="xs">
+                    <Text weight="medium">{message.who}</Text>
+                    <Text tone="muted">{message.body}</Text>
+                  </Flex>
+                </Flex>
+              ))}
+
+              <Separator />
+
+              {/*
+               * The typing affordance. `announce` is left at its default `false`: typing flickers
+               * on and off with every socket event, and a live region there re-announces
+               * continuously. The row sits ABOVE the composer and keeps its own height, so the
+               * composer does not jump when the indicator appears or disappears.
+               */}
+              <Activity label="佐藤さんが入力しています…" />
+
+              <Textarea aria-label="メッセージを入力" placeholder="メッセージを入力…" rows={2} />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* ── variant × every union value ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>variant · 3 つのマーク</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="xs">
+                <Text size="xs" tone="muted">
+                  dots（既定）— 3 点が順に浮く。&ldquo;入力中&rdquo; の省略記号の慣習。
+                </Text>
+                <Activity variant="dots" label="佐藤さんが入力しています…" />
+              </Flex>
+              <Flex direction="col" gap="xs">
+                <Text size="xs" tone="muted">
+                  pulse · 単一の呼吸するマーク。ライブ / 録画中。
+                </Text>
+                <Activity variant="pulse" tone="destructive" label="録画中" />
+              </Flex>
+              <Flex direction="col" gap="xs">
+                <Text size="xs" tone="muted">
+                  bar · 不確定スイープ。同期中 / ストリーミング中。
+                </Text>
+                <Activity variant="bar" tone="info" label="仕訳を同期しています…" />
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* ── size × every union value ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>size · マークとラベルが同時にスケール</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              {SIZES.map((step) => (
+                <Activity key={step.size} size={step.size} label={`入力中… (${step.label})`} />
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* ── tone × every union value ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>tone · 意味づけされた配色（既定は muted）</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              {TONES.map((entry) => (
+                <Activity key={entry.tone} tone={entry.tone} label={entry.label} />
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* ── children / label / announce ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ラベルと読み上げ</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="xs">
+                <Text size="xs" tone="muted">
+                  label のみ —
+                  マークの隣に可視テキストとして描画される。アニメーションだけで意味を運ばせない。
+                </Text>
+                <Activity label="佐藤さんが入力しています…" />
+              </Flex>
+
+              <Flex direction="col" gap="xs">
+                <Text size="xs" tone="muted">
+                  children + label · children が可視スロットを持ち、label は sr-only の説明になる。
+                </Text>
+                <Activity label="佐藤さんが入力しています…">
+                  <Text size="xs" tone="muted">
+                    <Text as="strong" size="xs" weight="medium">
+                      佐藤
+                    </Text>
+                    ほか 2 名
+                  </Text>
+                </Activity>
+              </Flex>
+
+              <Flex direction="col" gap="xs">
+                <Text size="xs" tone="muted">
+                  announce=&quot;polite&quot; · ライブリージョンは label だけを包む。既定は
+                  false（リージョンを一切出さない）。ソケットのたびに読み上げが走る面では使わないこと。
+                </Text>
+                <Activity announce="polite" tone="warning" label="接続を再試行しています…" />
+              </Flex>
+
+              <Flex direction="col" gap="xs">
+                <Text size="xs" tone="muted">
+                  label なし · 装飾のみ。支援技術には何も伝わらないので、意味を持つ場面では必ず
+                  label を渡す。
+                </Text>
+                <Activity variant="pulse" />
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>prefers-reduced-motion</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Heading level={3}>静止フレームは「設計されたもの」であって「無」ではない</Heading>
+              <Text tone="muted">
+                OS
+                のモーション低減設定では、ループを止めるだけでマークは可視の休止状態に落ちる。dots
+                は 3 点が実体のまま並ぶ静的な省略記号、pulse は塗りつぶしのマーク、bar
+                は読み始め側に停めたセグメント（満杯にすると「完了」に読めてしまう）。ラベルはどちらの場合も可視テキストなので、意味は必ず伝わる。レイアウトシフトも起きない（WCAG
+                2.2 SC 2.3.3 / SC 2.2.2）。
+              </Text>
+              <Text tone="muted">
+                テーマ側のつまみ: --activity-interval · --activity-stagger-step ·
+                --activity-mark-size · --activity-mark-offset · --activity-mark-rest-alpha ·
+                --activity-pulse-mark-size · --activity-gap · --activity-font-size · --activity-bar
+                · --activity-color（--duration-loop がループ全体の基準間隔）。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/general/button/examples/destructive-confirm.tsx

@@ -0,0 +1,90 @@
+import { useState } from "react";
+
+import { Descriptions, Avatar, AvatarFallback } from "@godxjp/ui/data-display";
+import { AlertDialog } from "@godxjp/ui/feedback";
+import { Button } from "@godxjp/ui/general";
+import {
+  AppShell,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { BookOpen, FileText, LayoutDashboard, ReceiptText, Trash2, Users } from "lucide-react";
+
+/**
+ * Destructive confirmation — the irreversible "削除" action opens an AlertDialog
+ * (the canonical confirm primitive, role="alertdialog", variant="destructive"),
+ * never a hand-rolled Card + buttons. Cancel dismisses; confirm runs onConfirm.
+ */
+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() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="journal"
+          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="仕訳 #2024-0312"
+        subtitle="2024-04-12 · 承認済"
+        breadcrumb={[{ label: "仕訳", to: "#" }, { label: "#2024-0312" }]}
+        extra={
+          <Button variant="destructive" onClick={() => setOpen(true)}>
+            <Trash2 />
+            削除
+          </Button>
+        }
+      >
+        <Descriptions>
+          <Descriptions.Item label="日付">2024-04-12</Descriptions.Item>
+          <Descriptions.Item label="借方">売掛金 ¥482,000</Descriptions.Item>
+          <Descriptions.Item label="貸方">売上高 ¥438,182 / 仮受消費税 ¥43,818</Descriptions.Item>
+          <Descriptions.Item label="取引先">株式会社ベトヤ</Descriptions.Item>
+          <Descriptions.Item label="摘要">4月分 受注 INV-2024-0312</Descriptions.Item>
+        </Descriptions>
+
+        <AlertDialog
+          open={open}
+          onOpenChange={setOpen}
+          title="仕訳を削除しますか？"
+          description="この操作は取り消せません。仕訳 #2024-0312 を完全に削除します。"
+          confirmLabel="削除する"
+          cancelLabel="キャンセル"
+          variant="destructive"
+          onConfirm={() => setOpen(false)}
+        />
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/general/button/examples/form-actions.tsx

@@ -0,0 +1,85 @@
+import { FormField, Input } from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
+import { Avatar, AvatarFallback } from "@godxjp/ui/data-display";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { BookOpen, FileText, LayoutDashboard, ReceiptText, Users } from "lucide-react";
+
+/**
+ * Form page — the primary submit + outline cancel live in PageContainer's
+ * `footer` slot (stickyFooter pins it as the form scrolls). No hand-rolled
+ * footer bar; the page shell owns it.
+ */
+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="partners"
+          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="取引先の編集"
+        subtitle="株式会社ベトヤ · BTY-0012"
+        breadcrumb={[{ label: "取引先", to: "#" }, { label: "編集" }]}
+        footer={
+          <Flex direction="row" wrap gap="sm" justify="end">
+            <Button variant="outline" type="button">
+              キャンセル
+            </Button>
+            <Button type="submit">保存</Button>
+          </Flex>
+        }
+      >
+        <Flex direction="col" gap="md">
+          <FormField id="name" label="取引先名">
+            <Input id="name" defaultValue="株式会社ベトヤ" />
+          </FormField>
+          <FormField id="code" label="取引先コード">
+            <Input id="code" defaultValue="BTY-0012" />
+          </FormField>
+          <FormField id="contact" label="担当者">
+            <Input id="contact" defaultValue="グエン・ヴァン・A" />
+          </FormField>
+          <FormField id="email" label="メール">
+            <Input id="email" type="email" defaultValue="ke-toan@betoya.test" />
+          </FormField>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/general/button/examples/toolbar.tsx

@@ -0,0 +1,160 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  DataTable,
+  type ColumnDef,
+  Avatar,
+  AvatarFallback,
+} from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import {
+  BookOpen,
+  Download,
+  FileText,
+  LayoutDashboard,
+  Pencil,
+  Plus,
+  ReceiptText,
+  Trash2,
+  Users,
+} from "lucide-react";
+
+/**
+ * List page — the toolbar is NOT hand-rolled: the page title + primary/secondary
+ * actions live in PageContainer's `title` + `extra`, and per-row ghost icon
+ * Buttons sit in a DataTable action column. The table is wrapped in a Card
+ * (CardContent flush) inside a padded PageContainer so it stays on the same
+ * gutters as the header.
+ */
+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 }] },
+];
+
+type Invoice = {
+  id: string;
+  partner: string;
+  amount: number;
+  status: "active" | "pending" | "draft";
+  date: string;
+};
+
+const invoices: Invoice[] = [
+  {
+    id: "INV-2024-0312",
+    partner: "株式会社ベトヤ",
+    amount: 482000,
+    status: "active",
+    date: "2024-04-12",
+  },
+  {
+    id: "INV-2024-0311",
+    partner: "ハノイ物流",
+    amount: 128400,
+    status: "pending",
+    date: "2024-04-11",
+  },
+  { id: "INV-2024-0310", partner: "GMO決済", amount: 64800, status: "draft", date: "2024-04-10" },
+];
+
+const yen = new Intl.NumberFormat("ja-JP", {
+  style: "currency",
+  currency: "JPY",
+  maximumFractionDigits: 0,
+});
+
+const columns: ColumnDef<Invoice>[] = [
+  { key: "id", header: "請求書番号" },
+  { key: "partner", header: "取引先", sortable: true },
+  {
+    key: "amount",
+    header: "金額",
+    align: "right",
+    render: (row) => <span className="tabular-nums">{yen.format(row.amount)}</span>,
+  },
+  { key: "status", header: "状態", render: (row) => <Badge status={row.status} /> },
+  { key: "date", header: "発行日", align: "right" },
+  {
+    key: "_actions",
+    header: "",
+    ariaLabel: "操作",
+    align: "right",
+    render: () => (
+      <Flex direction="row" wrap align="center" gap="xs" justify="end">
+        <Button variant="ghost" size="icon-sm" aria-label="編集">
+          <Pencil />
+        </Button>
+        <Button variant="ghost" size="icon-sm" aria-label="削除">
+          <Trash2 />
+        </Button>
+      </Flex>
+    ),
+  },
+];
+
+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="請求書 一覧"
+        subtitle="直近30日間の受注データ"
+        breadcrumb={[{ label: "請求書" }]}
+        extra={
+          <Flex direction="row" wrap align="center" gap="sm">
+            <Button variant="outline" size="sm">
+              <Download />
+              エクスポート
+            </Button>
+            <Button size="sm">
+              <Plus />
+              新規請求書
+            </Button>
+          </Flex>
+        }
+      >
+        <Card>
+          <CardContent flush>
+            <DataTable data={invoices} columns={columns} getRowId={(row) => row.id} />
+          </CardContent>
+        </Card>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/general/button/index.md

@@ -0,0 +1,12 @@
+---
+title: Overview
+---
+
+The core action control — every clickable action is a `Button` (never a raw `<button>`).
+Pick the variant by intent (one primary per view), the size from the preset, and use
+`asChild` to render links with button styling. See Examples for real usage in context.
+
+For filter tabs / segmented toggles that show a per-option total, pass the `count` prop
+(`<Button variant="outline" count={18}>Chờ bay</Button>`) instead of nesting a `Badge` —
+it renders a borderless counter pill, formatted in the active locale and toned to the
+button variant, so an outline button never ends up with a doubled border.