@godxjp/ui 31.31.7 → 32.0.0

package/docs/charts/compact-bar-trend.tsx

@@ -1,327 +0,0 @@
-import type * as React from "react";
-import { Building2, UserPlus } from "lucide-react";
-import { CompactBarTrend } from "@godxjp/ui/charts/compact-bar-trend";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  StatCard,
-} from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-
-/**
- * CompactBarTrend — the DEPENDENCY-FREE compact bar trend.
- *
- * `BarChart` needs the `recharts` optional peer, so a platform whose policy forbids screen
- * implementers from adding dependencies cannot use it. The marks here are token-sized CSS
- * blocks instead, so a dashboard gets a real framework chart with zero consumer CSS, zero
- * inline height math and zero hardcoded colour.
- *
- * Everything below is composed from real @godxjp/ui primitives only.
- */
-
-/** Seven days of new organizations — the canonical SCR-201 dataset. */
-const newOrganizations = [
-  { date: "7/24", count: 4 },
-  { date: "7/25", count: 7 },
-  { date: "7/26", count: 2 },
-  { date: "7/27", count: 9 },
-  { date: "7/28", count: 5 },
-  { date: "7/29", count: 12 },
-  { date: "7/30", count: 8 },
-];
-
-/** N is not fixed at seven — a fortnight reads at the same density. */
-const fortnight = [
-  { date: "7/17", users: 120 },
-  { date: "7/18", users: 168 },
-  { date: "7/19", users: 96 },
-  { date: "7/20", users: 74 },
-  { date: "7/21", users: 210 },
-  { date: "7/22", users: 188 },
-  { date: "7/23", users: 152 },
-  { date: "7/24", users: 240 },
-  { date: "7/25", users: 196 },
-  { date: "7/26", users: 88 },
-  { date: "7/27", users: 132 },
-  { date: "7/28", users: 174 },
-  { date: "7/29", users: 262 },
-  { date: "7/30", users: 208 },
-];
-
-/** Three points, zeros and a negative — the edge-data frame. */
-const edgeData = [
-  { period: "第1四半期", revenue: 0 },
-  { period: "非常に長い期間ラベルの例", revenue: 4200000 },
-  { period: "第3四半期", revenue: -180000 },
-];
-
-const jpy = { style: "currency", currency: "JPY", notation: "compact" } as const;
-
-export default function Demo() {
-  return (
-    <PageContainer
-      title="CompactBarTrend"
-      subtitle="recharts 不要の軽量トレンド棒グラフ · 高さ・間隔・配色はすべて --chart-trend-* トークン"
-    >
-      <Flex direction="col" gap="lg">
-        {/* ── 1. The canonical SCR-201 dashboard summary row ─────────────────────── */}
-        <ResponsiveGrid columns={3}>
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>新規組織（7日間）</CardTitle>
-              <CardDescription>日別に作成された組織数。当日を強調表示。</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="md">
-                <StatCard label="今週の合計" value="47" delta="+18%" icon={Building2} />
-                <CompactBarTrend
-                  label="新規組織（7日間）"
-                  description="日別に作成された組織数"
-                  data={newOrganizations}
-                  categoryKey="date"
-                  valueKey="count"
-                  emphasizedIndex={5}
-                  size="xs"
-                />
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>アクティビティフッター</CardTitle>
-              <CardDescription>
-                footer スロットはプロットの外側（role=img の外）に描画されるため、リンクも操作可能。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="md">
-                <StatCard label="新規ユーザー" value="1,284" delta="+6%" icon={UserPlus} />
-                <CompactBarTrend
-                  label="新規ユーザー（7日間）"
-                  data={newOrganizations}
-                  categoryKey="date"
-                  valueKey="count"
-                  emphasizedIndex={-1}
-                  footer={
-                    <Text size="xs" tone="muted">
-                      最終更新 2026-07-30 09:00 JST
-                    </Text>
-                  }
-                />
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>空状態</CardTitle>
-              <CardDescription>data が空のとき EmptyState を描画します。</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="md">
-                <CompactBarTrend
-                  label="新規組織（データなし）"
-                  data={[]}
-                  categoryKey="date"
-                  valueKey="count"
-                  emptyMessage="この期間のデータはありません"
-                />
-                <CompactBarTrend
-                  label="既定の空メッセージ"
-                  data={[]}
-                  categoryKey="date"
-                  valueKey="count"
-                />
-              </Flex>
-            </CardContent>
-          </Card>
-        </ResponsiveGrid>
-
-        {/* ── 2. size — the xs|sm|md|lg plot-height tiers ────────────────────────── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>size · 高さティア</CardTitle>
-            <CardDescription>
-              xs（ダッシュボード要約カードの既定）· sm · md · lg。高さは --chart-trend-plot-height-*
-              が所有し、px を書くことはありません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={4}>
-              {(["xs", "sm", "md", "lg"] as const).map((size) => (
-                <CompactBarTrend
-                  key={size}
-                  label={`size="${size}"`}
-                  data={newOrganizations}
-                  categoryKey="date"
-                  valueKey="count"
-                  emphasizedIndex={-1}
-                  size={size}
-                />
-              ))}
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-
-        {/* ── 3. emphasizedIndex + showCategoryLabels + numberFormat ─────────────── */}
-        <ResponsiveGrid columns={2}>
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>emphasizedIndex</CardTitle>
-              <CardDescription>
-                未指定＝強調なし · 正の index · 負の index（-1 は最新）。強調は色だけに頼らず、
-                代替テキストの該当行にも注記されます（WCAG 1.4.1）。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="md">
-                <CompactBarTrend
-                  label="強調なし"
-                  data={newOrganizations}
-                  categoryKey="date"
-                  valueKey="count"
-                  size="sm"
-                />
-                <CompactBarTrend
-                  label="emphasizedIndex={0}（最初の日）"
-                  data={newOrganizations}
-                  categoryKey="date"
-                  valueKey="count"
-                  emphasizedIndex={0}
-                  size="sm"
-                />
-                <CompactBarTrend
-                  label="emphasizedIndex={-1}（最新の日）"
-                  data={newOrganizations}
-                  categoryKey="date"
-                  valueKey="count"
-                  emphasizedIndex={-1}
-                  size="sm"
-                />
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>showCategoryLabels · numberFormat</CardTitle>
-              <CardDescription>
-                ラベルを消してもデータは代替テキストに残ります。値の書式は Intl.NumberFormat
-                （ロケール自動）。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="md">
-                <CompactBarTrend
-                  label="14日間のアクティブユーザー（目盛りなし）"
-                  description="7 点固定ではありません。N 件の category/value に対応します。"
-                  data={fortnight}
-                  categoryKey="date"
-                  valueKey="users"
-                  emphasizedIndex={-1}
-                  showCategoryLabels={false}
-                  size="sm"
-                  numberFormat={{ notation: "compact" }}
-                />
-                <CompactBarTrend
-                  label="四半期売上（通貨・端数データ）"
-                  description="0・負数・長いカテゴリ名を含む edge-data フレーム。"
-                  data={edgeData}
-                  categoryKey="period"
-                  valueKey="revenue"
-                  emphasizedIndex={1}
-                  size="sm"
-                  numberFormat={jpy}
-                />
-              </Flex>
-            </CardContent>
-          </Card>
-        </ResponsiveGrid>
-
-        {/* ── 4. Responsive — 1440 / 1024 / 390 container widths ─────────────────── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>レスポンシブ · 1440 / 1024 / 390</CardTitle>
-            <CardDescription>
-              棒は flex 1 1 0 で幅を分け合うため、同じマークアップがどのコンテナ幅にも収まります。
-              長い目盛りラベルはカードを広げずに省略されます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              {[1440, 1024, 390].map((width) => (
-                <Flex key={width} direction="col" gap="sm" style={{ maxInlineSize: `${width}px` }}>
-                  <Text size="xs" tone="muted">{`コンテナ幅 ${width}px`}</Text>
-                  <CompactBarTrend
-                    label="新規組織（7日間）"
-                    description="日別に作成された組織数"
-                    data={newOrganizations}
-                    categoryKey="date"
-                    valueKey="count"
-                    emphasizedIndex={5}
-                    footer={
-                      <Text size="xs" tone="muted">
-                        直近のアクティビティを見る
-                      </Text>
-                    }
-                  />
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* ── 5. Token theming (cardinal rules #44/#45) ──────────────────────────── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>トークンでのテーマ適用</CardTitle>
-            <CardDescription>
-              サービス側の theme.css が --chart-trend-*
-              を一度上書きするだけで密度も配色も変わります。 ページ固有の CSS
-              は不要です。ベースラインは既定で「静か」（#44）、opt-in で表示します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={2}>
-              <CompactBarTrend
-                label="既定"
-                data={newOrganizations}
-                categoryKey="date"
-                valueKey="count"
-                emphasizedIndex={-1}
-                size="sm"
-              />
-              <Flex
-                direction="col"
-                style={
-                  {
-                    "--chart-trend-bar-gap": "var(--space-1)",
-                    "--chart-trend-bar-radius": "var(--radius-pill)",
-                    "--chart-trend-bar-max-width": "var(--space-3)",
-                    "--chart-trend-bar-background": "hsl(var(--chart-2) / 0.35)",
-                    "--chart-trend-bar-emphasis-background": "hsl(var(--chart-2))",
-                    "--chart-trend-baseline-border": "1px solid hsl(var(--border))",
-                  } as React.CSSProperties
-                }
-              >
-                <CompactBarTrend
-                  label="テーマ適用（間隔・角丸・配色・ベースライン）"
-                  data={newOrganizations}
-                  categoryKey="date"
-                  valueKey="count"
-                  emphasizedIndex={-1}
-                  size="sm"
-                />
-              </Flex>
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/charts/size-tiers.tsx

@@ -1,192 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-import { AreaChart, BarChart, LineChart, PieChart } from "@godxjp/ui/charts";
-
-/**
- * Chart size tiers — the `size` prop of every recharts-backed chart
- * (`LineChart` / `BarChart` / `AreaChart` / `PieChart`).
- *
- * `size` is the CANVAS HEIGHT tier: xs は密度の高いサマリーカード、sm はカード内の補助グラフ、
- * md（既定）は本文の標準グラフ、lg は分析画面の主役グラフ向けです。高さはコンポーネントが所有し、
- * 画面側が px を書くことはありません（`height` を渡した場合のみ size より優先されます）。
- *
- * 系列の配色は --chart-1..6 パレット、目盛りと凡例の数値は Intl.NumberFormat（ロケール自動）、
- * 代替テキストは各グラフが内蔵しています。すべて real @godxjp/ui primitives のみで構成しています。
- */
-
-const tiers = ["xs", "sm", "md", "lg"] as const;
-
-/** LineChart — 2 系列（計画と実績）。系列が複数あるため凡例は既定のまま表示します。 */
-const revenue = [
-  { month: "1月", plan: 1200000, actual: 980000 },
-  { month: "2月", plan: 1500000, actual: 1610000 },
-  { month: "3月", plan: 1800000, actual: 1750000 },
-  { month: "4月", plan: 1600000, actual: 1720000 },
-  { month: "5月", plan: 2000000, actual: 1980000 },
-  { month: "6月", plan: 2200000, actual: 2410000 },
-];
-
-/** BarChart — 単一系列。凡例は不要（見出しが系列名を兼ねます）。 */
-const organizations = [
-  { month: "1月", created: 24 },
-  { month: "2月", created: 31 },
-  { month: "3月", created: 18 },
-  { month: "4月", created: 42 },
-  { month: "5月", created: 37 },
-  { month: "6月", created: 51 },
-];
-
-/** AreaChart — 単一系列の推移。 */
-const sessions = [
-  { week: "第1週", sessions: 12400 },
-  { week: "第2週", sessions: 15800 },
-  { week: "第3週", sessions: 14200 },
-  { week: "第4週", sessions: 19600 },
-  { week: "第5週", sessions: 18100 },
-];
-
-/** PieChart — 少数スライスの構成比。 */
-const expenses = [
-  { category: "給与", amount: 4200000 },
-  { category: "家賃", amount: 1800000 },
-  { category: "システム", amount: 950000 },
-  { category: "光熱費", amount: 600000 },
-];
-
-const jpy = { style: "currency", currency: "JPY", notation: "compact" } as const;
-
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Chart size tiers"
-      subtitle="LineChart · BarChart · AreaChart · PieChart の size = xs / sm / md / lg"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>LineChart · size</CardTitle>
-            <CardDescription>
-              複数系列の推移。size はキャンバス高さのティアだけを変え、配色・凡例・数値書式・
-              代替テキストはどのティアでも同じ契約のままです。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={2}>
-              {tiers.map((size) => (
-                <Flex key={size} direction="col" gap="xs">
-                  <Text size="2xs" mono tone="muted">
-                    {`size="${size}"`}
-                  </Text>
-                  <LineChart
-                    label={`月次売上（計画 vs 実績）size="${size}"`}
-                    data={revenue}
-                    categoryKey="month"
-                    series={[
-                      { dataKey: "plan", label: "計画" },
-                      { dataKey: "actual", label: "実績" },
-                    ]}
-                    numberFormat={jpy}
-                    size={size}
-                    curved
-                  />
-                </Flex>
-              ))}
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>BarChart · size</CardTitle>
-            <CardDescription>
-              単一系列のため凡例は表示しません。xs はダッシュボードのサマリーカードに収まる密度、 lg
-              は分析画面の主役グラフです。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={2}>
-              {tiers.map((size) => (
-                <Flex key={size} direction="col" gap="xs">
-                  <Text size="2xs" mono tone="muted">
-                    {`size="${size}"`}
-                  </Text>
-                  <BarChart
-                    label={`新規組織数（月別）size="${size}"`}
-                    data={organizations}
-                    categoryKey="month"
-                    series={[{ dataKey: "created", label: "新規組織" }]}
-                    numberFormat={{ notation: "compact" }}
-                    showLegend={false}
-                    size={size}
-                  />
-                </Flex>
-              ))}
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>AreaChart · size</CardTitle>
-            <CardDescription>
-              面グラフでも高さティアの扱いは同じです。低いティアでは縦軸の目盛りが自動的に
-              間引かれるため、密度の高いカードでも軸ラベルが衝突しません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={2}>
-              {tiers.map((size) => (
-                <Flex key={size} direction="col" gap="xs">
-                  <Text size="2xs" mono tone="muted">
-                    {`size="${size}"`}
-                  </Text>
-                  <AreaChart
-                    label={`週次セッション数 size="${size}"`}
-                    data={sessions}
-                    categoryKey="week"
-                    series={[{ dataKey: "sessions", label: "セッション" }]}
-                    numberFormat={{ notation: "compact" }}
-                    showLegend={false}
-                    size={size}
-                    curved
-                  />
-                </Flex>
-              ))}
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>PieChart · size</CardTitle>
-            <CardDescription>
-              円グラフは凡例で識別するため、どのティアでも凡例を残します。低いティアでは
-              凡例の分だけ描画領域が狭くなるので、スライスは 5 件以下に保つのが読みやすい設計です。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={2}>
-              {tiers.map((size) => (
-                <Flex key={size} direction="col" gap="xs">
-                  <Text size="2xs" mono tone="muted">
-                    {`size="${size}"`}
-                  </Text>
-                  <PieChart
-                    label={`経費内訳 size="${size}"`}
-                    data={expenses}
-                    dataKey="amount"
-                    nameKey="category"
-                    numberFormat={jpy}
-                    size={size}
-                    donut
-                  />
-                </Flex>
-              ))}
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/accordion.tsx

@@ -1,99 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Accordion — collapsible stacked sections (FAQ, grouped settings). Compose
- * Accordion > AccordionItem > AccordionTrigger + AccordionContent; each item
- * needs a unique value. Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Accordion"
-      subtitle="Collapsible stacked sections · FAQ, grouped settings"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>単一開閉 (type=&quot;single&quot;)</CardTitle>
-            <CardDescription>
-              常に1セクションのみ開きます。collapsible
-              により開いている項目を再度閉じられます。defaultValue で税の項目を初期表示。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Accordion type="single" collapsible defaultValue="tax">
-              <AccordionItem value="tax">
-                <AccordionTrigger>消費税の計算方法は？</AccordionTrigger>
-                <AccordionContent>
-                  税抜・税込は事業所設定に従い、端数処理（切り捨て/四捨五入）も同設定を適用します。
-                </AccordionContent>
-              </AccordionItem>
-              <AccordionItem value="invoice">
-                <AccordionTrigger>インボイス制度に対応していますか？</AccordionTrigger>
-                <AccordionContent>
-                  適格請求書発行事業者の登録番号を保持し、適格・非適格を仕訳時に判定します。
-                </AccordionContent>
-              </AccordionItem>
-              <AccordionItem value="close">
-                <AccordionTrigger>月次決算の締めはどう行いますか？</AccordionTrigger>
-                <AccordionContent>
-                  期間ロック後は当該期間への記帳を拒否します。締め処理は会計期間設定から行います。
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>複数開閉 (type=&quot;multiple&quot;)</CardTitle>
-            <CardDescription>
-              複数セクションを同時に開けます。設定をグループ分けして一覧したい場面に最適。defaultValue
-              で「通知」と「権限」を初期表示。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Accordion type="multiple" defaultValue={["notify", "perm"]}>
-              <AccordionItem value="notify">
-                <AccordionTrigger>通知設定</AccordionTrigger>
-                <AccordionContent>
-                  仕訳の承認依頼・月次締めのリマインドをメールおよびアプリ内通知で受け取ります。
-                </AccordionContent>
-              </AccordionItem>
-              <AccordionItem value="perm">
-                <AccordionTrigger>権限とロール</AccordionTrigger>
-                <AccordionContent>
-                  担当者・承認者・管理者の3ロールを割り当て、事業所単位で操作範囲を制限します。
-                </AccordionContent>
-              </AccordionItem>
-              <AccordionItem value="export">
-                <AccordionTrigger>データ書き出し</AccordionTrigger>
-                <AccordionContent>
-                  仕訳帳・総勘定元帳を CSV / PDF
-                  で出力します。会計期間を指定して一括ダウンロード可能。
-                </AccordionContent>
-              </AccordionItem>
-              <AccordionItem value="api" disabled>
-                <AccordionTrigger>API 連携（準備中）</AccordionTrigger>
-                <AccordionContent>
-                  外部システムとの API 連携は次回リリースで提供予定です。
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}