@godxjp/ui 19.0.0 → 19.2.0

package/docs/data-entry/toggle-group.tsx

@@ -0,0 +1,225 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * ToggleGroup — single or multi-select toggle set. type='single' for mutually
+ * exclusive modes; type='multiple' for independent selections. Never raw radio
+ * buttons for this pattern. Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [period, setPeriod] = useState<string>("monthly");
+  const [formats, setFormats] = useState<string[]>(["pdf"]);
+  const [view, setView] = useState<string>("list");
+
+  return (
+    <PageContainer
+      title="ToggleGroup"
+      subtitle="Single or multi-select toggle set · toolbar modes, output formats"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Single selection (type=“single”)</CardTitle>
+            <CardDescription>
+              Mutually exclusive · switching fiscal period. value is string, onValueChange receives
+              string.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="period" label="集計期間">
+              <ToggleGroup
+                type="single"
+                value={period}
+                onValueChange={(v) => {
+                  if (v) setPeriod(v);
+                }}
+              >
+                <ToggleGroupItem value="daily">日次</ToggleGroupItem>
+                <ToggleGroupItem value="monthly">月次</ToggleGroupItem>
+                <ToggleGroupItem value="quarterly">四半期</ToggleGroupItem>
+                <ToggleGroupItem value="yearly">年次</ToggleGroupItem>
+              </ToggleGroup>
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Multiple selection (type=“multiple”)</CardTitle>
+            <CardDescription>
+              Independent toggles · output format selection. value is string[], onValueChange
+              receives string[].
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="formats" label="出力形式">
+              <ToggleGroup
+                type="multiple"
+                value={formats}
+                onValueChange={(v) => setFormats(v as string[])}
+              >
+                <ToggleGroupItem value="pdf">PDF</ToggleGroupItem>
+                <ToggleGroupItem value="csv">CSV</ToggleGroupItem>
+                <ToggleGroupItem value="xlsx">Excel</ToggleGroupItem>
+                <ToggleGroupItem value="mail">メール</ToggleGroupItem>
+              </ToggleGroup>
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>View density switcher</CardTitle>
+            <CardDescription>
+              Common use case: switching between display modes in a list or dashboard.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ToggleGroup
+              type="single"
+              value={view}
+              onValueChange={(v) => {
+                if (v) setView(v);
+              }}
+            >
+              <ToggleGroupItem value="list">一覧</ToggleGroupItem>
+              <ToggleGroupItem value="card">カード</ToggleGroupItem>
+              <ToggleGroupItem value="compact">コンパクト</ToggleGroupItem>
+            </ToggleGroup>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>variant · default / outline</CardTitle>
+            <CardDescription>
+              variant は ToggleGroup にだけ指定すれば全アイテムへ伝播する（各 ToggleGroupItem
+              への繰り返し指定は不要）。default は選択時に背景が塗られ、outline は枠線で示す。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;default&quot;
+                </Text>
+                <ToggleGroup type="single" variant="default" defaultValue="pdf">
+                  <ToggleGroupItem value="pdf">PDF</ToggleGroupItem>
+                  <ToggleGroupItem value="csv">CSV</ToggleGroupItem>
+                  <ToggleGroupItem value="xlsx">Excel</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;outline&quot;
+                </Text>
+                <ToggleGroup type="single" variant="outline" defaultValue="pdf">
+                  <ToggleGroupItem value="pdf">PDF</ToggleGroupItem>
+                  <ToggleGroupItem value="csv">CSV</ToggleGroupItem>
+                  <ToggleGroupItem value="xlsx">Excel</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>size · sm / md / lg</CardTitle>
+            <CardDescription>
+              size も ToggleGroup にだけ指定すれば全アイテムへ伝播する。md
+              が既定。周囲のコントロール密度に合わせて sm または lg を選ぶ。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  size=&quot;sm&quot;
+                </Text>
+                <ToggleGroup type="single" size="sm" defaultValue="day">
+                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
+                  <ToggleGroupItem value="month">月次</ToggleGroupItem>
+                  <ToggleGroupItem value="year">年次</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  size=&quot;md&quot;
+                </Text>
+                <ToggleGroup type="single" size="md" defaultValue="day">
+                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
+                  <ToggleGroupItem value="month">月次</ToggleGroupItem>
+                  <ToggleGroupItem value="year">年次</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  size=&quot;lg&quot;
+                </Text>
+                <ToggleGroup type="single" size="lg" defaultValue="day">
+                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
+                  <ToggleGroupItem value="month">月次</ToggleGroupItem>
+                  <ToggleGroupItem value="year">年次</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>継承と上書き（group → item）</CardTitle>
+            <CardDescription>
+              group の variant / size は全アイテムへ伝播し、item 側で明示した prop
+              が常に優先される。group だけ・item だけ・両方に指定した 3
+              つの書き方はすべて同じ描画になる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  group size=&quot;sm&quot; · 中央のみ item size=&quot;lg&quot; で上書き
+                </Text>
+                <ToggleGroup type="single" size="sm" variant="outline" defaultValue="day">
+                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
+                  <ToggleGroupItem value="month" size="lg">
+                    月次
+                  </ToggleGroupItem>
+                  <ToggleGroupItem value="year">年次</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  group にのみ指定（伝播）
+                </Text>
+                <ToggleGroup type="single" size="lg" variant="outline" defaultValue="day">
+                  <ToggleGroupItem value="day">日次</ToggleGroupItem>
+                  <ToggleGroupItem value="month">月次</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  item にのみ指定（従来の書き方・描画は不変）
+                </Text>
+                <ToggleGroup type="single" defaultValue="day">
+                  <ToggleGroupItem value="day" size="lg" variant="outline">
+                    日次
+                  </ToggleGroupItem>
+                  <ToggleGroupItem value="month" size="lg" variant="outline">
+                    月次
+                  </ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/toggle.tsx

@@ -0,0 +1,127 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Toggle } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Toggle · a single pressed/unpressed button (Radix Toggle). Use for toolbar
+ * actions and pinned filters. For multi-option selection use ToggleGroup.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [bold, setBold] = useState(false);
+  const [pinned, setPinned] = useState(true);
+  const [outline, setOutline] = useState(false);
+  const [unread, setUnread] = useState(true);
+
+  return (
+    <PageContainer
+      title="Toggle"
+      subtitle="Single pressed/unpressed button · toolbar actions, pinned filters"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Controlled state</CardTitle>
+            <CardDescription>
+              Controlled via pressed/onPressedChange. Suitable for toolbar formatting or filter
+              pins.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md">
+              <Toggle pressed={bold} onPressedChange={setBold} aria-label="太字">
+                太字
+              </Toggle>
+              <Toggle pressed={pinned} onPressedChange={setPinned} aria-label="未払いをピン留め">
+                未払いをピン留め
+              </Toggle>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Variants</CardTitle>
+            <CardDescription>
+              default (filled background when pressed) vs outline (border style).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md">
+              <Toggle
+                variant="default"
+                pressed={pinned}
+                onPressedChange={setPinned}
+                aria-label="仕訳フィルタ"
+              >
+                仕訳フィルタ
+              </Toggle>
+              <Toggle
+                variant="outline"
+                pressed={outline}
+                onPressedChange={setOutline}
+                aria-label="消費税対象のみ"
+              >
+                消費税対象のみ
+              </Toggle>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Sizes</CardTitle>
+            <CardDescription>sm / md / lg · match surrounding density.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md" align="center">
+              <Toggle size="sm" aria-label="小サイズ">
+                小
+              </Toggle>
+              <Toggle size="md" aria-label="標準サイズ">
+                標準
+              </Toggle>
+              <Toggle size="lg" aria-label="大サイズ">
+                大
+              </Toggle>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Count</CardTitle>
+            <CardDescription>
+              count / overflowCount / showZero / countLabel · Button と同じ語彙。押下状態と数字が 1
+              つのコントロールに乗るので、ファセットフィルタチップやリアクションチップが real
+              primitive だけで書ける。数字は Intl.NumberFormat
+              でロケール整形され、アクセシブル名は「未読, 12 件」のように読み上げられる。
+              さらに詳しい実画面は Toggle Count のページを参照。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md" align="center" wrap>
+              <Toggle
+                pressed={unread}
+                onPressedChange={setUnread}
+                count={12}
+                countLabel="件"
+                variant="outline"
+              >
+                未読
+              </Toggle>
+              <Toggle count={1240} overflowCount={999} countLabel="件" variant="outline">
+                すべて
+              </Toggle>
+              <Toggle count={0} showZero={false} countLabel="件" variant="outline">
+                下書き
+              </Toggle>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/transfer.tsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Transfer } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Transfer — デュアルリストシャトル。
+ * targetKeys を自分で管理し onValueChange で更新する。
+ * TransferItemProp は { key, title, description?, disabled? }。
+ * Never hand-roll a two-panel picker. Composed only from real @godxjp/ui components.
+ */
+
+const ALL_ACCOUNTS = [
+  { key: "1010", title: "現金", description: "流動資産" },
+  { key: "1020", title: "普通預金", description: "流動資産" },
+  { key: "1030", title: "売掛金", description: "流動資産" },
+  { key: "1040", title: "前払費用", description: "流動資産" },
+  { key: "2010", title: "機械装置", description: "固定資産" },
+  { key: "2020", title: "車両運搬具", description: "固定資産" },
+  { key: "3010", title: "買掛金", description: "流動負債" },
+  { key: "3020", title: "未払費用", description: "流動負債" },
+  { key: "4010", title: "売上高", description: "収益" },
+  { key: "5010", title: "売上原価", description: "費用" },
+  { key: "5020", title: "給料手当", description: "費用" },
+  { key: "5030", title: "旅費交通費", description: "費用", disabled: true },
+];
+
+const REPORT_COLUMNS = [
+  { key: "col-date", title: "日付", description: "仕訳日付" },
+  { key: "col-no", title: "伝票番号", description: "仕訳番号" },
+  { key: "col-debit-acct", title: "借方科目", description: "借方勘定科目コード" },
+  { key: "col-debit-amt", title: "借方金額", description: "借方金額（円）" },
+  { key: "col-credit-acct", title: "貸方科目", description: "貸方勘定科目コード" },
+  { key: "col-credit-amt", title: "貸方金額", description: "貸方金額（円）" },
+  { key: "col-tax", title: "税区分", description: "消費税区分コード" },
+  { key: "col-dept", title: "部門", description: "計上部門" },
+  { key: "col-memo", title: "摘要", description: "仕訳摘要" },
+  { key: "col-partner", title: "取引先", description: "取引先名" },
+];
+
+export default function Demo() {
+  const [mappedKeys, setMappedKeys] = useState<string[]>(["1010", "1030"]);
+  const [reportKeys, setReportKeys] = useState<string[]>([
+    "col-date",
+    "col-no",
+    "col-debit-acct",
+    "col-credit-acct",
+  ]);
+
+  return (
+    <PageContainer
+      title="Transfer"
+      subtitle="デュアルリストシャトル · targetKeys を管理し onValueChange で更新する"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>外部勘定科目マッピング（検索付き）</CardTitle>
+            <CardDescription>
+              外部から取り込んだ科目（左）を社内正規科目（右）にマッピングする。 マッピング済み:{" "}
+              {mappedKeys.length} 件
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Transfer
+              dataSource={ALL_ACCOUNTS}
+              targetKeys={mappedKeys}
+              onValueChange={(nextKeys) => setMappedKeys(nextKeys)}
+              titles={["取込科目", "マッピング済"]}
+              showSearch
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>レポート列選択（追加専用）</CardTitle>
+            <CardDescription>
+              oneWay=true でレポートに列を追加のみ可能（削除不可）。 選択列: {reportKeys.length} 列
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Transfer
+              dataSource={REPORT_COLUMNS}
+              targetKeys={reportKeys}
+              onValueChange={(nextKeys) => setReportKeys(nextKeys)}
+              titles={["利用可能な列", "レポート列"]}
+              showSearch
+              oneWay
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/tree-select.tsx

@@ -0,0 +1,204 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, TreeSelect } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * TreeSelect — 階層ツリーピッカー（Popover + 展開/折り畳み）。
+ * 単一選択: onChange は string | undefined。
+ * 複数/チェック可能: onChange は string[]。
+ * SHOW_* 定数は TreeSelect.SHOW_CHILD / SHOW_PARENT / SHOW_ALL を使用。
+ * Never a raw <select>. Composed only from real @godxjp/ui components.
+ */
+
+const ACCOUNT_TREE = [
+  {
+    value: "assets",
+    label: "資産",
+    children: [
+      {
+        value: "current-assets",
+        label: "流動資産",
+        children: [
+          { value: "cash", label: "現金" },
+          { value: "bank", label: "普通預金" },
+          { value: "ar", label: "売掛金" },
+          { value: "prepaid", label: "前払費用" },
+        ],
+      },
+      {
+        value: "fixed-assets",
+        label: "固定資産",
+        children: [
+          { value: "machinery", label: "機械装置" },
+          { value: "vehicles", label: "車両運搬具" },
+          { value: "furniture", label: "器具備品" },
+        ],
+      },
+    ],
+  },
+  {
+    value: "liabilities",
+    label: "負債",
+    children: [
+      {
+        value: "current-liabilities",
+        label: "流動負債",
+        children: [
+          { value: "ap", label: "買掛金" },
+          { value: "accrued", label: "未払費用" },
+          { value: "tax-payable", label: "未払消費税" },
+        ],
+      },
+      {
+        value: "long-term",
+        label: "固定負債",
+        children: [{ value: "long-loan", label: "長期借入金" }],
+      },
+    ],
+  },
+  {
+    value: "equity",
+    label: "純資産",
+    children: [
+      { value: "capital", label: "資本金" },
+      { value: "retained", label: "繰越利益剰余金" },
+    ],
+  },
+  {
+    value: "revenue",
+    label: "収益",
+    children: [
+      { value: "sales", label: "売上高" },
+      { value: "other-income", label: "営業外収益" },
+    ],
+  },
+  {
+    value: "expenses",
+    label: "費用",
+    children: [
+      { value: "cogs", label: "売上原価" },
+      { value: "salary-exp", label: "給料手当" },
+      { value: "rent-exp", label: "地代家賃" },
+      { value: "travel-exp", label: "旅費交通費" },
+    ],
+  },
+];
+
+const DEPT_TREE = [
+  {
+    value: "hq",
+    label: "本社",
+    children: [
+      {
+        value: "finance-div",
+        label: "財務本部",
+        children: [
+          { value: "accounting", label: "経理部" },
+          { value: "treasury", label: "財務部" },
+        ],
+      },
+      {
+        value: "sales-div",
+        label: "営業本部",
+        children: [
+          { value: "sales-east", label: "東日本営業部" },
+          { value: "sales-west", label: "西日本営業部" },
+        ],
+      },
+    ],
+  },
+  {
+    value: "branch",
+    label: "支社",
+    children: [
+      { value: "osaka-branch", label: "大阪支社" },
+      { value: "nagoya-branch", label: "名古屋支社" },
+    ],
+  },
+];
+
+export default function Demo() {
+  const [glAccount, setGlAccount] = useState<string | undefined>();
+  const [deptFilter, setDeptFilter] = useState<string[]>([]);
+
+  return (
+    <PageContainer
+      title="TreeSelect"
+      subtitle="階層ツリーピッカー · 単一は string、複数は string[] を返す"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>勘定科目選択（単一・検索付き）</CardTitle>
+            <CardDescription>
+              科目ツリーから1科目を選択。showSearch + treeDefaultExpandAll で素早くアクセス。
+              選択値: {glAccount ?? "未選択"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="gl-account" label="勘定科目">
+              <TreeSelect
+                id="gl-account"
+                treeData={ACCOUNT_TREE}
+                value={glAccount}
+                onValueChange={(v) => setGlAccount(v as string | undefined)}
+                showSearch
+                treeDefaultExpandAll
+                placeholder="科目を選択..."
+                allowClear
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>部門フィルター（複数選択 + チェックボックス）</CardTitle>
+            <CardDescription>
+              treeCheckable で親選択が子に連鎖。SHOW_PARENT で表示を集約。 選択数:{" "}
+              {deptFilter.length} 件
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="dept-filter" label="部門">
+              <TreeSelect
+                id="dept-filter"
+                treeData={DEPT_TREE}
+                value={deptFilter}
+                onValueChange={(v) => setDeptFilter(v as string[])}
+                treeCheckable
+                showCheckedStrategy={TreeSelect.SHOW_PARENT}
+                showSearch
+                placeholder="部門を選択..."
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>費用科目（チェック非連鎖・SHOW_ALL）</CardTitle>
+            <CardDescription>
+              treeCheckStrictly=true で親子独立選択。SHOW_ALL で全チェックノードを表示。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="expense-accounts" label="費用科目">
+              <TreeSelect
+                id="expense-accounts"
+                treeData={ACCOUNT_TREE}
+                treeCheckable
+                treeCheckStrictly
+                showCheckedStrategy={TreeSelect.SHOW_ALL}
+                placeholder="費用科目を複数選択..."
+                showSearch
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}