@godxjp/ui 31.31.8 → 32.0.0

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

@@ -1,90 +0,0 @@
-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

@@ -1,87 +0,0 @@
-import { Form, 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>
-        }
-      >
-        <Form>
-          <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>
-        </Form>
-      </PageContainer>
-    </AppShell>
-  );
-}

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

@@ -1,160 +0,0 @@
-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

@@ -1,16 +0,0 @@
----
-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.
-
-For long collection labels, use `wrap` with `align="start"` and `fullWidth`. The button
-grows vertically while retaining the size preset's minimum target height. Keep badges
-and other row metadata outside the button. `align="end"` follows the document direction.

package/docs/general/button/index.tsx

@@ -1,236 +0,0 @@
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Button } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { Bell, Pencil, Plus, Trash2 } from "lucide-react";
-
-/**
- * Button — the core action primitive. Composed only from real @godxjp/ui
- * components. The reference design: exactly one primary (default) action per view; height
- * comes from the size preset (--control-height); never raw <button>.
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Button"
-      subtitle="variant × size × state · the only action control (never a raw button element)"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Count</CardTitle>
-            <CardDescription>
-              Trailing totals, overflow cap, and explicit zero visibility. countLabel
-              は数字が何を数えているかを読み上げに渡す（Toggle と同じ語彙）。ピルは aria-hidden
-              で、単位つきの一文が sr-only で並ぶので、名前は「保留中, 18 件」。countLabel
-              を渡さなくても「保留中, 18」までは分かれる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="md">
-              <Button variant="outline" count={18} countLabel="件">
-                保留中
-              </Button>
-              <Button variant="outline" count={128} overflowCount={99} countLabel="件">
-                受信トレイ
-              </Button>
-              <Button variant="ghost" count={0} showZero countLabel="件">
-                完了
-              </Button>
-              <Button variant="ghost" count={0} showZero={false} countLabel="件">
-                非表示のゼロ
-              </Button>
-              <Button
-                variant="outline"
-                size="icon-sm"
-                aria-label="通知"
-                count={3}
-                countLabel="件の未読"
-              >
-                <Bell aria-hidden="true" />
-              </Button>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Variants</CardTitle>
-            <CardDescription>
-              One default (primary) per view. outline / secondary / ghost for supporting actions;
-              link for inline navigation; destructive for irreversible actions.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="md">
-              <Button>確定 Confirm</Button>
-              <Button variant="secondary">下書き Draft</Button>
-              <Button variant="outline">取消 Cancel</Button>
-              <Button variant="dashed">追加 Add row</Button>
-              <Button variant="ghost">詳細 Details</Button>
-              <Button variant="link">もっと見る More</Button>
-              <Button id="bare-count" variant="bare">
-                返信 <Badge icon={null}>12</Badge>
-              </Button>
-              <Button id="ghost-count" variant="ghost">
-                返信 <Badge icon={null}>12</Badge>
-              </Button>
-              <Button variant="destructive">削除 Delete</Button>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Shape</CardTitle>
-            <CardDescription>
-              `shape` sets corner radius from the tokens: default (control radius) / pill (fully
-              rounded) / sharp (square). Works with any variant or size.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="md">
-              <Button shape="default">Default</Button>
-              <Button shape="pill">Pill</Button>
-              <Button shape="sharp">Sharp</Button>
-              <Button shape="pill" variant="outline">
-                Pill outline
-              </Button>
-              <Button shape="sharp" variant="secondary">
-                Sharp secondary
-              </Button>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Sizes</CardTitle>
-            <CardDescription>
-              Height comes from the preset: xs 24 / sm 28 / default 32 / lg 36. Icon-only buttons
-              use the square icon-* sizes. icon-xs owns a 12px glyph: an explicit size-4 class on
-              its SVG is normalized so compact-density padding cannot collapse. Fine pointers use
-              the active --control-height-xs visual square; coarse pointers expand the actual hit
-              target to the framework's 44px --control-height-default floor.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" wrap align="center" gap="md">
-                <Button size="xs">XS</Button>
-                <Button size="sm">Small</Button>
-                <Button>Default</Button>
-                <Button size="lg">Large</Button>
-              </Flex>
-              <Flex direction="row" wrap align="center" gap="md">
-                <Button size="icon-xs" variant="ghost" aria-label="Edit">
-                  <Pencil />
-                </Button>
-                <Button size="icon-xs" variant="ghost" aria-label="Edit with 16px icon">
-                  <Pencil className="size-4" />
-                </Button>
-                <Button size="icon-sm" variant="ghost" aria-label="Edit">
-                  <Pencil />
-                </Button>
-                <Button size="icon" variant="outline" aria-label="Add">
-                  <Plus />
-                </Button>
-                <Button size="icon-lg" aria-label="Add">
-                  <Plus />
-                </Button>
-              </Flex>
-              <div className="ui-density-compact">
-                <Flex direction="row" wrap align="center" gap="md">
-                  <Button size="icon-xs" variant="ghost" aria-label="Compact edit">
-                    <Pencil />
-                  </Button>
-                  <Button size="icon-xs" variant="ghost" aria-label="Compact edit with 16px icon">
-                    <Pencil className="size-4" />
-                  </Button>
-                </Flex>
-              </div>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Icon + label, states, and links</CardTitle>
-            <CardDescription>
-              Leading icons auto-size to 1rem. disabled blocks pointer events (prevents
-              double-submit). Use asChild to render a real link with button styling.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="md">
-              <Button>
-                <Plus />
-                新規作成 New
-              </Button>
-              <Button variant="destructive">
-                <Trash2 />
-                削除 Delete
-              </Button>
-              <Button disabled>Disabled</Button>
-              <Button variant="outline" disabled>
-                Disabled
-              </Button>
-              <Button asChild variant="link">
-                <a href="#">Navigate as a link</a>
-              </Button>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Full width</CardTitle>
-            <CardDescription>
-              `fullWidth` spans the container (`width:100%`) — the prop form of `className="w-full"`
-              for stacked auth / dialog-footer actions. Use the prop, not a raw utility (rule #42).
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm" className="max-w-xs">
-              <Button fullWidth>ログイン Sign in</Button>
-              <Button fullWidth variant="outline">
-                アカウント作成 Create account
-              </Button>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Loading</CardTitle>
-            <CardDescription>
-              `loading` shows a leading spinner, sets `aria-busy`, and blocks activation while
-              keeping the label in place (no width jump). `loadingText` swaps the label for an
-              i18n-friendly in-flight message.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap align="center" gap="md">
-              <Button loading loadingText="保存中…">
-                保存 Save
-              </Button>
-              <Button variant="outline" loading loadingText="送信中…">
-                送信 Submit
-              </Button>
-              <Button variant="destructive" loading loadingText="削除中…">
-                削除 Delete
-              </Button>
-              <Button loading>処理中…</Button>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}