@godxjp/ui 19.1.0 → 19.3.1

package/docs/general/button/index.tsx

@@ -0,0 +1,211 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { 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.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap align="center" gap="md">
+              <Button variant="outline" count={18}>
+                保留中
+              </Button>
+              <Button variant="outline" count={128} overflowCount={99}>
+                受信トレイ
+              </Button>
+              <Button variant="ghost" count={0} showZero>
+                完了
+              </Button>
+              <Button variant="ghost" count={0} showZero={false}>
+                非表示のゼロ
+              </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 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>
+  );
+}

package/docs/general/logo.tsx

@@ -0,0 +1,131 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Logo, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/** Logo — token-sized brand mark with decorative and explicitly named accessibility modes. */
+export default function Demo() {
+  return (
+    <PageContainer title="Logo" subtitle="size · glyph · decorative and named brand marks">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Size tiers</CardTitle>
+            <CardDescription>
+              xs / sm / md（既定）/ lg のトークンサイズ。size はすべてのマークに効きます。箱付き
+              glyph の辺と字送りは --logo-size-* と --logo-font-size-*、識別マーク
+              （mark=&quot;godx&quot;）は専用の --logo-godx-size-* （1.5 / 1.75 / 2 / 2.5rem）が
+              所有します。識別マークは正方形の viewBox
+              に横長カプセルが入るため、同じ視覚重量になるよう箱付き glyph より 1
+              段大きく取ります。サービステーマが --logo-godx-size
+              を設定すると、全ティアで識別マークの箱を固定できます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" align="center" wrap gap="md">
+                <Logo size="xs" />
+                <Logo size="sm" />
+                <Logo />
+                <Logo size="lg" />
+              </Flex>
+              {/* The identity mark honours the SAME size prop — it is not a fixed-size mark. */}
+              <Flex direction="row" align="center" wrap gap="md">
+                <Logo mark="godx" size="xs" label="godx identity mark, xs" />
+                <Logo mark="godx" size="sm" label="godx identity mark, sm" />
+                <Logo mark="godx" label="godx identity mark, md" />
+                <Logo mark="godx" size="lg" label="godx identity mark, lg" />
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Glyph and accessible name</CardTitle>
+            <CardDescription>
+              Wordmark と組み合わせる mark は decorative。単独 mark は label で名前を付けます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" align="center" gap="sm">
+                <Logo glyph="GX" />
+                <Text weight="bold">godx Admin</Text>
+              </Flex>
+              <Logo glyph="神" label="Godx" size="lg" />
+              <Logo glyph="G" tone="success" label="Godx green identity mark" />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>tone · アイデンティティロール</CardTitle>
+            <CardDescription>
+              tone は 2 値で、箱付き glyph の塗りを決めます。primary（既定）はアプリのアクション色
+              --primary、success はブランドの識別ロール --brand です。--brand
+              はステータス緑（--success）とも アクション色とも独立しているため、
+              テーマを変えても正規のエメラルドが保たれます。 なお mark=&quot;godx&quot;
+              の識別マークは tone に関わらず常に --brand で描かれます。size は効きます（上の Size
+              tiers を参照）。箱付き glyph は実テキストなので WCAG 2.2 SC 1.4.3 の 4.5:1
+              が適用されます（14px bold は large text ではありません）。文字色は
+              --logo-identity-foreground（近黒）で、--brand-foreground
+              ではありません。後者は識別マークの抜き色（--background に追従）で エメラルド上では
+              3.67:1 しかなく、非テキスト（SC 1.4.11）の 3:1 しか満たしません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap gap="lg">
+              <Flex direction="col" gap="sm">
+                <Logo tone="primary" glyph="GX" size="lg" label="primary tone boxed glyph" />
+                <Text size="2xs" mono tone="muted">
+                  {`tone="primary" · --primary`}
+                </Text>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Logo tone="success" glyph="GX" size="lg" label="brand tone boxed glyph" />
+                <Text size="2xs" mono tone="muted">
+                  {`tone="success" · --brand`}
+                </Text>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Logo tone="primary" mark="godx" label="godx identity mark, primary tone" />
+                <Text size="2xs" mono tone="muted">
+                  {`mark="godx" tone="primary" · --brand`}
+                </Text>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Logo tone="success" mark="godx" label="godx identity mark, brand tone" />
+                <Text size="2xs" mono tone="muted">
+                  {`mark="godx" tone="success" · --brand`}
+                </Text>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Wordmark lockup</CardTitle>
+            <CardDescription>
+              wordmark を渡すと mark + 製品名の lockup になります。GoDX の lockup は --primary
+              ではなく identity role（brand green）で着色されるため、
+              テーマ変更でブランド色が崩れません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {/* Canonical GoDX lockup — brand-green mark + wordmark, one element. */}
+              <Logo mark="godx" tone="success" wordmark="GoDX" />
+              <Logo mark="godx" tone="success" wordmark="GoDX ID" size="lg" />
+              {/* Boxed-glyph lockup for a product brand that is not the GoDX identity. */}
+              <Logo glyph="GX" wordmark="godx Admin" size="sm" />
+              {/* label overrides the lockup name when the wordmark alone is ambiguous. */}
+              <Logo mark="godx" wordmark="GoDX" label="GoDX ID ホーム" />
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/general/reveal.tsx

@@ -0,0 +1,41 @@
+import { Card, CardContent, StatCard } from "@godxjp/ui/data-display";
+import { Reveal } from "@godxjp/ui/general";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+
+/**
+ * Reveal — the official entrance-motion primitive (staggered fade-up). Reads the DS motion tokens
+ * (`--duration-slow`, `--ease-emphasized`, `--reveal-distance`, `--reveal-stagger-step`) and honours
+ * `prefers-reduced-motion`, replacing hand-rolled `@keyframes` + `.app-reveal`/`.d1..d6` classes.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const stats = [
+    { label: "本日の売上", value: "¥1,240,000" },
+    { label: "新規顧客", value: "38" },
+    { label: "未処理", value: "12" },
+    { label: "承認待ち", value: "5" },
+  ];
+
+  return (
+    <PageContainer
+      title="Reveal"
+      subtitle="Staggered fade-up entrance · reads motion tokens · respects prefers-reduced-motion"
+    >
+      <Flex direction="col" gap="lg">
+        <Reveal>
+          <Card>
+            <CardContent>単一のカードが読み込み時にフェードアップします。</CardContent>
+          </Card>
+        </Reveal>
+
+        <ResponsiveGrid columns={{ sm: 2, lg: 4 }}>
+          {stats.map((stat, i) => (
+            <Reveal key={stat.label} delay={(i + 1) as 1 | 2 | 3 | 4}>
+              <StatCard label={stat.label} value={stat.value} />
+            </Reveal>
+          ))}
+        </ResponsiveGrid>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/general/typography.tsx

@@ -0,0 +1,152 @@
+import { Button, Heading, Text } from "@godxjp/ui/general";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Text + Heading — the typographic primitives. Use these INSTEAD of a hand-rolled
+ * `<span className="text-[13px] font-medium text-muted-foreground">`. Size is a step of the
+ * golden-ratio type scale (never an arbitrary px); tone/weight are semantic tokens.
+ */
+const sizes = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"] as const;
+const tones = ["default", "muted", "primary", "success", "warning", "destructive", "info"] as const;
+const levels = [1, 2, 3, 4] as const;
+
+/** Heading tone — every branch paired with the section it actually belongs on. */
+const headingTones = [
+  { tone: "default", title: "請求サマリー" },
+  { tone: "muted", title: "補足情報" },
+  { tone: "primary", title: "今月の重点項目" },
+  { tone: "success", title: "月次締め処理が完了しました" },
+  { tone: "warning", title: "承認待ちの申請があります" },
+  { tone: "destructive", title: "同期に失敗した明細" },
+  { tone: "info", title: "システムメンテナンスのお知らせ" },
+] as const;
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Typography"
+      subtitle="Text + Heading · token-driven type, never an arbitrary px className"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Heading levels</CardTitle>
+            <CardDescription>
+              level sets BOTH the --heading-h* size token and the semantic &lt;h1..h4&gt; element.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              {levels.map((level) => (
+                <Heading key={level} level={level}>
+                  H{level} · 請求書一覧
+                </Heading>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Heading tone</CardTitle>
+            <CardDescription>
+              level は文書構造、tone は意味です。見出しの tone は Text
+              と同じ意味論トークンを読むため、 節の状態を色で示しても文書階層は変わりません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {headingTones.map(({ tone, title }) => (
+                <Flex key={tone} direction="col" gap="xs">
+                  <Heading level={3} tone={tone}>
+                    {title}
+                  </Heading>
+                  <Text size="2xs" mono tone="muted">
+                    {`tone="${tone}"`}
+                  </Text>
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Text sizes</CardTitle>
+            <CardDescription>
+              size is a type-scale step (2xs / xs / sm / md / lg / xl) — sm is the base. No px.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="xs">
+              {sizes.map((size) => (
+                <Text key={size} size={size}>
+                  {size} — 関連する仕訳データを表示します
+                </Text>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Tone + weight</CardTitle>
+            <CardDescription>
+              tone maps to semantic foreground tokens; weight is the 3-weight canon (400/500/700).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Flex direction="row" gap="md" wrap align="center">
+                {tones.map((tone) => (
+                  <Text key={tone} tone={tone} weight="medium">
+                    {tone}
+                  </Text>
+                ))}
+              </Flex>
+              <Flex direction="row" gap="md" wrap align="center">
+                <Text weight="regular">Regular 400</Text>
+                <Text weight="medium">Medium 500</Text>
+                <Text weight="bold">Bold 700</Text>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Numbers, codes, truncation</CardTitle>
+            <CardDescription>
+              tabular for figures, mono for ids, truncate for one line, clamp for N lines.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Text tabular weight="medium">
+                ¥1,240,000
+              </Text>
+              <Text size="xs" mono tone="muted">
+                RC-204881 · JAN 4987241135219
+              </Text>
+              <Text truncate className="max-w-64">
+                とても長い説明テキストが一行に収まらない場合は省略記号で切り詰められます。
+              </Text>
+              {/* clamp={2} — the card-description case (dxs-platform/platform#427): a long
+               * Japanese description limited to 2 lines, full text kept in the DOM. */}
+              <Text as="p" size="sm" tone="muted" clamp={2} className="max-w-64">
+                クラウド会計・請求書発行・経費精算・勤怠管理までを一つの契約で提供する統合バックオフィスサービスです。組織の規模や業種に合わせてプランを選択でき、導入後もデータ移行と運用支援を継続的に受けられます。
+              </Text>
+              <Flex direction="row" gap="sm" align="center">
+                <Text>明細を確認してください。</Text>
+                <Button size="xs" variant="link">
+                  詳細
+                </Button>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/layout/account-chip.tsx

@@ -0,0 +1,72 @@
+import { Button } from "@godxjp/ui/general";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@godxjp/ui/data-entry";
+import { AccountChip, Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * AccountChip — the signed-in user in a PageContainer `extra` slot, a Topbar or a footer row.
+ * Avatar, name and one ghost action at the control tier height, level with the controls beside it.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="AccountChip"
+      subtitle="サインイン中のユーザー（アバター・名前・1 アクション）"
+      extra={
+        <>
+          <Select defaultValue="ja">
+            <SelectTrigger width="auto" aria-label="言語">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ja">日本語</SelectItem>
+              <SelectItem value="en">English</SelectItem>
+              <SelectItem value="vi">Tiếng Việt</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline">履歴</Button>
+          <AccountChip
+            name="Satoshi"
+            email="satoshi@example.com"
+            actionLabel="サインアウト"
+            onAction={() => {}}
+          />
+          <Button>送信</Button>
+        </>
+      }
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>ヘッダー行の中で</CardTitle>
+          <CardDescription>
+            上の `extra` スロット: Select（width=&quot;auto&quot;）、Button、AccountChip、Button
+            がすべて同じ --control-height に揃います。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex direction="col" gap="md">
+            <AccountChip name="Nguyễn Thị Thu Hà" email="thuha@example.com" />
+            <AccountChip
+              name="Satoshi"
+              avatarSrc="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><rect width='32' height='32' fill='%23334155'/></svg>"
+              actionLabel="Sign out"
+              onAction={() => {}}
+            />
+            <AccountChip
+              name="Disabled action"
+              actionLabel="Sign out"
+              onAction={() => {}}
+              disabled
+            />
+          </Flex>
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}