@godxjp/ui 19.1.0 → 19.2.0

package/docs/data-display/carousel.tsx

@@ -0,0 +1,156 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Carousel,
+  CarouselContent,
+  CarouselDots,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  StatCard,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Carousel — Embla-backed stepping list with prev/next controls.
+ * Compose Carousel > CarouselContent > CarouselItem + CarouselPrevious/Next.
+ * Structurally configured via `opts` (loop, align, axis) and `plugins`; `setApi`
+ * exposes the Embla api for external controls (e.g. dot indicators via scrollTo).
+ * Composed only from real @godxjp/ui components.
+ */
+const months = [
+  { label: "1月 売上", value: "¥7.4M", delta: "+4%" },
+  { label: "2月 売上", value: "¥7.9M", delta: "+7%" },
+  { label: "3月 売上", value: "¥8.0M", delta: "+1%" },
+  { label: "4月 売上", value: "¥8.2M", delta: "+12%" },
+  { label: "5月 売上", value: "¥8.6M", delta: "+5%" },
+];
+
+const slides = [
+  { label: "第1四半期", value: "¥23.3M" },
+  { label: "第2四半期", value: "¥25.4M" },
+  { label: "第3四半期", value: "¥26.1M" },
+];
+
+/** Dot navigation — `CarouselDots` reads the Embla api from context; no manual `setApi` wiring. */
+function DotNavExample() {
+  return (
+    <Carousel
+      className="px-10"
+      opts={{ loop: true }}
+      aria-label="ドットナビゲーション付きカルーセル"
+    >
+      <CarouselContent>
+        {slides.map((s) => (
+          <CarouselItem key={s.label}>
+            <StatCard label={s.label} value={s.value} />
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+      <CarouselDots />
+    </Carousel>
+  );
+}
+
+export default function Demo() {
+  return (
+    <PageContainer title="Carousel" subtitle="Embla-backed stepping list with prev/next controls">
+      <Flex direction="col" gap="lg">
+        {/* Default horizontal, multi-up responsive track. px-10 clears the absolute arrow buttons. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>月次 KPI</CardTitle>
+            <CardDescription>
+              Default horizontal track. Step with prev/next; arrows auto-disable at the first and
+              last slide.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Carousel className="px-10" aria-label="月次 KPI カルーセル">
+              <CarouselContent>
+                {months.map((m) => (
+                  <CarouselItem key={m.label} className="basis-full sm:basis-1/2 lg:basis-1/3">
+                    <StatCard label={m.label} value={m.value} delta={m.delta} />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </CardContent>
+        </Card>
+
+        {/* opts: looping single-up gallery — wraps past the ends, so both arrows stay enabled. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ループ ギャラリー</CardTitle>
+            <CardDescription>
+              opts=&#123;&#123; loop: true, align: &quot;start&quot; &#125;&#125; — wraps past the
+              ends, so prev/next never disable.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Carousel
+              className="px-10"
+              opts={{ loop: true, align: "start" }}
+              aria-label="ループギャラリーカルーセル"
+            >
+              <CarouselContent>
+                {months.map((m) => (
+                  <CarouselItem key={m.label}>
+                    <StatCard label={m.label} value={m.value} delta={m.delta} />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </CardContent>
+        </Card>
+
+        {/* setApi + scrollTo: external dot navigation, active dot seeded visible at rest. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ドット ナビゲーション</CardTitle>
+            <CardDescription>
+              Drop in CarouselDots and it reads the Embla api from context, rendering one dot per
+              slide. The active dot widens and carries aria-current.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <DotNavExample />
+          </CardContent>
+        </Card>
+
+        {/* opts.axis: vertical orientation — emits data-orientation="vertical". */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>縦方向 (vertical)</CardTitle>
+            <CardDescription>
+              opts=&#123;&#123; axis: &quot;y&quot; &#125;&#125; — stacks slides and moves the
+              prev/next controls to top and bottom.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Carousel className="py-10" opts={{ axis: "y" }} aria-label="縦方向カルーセル">
+              <CarouselContent className="h-48">
+                {slides.map((s) => (
+                  <CarouselItem key={s.label}>
+                    <StatCard label={s.label} value={s.value} />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/charts.tsx

@@ -0,0 +1,198 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+import { AreaChart, BarChart, LineChart, PieChart } from "@godxjp/ui/charts";
+
+/**
+ * Charts — tree-shaken `@godxjp/ui/charts` entry (needs the `recharts` optional
+ * peer). Every chart owns the `--chart-1..6` palette, locale-aware Intl number
+ * formatting on its ticks/tooltips, a visible caption + a screen-reader text
+ * alternative, and a built-in empty state. Composed only from real primitives.
+ */
+
+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 },
+];
+
+const traffic = [
+  { day: "月", organic: 320, paid: 140, referral: 80 },
+  { day: "火", organic: 410, paid: 180, referral: 90 },
+  { day: "水", organic: 380, paid: 160, referral: 110 },
+  { day: "木", organic: 520, paid: 220, referral: 130 },
+  { day: "金", organic: 610, paid: 260, referral: 150 },
+];
+
+const expenses = [
+  { category: "給与", amount: 4200000 },
+  { category: "家賃", amount: 1800000 },
+  { category: "光熱費", amount: 600000 },
+  { category: "システム", amount: 950000 },
+  { category: "その他", amount: 430000 },
+];
+
+const sparseRevenue = [
+  { month: "1月", actual: 980000 },
+  { month: "2月", actual: null },
+  { month: "非常に長いカテゴリ名", actual: -120000 },
+];
+
+const jpy = { style: "currency", currency: "JPY" } as const;
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Charts"
+      subtitle="recharts をラップしたツリーシェイク可能なグラフ群 · トークン配色・ロケール数値・代替テキストを内蔵"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>LineChart · 月次トレンド</CardTitle>
+            <CardDescription>
+              複数系列の推移。numberFormat で通貨をロケールに合わせて表示します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <LineChart
+              label="月次売上（計画 vs 実績）"
+              data={revenue}
+              categoryKey="month"
+              series={[
+                { dataKey: "plan", label: "計画" },
+                { dataKey: "actual", label: "実績" },
+              ]}
+              numberFormat={jpy}
+              curved
+            />
+          </CardContent>
+        </Card>
+
+        <ResponsiveGrid columns={2}>
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>BarChart · 地域/期間比較</CardTitle>
+              <CardDescription>compact 表記。stacked で構成比に切替可能。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <BarChart
+                label="曜日別トラフィック"
+                data={traffic}
+                categoryKey="day"
+                series={[
+                  { dataKey: "organic", label: "オーガニック" },
+                  { dataKey: "paid", label: "広告" },
+                  { dataKey: "referral", label: "参照" },
+                ]}
+                numberFormat={{ notation: "compact" }}
+                stacked
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>AreaChart · 累積構成</CardTitle>
+              <CardDescription>stacked で合計の積み上がりを表現。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AreaChart
+                label="チャネル別トラフィック（積み上げ）"
+                data={traffic}
+                categoryKey="day"
+                series={[
+                  { dataKey: "organic", label: "オーガニック" },
+                  { dataKey: "paid", label: "広告" },
+                  { dataKey: "referral", label: "参照" },
+                ]}
+                stacked
+              />
+            </CardContent>
+          </Card>
+        </ResponsiveGrid>
+
+        <ResponsiveGrid columns={2}>
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>PieChart · 構成比</CardTitle>
+              <CardDescription>少数スライス向け。donut にも切替可能。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <PieChart
+                label="経費内訳"
+                data={expenses}
+                dataKey="amount"
+                nameKey="category"
+                numberFormat={jpy}
+                donut
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>空状態</CardTitle>
+              <CardDescription>data が空のとき EmptyState を表示します。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <BarChart
+                label="売上（データなし）"
+                data={[]}
+                categoryKey="month"
+                series={[{ dataKey: "actual", label: "実績" }]}
+                size="sm"
+              />
+            </CardContent>
+          </Card>
+        </ResponsiveGrid>
+
+        <ResponsiveGrid columns={2}>
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>BarChart · 横方向・非積み上げ</CardTitle>
+              <CardDescription>長いカテゴリと負数を含む edge-data frame。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <BarChart
+                label="例外値を含む売上"
+                description="null、負数、長いカテゴリ名の描画と代替テキストを確認します。"
+                data={sparseRevenue}
+                categoryKey="month"
+                series={[{ dataKey: "actual", label: "実績", color: "var(--chart-3)" }]}
+                numberFormat={jpy}
+                horizontal
+                showGrid={false}
+                showLegend={false}
+                size="xs"
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>PieChart · full pie・custom colours</CardTitle>
+              <CardDescription>donut=false と colors の明示指定。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <PieChart
+                id="expenses-full-pie"
+                label="経費内訳（円グラフ）"
+                description="カスタム配色を使用した full pie。"
+                data={expenses.slice(0, 3)}
+                dataKey="amount"
+                nameKey="category"
+                colors={["var(--chart-2)", "var(--chart-4)", "var(--chart-6)"]}
+                numberFormat={jpy}
+                height={240}
+                showLegend={false}
+              />
+            </CardContent>
+          </Card>
+        </ResponsiveGrid>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/code-block.tsx

@@ -0,0 +1,90 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CodeBlock,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const responseBody = `{
+  "data": {
+    "id": 2,
+    "key": "EXSELI-2",
+    "title": "見積画面で合計が更新されない",
+    "attachments": [
+      { "id": 7, "name": "trace.har", "size": 65536 },
+      { "id": 8, "name": "screenshot.png", "size": 240113 }
+    ]
+  }
+}`;
+
+const consoleLog = `[12:04:11.203] warn  Deprecated: estimate.total is read before hydrate()
+[12:04:11.209] error TypeError: Cannot read properties of undefined (reading 'total')
+    at EstimateSummary (estimate-summary.tsx:41:17)
+[12:04:11.210] info  retry 1/3`;
+
+const longHeader =
+  'report-to: {"endpoints":[{"url":"https:\\/\\/a.nel.cloudflare.com\\/report\\/v4?s=' +
+  "x".repeat(200) +
+  '"}],"group":"cf-nel","max_age":604800}';
+
+/**
+ * CodeBlock — a block of preformatted text: request and response bodies, console output,
+ * snippets. Wraps long lines by default and scrolls inside the block past `maxHeight`.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer title="CodeBlock" subtitle="整形済みテキストのブロック · 折り返しと高さ上限">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Response body (maxHeight="sm")</CardTitle>
+            <CardDescription>
+              64 KB のレスポンスでもページを押し下げない。上限を超えるとブロック内でスクロールする。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CodeBlock maxHeight="sm" language="json" aria-label="Response body">
+              {responseBody}
+            </CodeBlock>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Console (size="xs", maxHeight="md")</CardTitle>
+            <CardDescription>ログは xs で密に。行の折り返しは既定で有効。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CodeBlock size="xs" maxHeight="md" aria-label="Console output">
+              {consoleLog}
+            </CodeBlock>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Long line: wrap (default) vs wrap={"{false}"}</CardTitle>
+            <CardDescription>
+              241 文字のヘッダー値。既定はカード内で折り返す。wrap=false は横スクロールになる
+              (maxHeight="lg" / "none")。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <CodeBlock size="sm" maxHeight="none" aria-label="Wrapped header">
+                {longHeader}
+              </CodeBlock>
+              <CodeBlock wrap={false} maxHeight="lg" aria-label="Unwrapped header">
+                {longHeader}
+              </CodeBlock>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/collapsible.tsx

@@ -0,0 +1,162 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+
+/**
+ * Collapsible — a single open/close region (no item set; use Accordion for a set
+ * of sections). Compose Collapsible + CollapsibleTrigger + CollapsibleContent.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  // Controlled example: open state is owned by the page, not the component.
+  const [open, setOpen] = useState(false);
+
+  return (
+    <PageContainer title="Collapsible" subtitle="A single toggleable region">
+      <Flex direction="col" gap="lg">
+        {/* Uncontrolled pair — defaultOpen vs default-closed, side by side */}
+        <Flex direction="col" gap="md" className="md:flex-row">
+          <Card className="flex-1">
+            <CardHeader>
+              <CardTitle level={2}>補助科目（既定で開く）</CardTitle>
+              <CardDescription>defaultOpen: 初期表示で展開された状態。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Collapsible defaultOpen>
+                <Flex direction="row" align="center" justify="between" gap="md">
+                  <Text weight="medium">普通預金 · 補助科目 (3)</Text>
+                  <CollapsibleTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label="開閉"
+                      className="transition-transform data-[state=open]:rotate-180"
+                    >
+                      <ChevronsUpDown />
+                    </Button>
+                  </CollapsibleTrigger>
+                </Flex>
+                <CollapsibleContent>
+                  <Flex direction="col" gap="xs">
+                    <div className="text-sm">GMOあおぞらネット銀行</div>
+                    <div className="text-sm">三菱UFJ銀行 渋谷支店</div>
+                    <div className="text-sm">みずほ銀行 当座</div>
+                  </Flex>
+                </CollapsibleContent>
+              </Collapsible>
+            </CardContent>
+          </Card>
+
+          <Card className="flex-1">
+            <CardHeader>
+              <CardTitle level={2}>補助科目（既定で閉じる）</CardTitle>
+              <CardDescription>初期表示は折りたたみ。トリガーで展開します。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Collapsible>
+                <Flex direction="row" align="center" justify="between" gap="md">
+                  <Text weight="medium">当座預金 · 補助科目 (2)</Text>
+                  <CollapsibleTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label="開閉"
+                      className="transition-transform data-[state=open]:rotate-180"
+                    >
+                      <ChevronsUpDown />
+                    </Button>
+                  </CollapsibleTrigger>
+                </Flex>
+                <CollapsibleContent>
+                  <Flex direction="col" gap="xs">
+                    <div className="text-sm">三井住友銀行 丸の内支店</div>
+                    <div className="text-sm">りそな銀行 本店</div>
+                  </Flex>
+                </CollapsibleContent>
+              </Collapsible>
+            </CardContent>
+          </Card>
+        </Flex>
+
+        {/* Controlled — open state owned by the page (open + onOpenChange) */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>制御コンポーネント</CardTitle>
+            <CardDescription>open と onOpenChange でページ側が開閉を管理します。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Collapsible open={open} onOpenChange={setOpen}>
+              <Flex direction="row" align="center" justify="between" gap="md">
+                <Text weight="medium">
+                  外貨預金 · 補助科目 (2) · {open ? "展開中" : "折りたたみ中"}
+                </Text>
+                <Flex direction="row" align="center" gap="xs">
+                  <Button variant="outline" size="sm" onClick={() => setOpen((value) => !value)}>
+                    {open ? "閉じる" : "開く"}
+                  </Button>
+                  <CollapsibleTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label="開閉"
+                      className="transition-transform data-[state=open]:rotate-180"
+                    >
+                      <ChevronsUpDown />
+                    </Button>
+                  </CollapsibleTrigger>
+                </Flex>
+              </Flex>
+              <CollapsibleContent>
+                <Flex direction="col" gap="xs">
+                  <div className="text-sm">USD 普通預金 · シティバンク</div>
+                  <div className="text-sm">EUR 普通預金 · 三菱UFJ銀行</div>
+                </Flex>
+              </CollapsibleContent>
+            </Collapsible>
+          </CardContent>
+        </Card>
+
+        {/* Disabled — locked, non-interactive */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>無効状態</CardTitle>
+            <CardDescription>disabled: トリガーが操作不可（ロック）になります。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Collapsible disabled defaultOpen>
+              <Flex direction="row" align="center" justify="between" gap="md">
+                <Text weight="medium">定期預金 · 補助科目 (1) · 締め処理中</Text>
+                <CollapsibleTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    aria-label="開閉"
+                    className="transition-transform data-[state=open]:rotate-180"
+                  >
+                    <ChevronsUpDown />
+                  </Button>
+                </CollapsibleTrigger>
+              </Flex>
+              <CollapsibleContent>
+                <Flex direction="col" gap="xs">
+                  <div className="text-sm">三菱UFJ銀行 定期 (1年)</div>
+                </Flex>
+              </CollapsibleContent>
+            </Collapsible>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}