@godxjp/ui 31.31.7 → 32.0.0

package/docs/data-entry/search-input.tsx

@@ -1,121 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { SearchInput } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * SearchInput — debounced search box with a built-in clear button.
- * onSearch runs after a changed query settles, never on mount.
- * Always listen to onSearch (NOT onChange). Uncontrolled for local filters,
- * controlled when search state lives in a URL param. Never a raw <input>.
- * Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  const [journalQuery, setJournalQuery] = useState("");
-  const [partnerQuery, setPartnerQuery] = useState("");
-
-  const journals = [
-    { id: "JE-0001", desc: "売上計上 · 株式会社山田商事" },
-    { id: "JE-0002", desc: "仕入計上 · 有限会社田中工業" },
-    { id: "JE-0003", desc: "経費精算 · 交通費" },
-    { id: "JE-0004", desc: "売上計上 · ABC株式会社" },
-    { id: "JE-0005", desc: "給与支払 · 2024年3月分" },
-  ];
-
-  const filtered = journals.filter(
-    (j) =>
-      j.id.toLowerCase().includes(journalQuery.toLowerCase()) ||
-      j.desc.toLowerCase().includes(journalQuery.toLowerCase()),
-  );
-
-  return (
-    <PageContainer
-      title="SearchInput"
-      subtitle="デバウンス付き検索ボックス · onSearch でフィルタリングを駆動する"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>仕訳一覧フィルター（制御モード）</CardTitle>
-            <CardDescription>
-              value + onValueChange で即時制御（入力に追従）。onSearch は 250 ms
-              デバウンス後に発火。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <SearchInput
-                placeholder="仕訳ID・摘要で検索"
-                value={journalQuery}
-                onValueChange={setJournalQuery}
-                onSearch={() => {}}
-              />
-              <Flex direction="col" gap="sm">
-                {filtered.length === 0 ? (
-                  <Text as="p" tone="muted">
-                    該当なし
-                  </Text>
-                ) : (
-                  filtered.map((j) => (
-                    <Text as="p" key={j.id}>
-                      <Text tone="muted" mono>
-                        {j.id}
-                      </Text>{" "}
-                      {j.desc}
-                    </Text>
-                  ))
-                )}
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>取引先検索（非制御モード）</CardTitle>
-            <CardDescription>
-              defaultValue のみ渡して非制御。ローカルフィルターに適す。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <SearchInput
-                placeholder="取引先名で検索"
-                defaultValue=""
-                onSearch={setPartnerQuery}
-                debounce={300}
-              />
-              {partnerQuery && (
-                <Text as="p" tone="muted">
-                  検索中:{" "}
-                  <Text as="strong" weight="medium">
-                    {partnerQuery}
-                  </Text>
-                </Text>
-              )}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>カスタム ariaLabel</CardTitle>
-            <CardDescription>隣接するラベルがない場合は ariaLabel で補完する。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <SearchInput
-              id="account-code-search"
-              ariaLabel="勘定科目コード検索"
-              className="contract-search-wrapper"
-              inputClassName="contract-search-field"
-              placeholder="勘定科目コードで検索"
-              onSearch={() => {}}
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/segmented-in-filter-row.tsx

@@ -1,60 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Segmented } from "@godxjp/ui/data-entry";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * The composition a consumer actually filters a list with: a Segmented that carries a count badge
- * per option, sharing a WRAPPING flex row with the other filter controls, inside a Card.
- *
- * It is a separate frame from `segmented.tsx` because the row is the variable. `#four-with-counts`
- * over there puts the track directly in a CardContent, where it is a block box and shrinks to the
- * column; here it is a FLEX ITEM, and a flex item's `min-inline-size` defaults to `auto` — its
- * max-content width — so nothing makes it give ground to the row.
- */
-const OPTIONS = [
-  { value: "all", label: "すべて", count: 133 },
-  { value: "ginou", label: "技能実習", count: 82 },
-  { value: "tokutei", label: "特定技能", count: 51 },
-  { value: "ikusei", label: "育成就労", count: 0 },
-];
-
-export default function SegmentedInFilterRow() {
-  return (
-    <PageContainer title="Segmented in a filter row" subtitle="4 択 + 件数バッジ · Flex wrap の中">
-      <Card id="four-in-wrap-row">
-        <CardHeader>
-          <CardTitle level={2}>制度の絞り込み</CardTitle>
-          <CardDescription>
-            `check:segmented-wrap` がこのカードも測ります。トラックは行の中でも縮み、393px
-            でラベルも件数も切り詰めません。
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Flex gap="sm" align="center" wrap>
-            <Segmented aria-label="制度" defaultValue="all" options={OPTIONS} />
-            <Button variant="outline" size="sm">
-              絞り込みを解除
-            </Button>
-          </Flex>
-        </CardContent>
-      </Card>
-
-      <Card id="four-in-wrap-row-alone">
-        <CardHeader>
-          <CardTitle level={2}>同じトラック、行の中に一つだけ</CardTitle>
-          <CardDescription>
-            <Text size="sm" tone="muted">
-              兄弟が無くても行は行。フレックス項目としての縮み方を切り分けるための対照。
-            </Text>
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Flex gap="sm" align="center" wrap>
-            <Segmented aria-label="制度（単独）" defaultValue="all" options={OPTIONS} />
-          </Flex>
-        </CardContent>
-      </Card>
-    </PageContainer>
-  );
-}

package/docs/data-entry/segmented.tsx

@@ -1,300 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, Segmented, ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
-import { Button, Text, VisuallyHidden } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { CalendarDays, Columns3, LayoutList, Monitor, Moon, Sun } from "lucide-react";
-
-/**
- * Segmented — one-of-N from a small, closed, always-visible set. The enterprise Segmented drawn on Radix
- * RadioGroup: a recessed track with the chosen item as a lifted slab, radiogroup semantics, arrow
- * keys between members. The track measures exactly --control-height, so it sits level with an
- * Input or a Button on the same row.
- */
-export default function Demo() {
-  const [theme, setTheme] = useState("system");
-  const [view, setView] = useState("list");
-  const [range, setRange] = useState("week");
-
-  return (
-    <PageContainer title="Segmented" subtitle="閉じた選択肢からひとつだけ · テーマ・表示形式・期間">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ラベルのみ</CardTitle>
-            <CardDescription>
-              選択肢が 2〜4 個で、すべて画面に出せるときは Select ではなくこちら。ひとつは必ず
-              選ばれている状態なので、ToggleGroup ではなく radiogroup として読み上げられます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Segmented
-                aria-label="期間"
-                value={range}
-                onValueChange={setRange}
-                options={[
-                  { value: "day", label: "日" },
-                  { value: "week", label: "週" },
-                  { value: "month", label: "月" },
-                ]}
-              />
-              <Text size="xs" tone="muted">
-                選択中: {range}
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>アイコン付き</CardTitle>
-            <CardDescription>
-              `icon` は aria-hidden で描かれ、読み上げ名は `label` のままです。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Segmented
-                aria-label="テーマ"
-                value={theme}
-                onValueChange={setTheme}
-                options={[
-                  { value: "light", label: "ライト", icon: <Sun aria-hidden="true" /> },
-                  { value: "dark", label: "ダーク", icon: <Moon aria-hidden="true" /> },
-                  { value: "system", label: "システム", icon: <Monitor aria-hidden="true" /> },
-                ]}
-              />
-              <Segmented
-                aria-label="表示形式"
-                value={view}
-                onValueChange={setView}
-                options={[
-                  { value: "list", label: "一覧", icon: <LayoutList aria-hidden="true" /> },
-                  { value: "board", label: "ボード", icon: <Columns3 aria-hidden="true" /> },
-                  {
-                    value: "calendar",
-                    label: "カレンダー",
-                    icon: <CalendarDays aria-hidden="true" />,
-                  },
-                ]}
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card id="four-with-counts">
-          <CardHeader>
-            <CardTitle level={2}>4 択 + 件数（スマホ幅では折り返す）</CardTitle>
-            <CardDescription>
-              一覧の上の状態フィルター。4 つが 1 行に収まらない幅では、トラックが 2 行目に折り返し
-              ます。ラベルも件数も切り詰めません。`check:segmented-wrap` がこのカードを測ります。
-              件数は Tabs と同じ扱いで、選択中の項目だけ強調し、ほかは控えめな色です。0 件を隠す
-              ときは `showZero: false`。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Segmented
-              aria-label="状態"
-              defaultValue="all"
-              options={[
-                { value: "all", label: "すべて", count: 128 },
-                { value: "active", label: "実習中", count: 96 },
-                { value: "pending", label: "申請中", count: 12 },
-                { value: "gone", label: "失踪・帰国", count: 0 },
-              ]}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>size · vertical · block</CardTitle>
-            <CardDescription>
-              size は 4 段（xs 24px / sm 28px / md 32px / lg 36px）。トラックの高さは
-              --control-height そのもので、MobileShell のようにその変数をスコープする領域では
-              自動的にタッチ段（44px）になります。vertical では 1 行ぶんが 1
-              コントロールの高さになります。横 1 行のときだけトラック
-              内側の余白を引くので、積んだときは引きません。block は幅いっぱいに広げます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md" align="start">
-              <Segmented
-                aria-label="サイズ xs"
-                size="xs"
-                defaultValue="a"
-                options={[
-                  { value: "a", label: "小" },
-                  { value: "b", label: "中" },
-                  { value: "c", label: "大" },
-                ]}
-              />
-              <Segmented
-                aria-label="サイズ sm"
-                size="sm"
-                defaultValue="a"
-                options={[
-                  { value: "a", label: "小" },
-                  { value: "b", label: "中" },
-                  { value: "c", label: "大" },
-                ]}
-              />
-              <Segmented
-                aria-label="サイズ md"
-                defaultValue="b"
-                options={[
-                  { value: "a", label: "小" },
-                  { value: "b", label: "中" },
-                  { value: "c", label: "大" },
-                ]}
-              />
-              <Segmented
-                aria-label="サイズ lg"
-                size="lg"
-                defaultValue="c"
-                options={[
-                  { value: "a", label: "小" },
-                  { value: "b", label: "中" },
-                  { value: "c", label: "大" },
-                ]}
-              />
-              <Segmented
-                aria-label="縦積み"
-                vertical
-                block
-                defaultValue="ok"
-                options={[
-                  { value: "ok", label: "実施" },
-                  { value: "warn", label: "要改善" },
-                  { value: "none", label: "未実施" },
-                ]}
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>24px の密な行 · size=&quot;xs&quot;</CardTitle>
-            <CardDescription>
-              行の高さが 24px に決まっている監査ログや明細ツールバーでは、xs
-              のトラックがそのまま収まる。同じ段の ToggleGroup size=&quot;xs&quot; と Button
-              size=&quot;xs&quot; と高さが一致するので、行が段差にならない。ここで xs
-              が無かったころは Button を並べて自作するしかなく、radiogroup
-              の読み上げも矢印キーも失われていた。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Flex direction="row" gap="sm" align="center">
-                <Segmented
-                  aria-label="表示期間"
-                  size="xs"
-                  defaultValue="week"
-                  options={[
-                    { value: "day", label: "日" },
-                    { value: "week", label: "週" },
-                    { value: "month", label: "月" },
-                  ]}
-                />
-                <ToggleGroup type="single" size="xs" defaultValue="list" aria-label="表示形式">
-                  <ToggleGroupItem value="list">一覧</ToggleGroupItem>
-                  <ToggleGroupItem value="board">ボード</ToggleGroupItem>
-                </ToggleGroup>
-                <Button size="xs" variant="outline">
-                  絞り込み
-                </Button>
-              </Flex>
-              <Text as="p" size="xs" tone="muted">
-                いずれも --control-height-xs（24px）。
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>短い記号を出して、長い名前を読ませる</CardTitle>
-            <CardDescription>
-              `label` は ReactNode なので、見える記号を aria-hidden にして VisuallyHidden に
-              読み上げ名を置けます。専用の prop は要りません。○ と読み上げられても意味が伝わらない
-              ため、色や記号だけに意味を持たせないという WCAG 1.4.1 の要求そのものです。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Segmented
-              aria-label="監査結果"
-              defaultValue="ok"
-              options={[
-                {
-                  value: "ok",
-                  label: (
-                    <>
-                      <span aria-hidden="true">○</span>
-                      <VisuallyHidden>実施</VisuallyHidden>
-                    </>
-                  ),
-                },
-                {
-                  value: "warn",
-                  label: (
-                    <>
-                      <span aria-hidden="true">△</span>
-                      <VisuallyHidden>要改善</VisuallyHidden>
-                    </>
-                  ),
-                },
-                {
-                  value: "none",
-                  label: (
-                    <>
-                      <span aria-hidden="true">×</span>
-                      <VisuallyHidden>未実施</VisuallyHidden>
-                    </>
-                  ),
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>フォームの中で</CardTitle>
-            <CardDescription>
-              `name` を渡すとネイティブフォームで送信されます。無効化は選択肢ごとにも、グループ
-              全体にもかけられます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField id="segmented-plan" label="プラン">
-                <Segmented
-                  id="segmented-plan"
-                  name="plan"
-                  defaultValue="standard"
-                  options={[
-                    { value: "light", label: "ライト" },
-                    { value: "standard", label: "スタンダード" },
-                    { value: "enterprise", label: "エンタープライズ", disabled: true },
-                  ]}
-                />
-              </FormField>
-              <Segmented
-                aria-label="無効化されたグループ"
-                defaultValue="a"
-                disabled
-                options={[
-                  { value: "a", label: "A" },
-                  { value: "b", label: "B" },
-                ]}
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/select-async-contracts.tsx

@@ -1,108 +0,0 @@
-import { useState } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, Select } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-const countries = [
-  { value: "jp", label: "日本", sublabel: "Japan" },
-  { value: "vn", label: "Việt Nam", sublabel: "Vietnam" },
-];
-
-export default function Demo() {
-  const [attempt, setAttempt] = useState(0);
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState("");
-
-  return (
-    <PageContainer
-      title="Select async contracts"
-      subtitle="Retry · load more · controlled state · read-only"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Explicit retry action</CardTitle>
-            <CardDescription>
-              A rejected loader exposes a keyboard-focusable retry action.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="retry-country" label="Country">
-              <Select
-                id="retry-country"
-                errorMessage="国を読み込めませんでした"
-                loadOptions={async () => {
-                  if (attempt === 0) {
-                    setAttempt(1);
-                    throw new Error("offline");
-                  }
-                  return { options: countries };
-                }}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Keyboard load more</CardTitle>
-            <CardDescription>
-              Infinite scroll also exposes a normal button for keyboard and switch users.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Select
-              aria-label="Paged country"
-              loadOptions={async ({ page }) => ({
-                options: [countries[(page - 1) % countries.length]],
-                hasMore: page === 1,
-              })}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Controlled popup + search</CardTitle>
-            <CardDescription>
-              Parent state can synchronize deep links, dialogs, and external filter controls.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Select
-              aria-label="Controlled country"
-              showSearch
-              options={countries}
-              open={open}
-              onOpenChange={setOpen}
-              search={search}
-              onSearchChange={setSearch}
-              filterOption={(option, query) =>
-                option.sublabel?.toLowerCase().includes(query.toLowerCase()) ?? false
-              }
-              size="sm"
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Read-only value</CardTitle>
-            <CardDescription>
-              Users may inspect options but cannot change or clear the committed value.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Select
-              aria-label="Locked country"
-              showSearch
-              options={countries}
-              defaultValue="jp"
-              readOnly
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}