@godxjp/ui 19.0.0 → 19.2.0

package/docs/data-entry/command.tsx

@@ -0,0 +1,262 @@
+import { useEffect, useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@godxjp/ui/data-entry";
+import { Skeleton } from "@godxjp/ui/feedback";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Command — キーボードナビゲーション対応のコマンドパレット。
+ * 必ずツリー構造を守る: Command > CommandInput + CommandList > CommandGroup > CommandItem。
+ * CommandItem は必ず CommandList の内側に配置する。
+ * CommandEmpty は CommandList の内側に置くと自動で表示/非表示が切り替わる。
+ * Composed only from real @godxjp/ui components.
+ */
+
+type Suggestion = { value: string; label: string };
+
+const VENDOR_DIRECTORY: Suggestion[] = [
+  { value: "v-001", label: "株式会社山田商事" },
+  { value: "v-002", label: "山下電機株式会社" },
+  { value: "v-003", label: "やまと運輸サービス" },
+  { value: "v-004", label: "佐藤工業株式会社" },
+  { value: "v-005", label: "田中物産" },
+];
+
+export default function Demo() {
+  // Card 1: grouped quick-select. Controlled `value` pre-highlights an item so the
+  // [aria-selected=true] accent is visible at rest, without keyboard interaction.
+  const [account, setAccount] = useState<string>("1020");
+
+  // Card 2: action palette — its own independent state (Rule #6).
+  const [action, setAction] = useState<string>("");
+
+  // Card 3: async server-side search. `shouldFilter={false}` + controlled input +
+  // an externally-fetched result list, staged mid-flight so the loading row renders.
+  const [query, setQuery] = useState<string>("やま");
+  const [loading, setLoading] = useState<boolean>(true);
+  const [results, setResults] = useState<Suggestion[]>([]);
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    // Simulated server round-trip; the delay keeps the loading state observable at rest.
+    const timer = setTimeout(() => {
+      if (!active) return;
+      const q = query.trim();
+      setResults(q ? VENDOR_DIRECTORY.filter((v) => v.label.includes(q)) : []);
+      setLoading(false);
+    }, 1500);
+    return () => {
+      active = false;
+      clearTimeout(timer);
+    };
+  }, [query]);
+
+  return (
+    <PageContainer
+      title="Command"
+      subtitle="コマンドパレット / キーボードナビゲーション · cmdk ベース"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>勘定科目クイック選択</CardTitle>
+            <CardDescription>
+              グループ化された科目リストをキーボードで素早く選択。 ハイライト中の科目を value
+              で制御（現在: {account || "未選択"}）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Command label="勘定科目クイック選択" loop value={account} onValueChange={setAccount}>
+              <CommandInput placeholder="科目名・コードで検索..." />
+              <CommandList>
+                <CommandEmpty>該当する科目がありません。</CommandEmpty>
+                <CommandGroup heading="資産">
+                  <CommandItem value="1010" onSelect={setAccount}>
+                    1010 · 現金
+                  </CommandItem>
+                  <CommandItem value="1020" onSelect={setAccount}>
+                    1020 · 普通預金
+                  </CommandItem>
+                  <CommandItem value="1030" onSelect={setAccount}>
+                    1030 · 売掛金
+                  </CommandItem>
+                  <CommandItem value="1040" onSelect={setAccount}>
+                    1040 · 前払費用
+                  </CommandItem>
+                </CommandGroup>
+                <CommandGroup heading="負債">
+                  <CommandItem value="2010" onSelect={setAccount}>
+                    2010 · 買掛金
+                  </CommandItem>
+                  <CommandItem value="2020" onSelect={setAccount}>
+                    2020 · 未払費用
+                  </CommandItem>
+                  <CommandItem value="2030" onSelect={setAccount} disabled>
+                    2030 · 廃止済科目（選択不可）
+                  </CommandItem>
+                </CommandGroup>
+                <CommandGroup heading="収益">
+                  <CommandItem value="4010" onSelect={setAccount}>
+                    4010 · 売上高
+                  </CommandItem>
+                  <CommandItem value="4020" onSelect={setAccount}>
+                    4020 · 受取利息
+                  </CommandItem>
+                </CommandGroup>
+                <CommandGroup heading="費用">
+                  <CommandItem value="5010" onSelect={setAccount}>
+                    5010 · 売上原価
+                  </CommandItem>
+                  <CommandItem value="5020" onSelect={setAccount}>
+                    5020 · 給料手当
+                  </CommandItem>
+                  <CommandItem value="5030" onSelect={setAccount}>
+                    5030 · 旅費交通費
+                  </CommandItem>
+                  <CommandItem value="5040" onSelect={setAccount}>
+                    5040 · 通信費
+                  </CommandItem>
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>勤怠アクションパレット（Cmd+K 想定）</CardTitle>
+            <CardDescription>
+              ページ横断のクイックアクション。キーワードで絞り込み、Enter で実行。 実行:{" "}
+              {action || "なし"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Command label="アクションパレット" loop vimBindings={false}>
+              <CommandInput placeholder="アクションを検索..." />
+              <CommandList>
+                <CommandEmpty>一致するアクションがありません。</CommandEmpty>
+                <CommandGroup heading="打刻">
+                  <CommandItem
+                    value="clock-in"
+                    keywords={["出勤", "打刻", "開始"]}
+                    onSelect={setAction}
+                  >
+                    出勤打刻
+                  </CommandItem>
+                  <CommandItem
+                    value="clock-out"
+                    keywords={["退勤", "打刻", "終了"]}
+                    onSelect={setAction}
+                  >
+                    退勤打刻
+                  </CommandItem>
+                  <CommandItem value="break-start" keywords={["休憩", "開始"]} onSelect={setAction}>
+                    休憩開始
+                  </CommandItem>
+                </CommandGroup>
+                <CommandGroup heading="申請">
+                  <CommandItem
+                    value="apply-leave"
+                    keywords={["有給", "休暇", "申請"]}
+                    onSelect={setAction}
+                  >
+                    有給休暇申請
+                  </CommandItem>
+                  <CommandItem
+                    value="apply-overtime"
+                    keywords={["残業", "時間外", "申請"]}
+                    onSelect={setAction}
+                  >
+                    時間外勤務申請
+                  </CommandItem>
+                  <CommandItem
+                    value="apply-remote"
+                    keywords={["テレワーク", "在宅", "リモート", "申請"]}
+                    onSelect={setAction}
+                  >
+                    テレワーク申請
+                  </CommandItem>
+                </CommandGroup>
+                <CommandGroup heading="ナビゲーション">
+                  <CommandItem
+                    value="nav-dashboard"
+                    keywords={["ダッシュボード", "トップ", "ホーム"]}
+                    onSelect={setAction}
+                  >
+                    ダッシュボードへ移動
+                  </CommandItem>
+                  <CommandItem
+                    value="nav-attendance"
+                    keywords={["勤怠", "一覧", "確認"]}
+                    onSelect={setAction}
+                  >
+                    勤怠一覧へ移動
+                  </CommandItem>
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>取引先サーバー検索（非同期）</CardTitle>
+            <CardDescription>
+              shouldFilter={"{false}"} で内蔵フィルタを無効化し、入力値（value /
+              onValueChange）でサーバー検索した結果だけを表示。 取得中はローディング行、0 件は
+              CommandEmpty を表示。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Command label="取引先サーバー検索" loop shouldFilter={false}>
+              <CommandInput
+                placeholder="取引先名で検索..."
+                value={query}
+                onValueChange={setQuery}
+              />
+              <CommandList aria-busy={loading}>
+                {loading ? (
+                  <Flex
+                    direction="col"
+                    gap="sm"
+                    className="ui-command-group"
+                    role="option"
+                    aria-disabled="true"
+                    aria-label="読み込み中"
+                    aria-live="polite"
+                  >
+                    <Skeleton className="h-8 w-full" />
+                    <Skeleton className="h-8 w-full" />
+                    <Skeleton className="h-8 w-full" />
+                  </Flex>
+                ) : (
+                  <>
+                    <CommandEmpty>該当する取引先が見つかりません。</CommandEmpty>
+                    {results.length > 0 ? (
+                      <CommandGroup heading="検索結果">
+                        {results.map((v) => (
+                          <CommandItem key={v.value} value={v.value} onSelect={() => undefined}>
+                            {v.label}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    ) : null}
+                  </>
+                )}
+              </CommandList>
+            </Command>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/country-picker-recipe.tsx

@@ -0,0 +1,170 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, Select } from "@godxjp/ui/data-entry";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import type { SelectLoadParams, SelectLoadResult, SelectOption } from "@godxjp/ui/data-entry";
+
+/**
+ * Country picker — a RECIPE, not a component. There is no CountrySelect in @godxjp/ui:
+ * a country picker is just a data-driven `Select`. The INTERNATIONAL-STANDARD way to build it:
+ *   - values are ISO 3166-1 alpha-2 codes (you keep only the code array);
+ *   - labels are derived at render time from CLDR via `Intl.DisplayNames(locale, {type:"region"})`,
+ *     so they are correct AND localized — never hardcode country names per language;
+ *   - do NOT use emoji regional-indicator flags (🇯🇵): they do not render on Windows / many Linux.
+ *     If you want flags, ship an SVG set and draw it via `renderOption`.
+ * showSearch filters a short bundled list; loadOptions scales to a long remote list (server search +
+ * pagination), with selectedLabel covering a value whose option page hasn't loaded yet. name= submits
+ * the ISO code with the form. Real @godxjp/ui only.
+ */
+
+// You bundle the ISO 3166-1 alpha-2 codes you support (there is no Intl enumerator for "all regions").
+const COUNTRY_CODES = ["JP", "CN", "KR", "VN", "SG", "US", "GB", "DE", "FR", "AU"] as const;
+
+const REGION_GROUP: Record<string, string> = {
+  JP: "アジア",
+  CN: "アジア",
+  KR: "アジア",
+  VN: "アジア",
+  SG: "アジア",
+  GB: "ヨーロッパ",
+  DE: "ヨーロッパ",
+  FR: "ヨーロッパ",
+  US: "その他",
+  AU: "その他",
+};
+
+// Localized display names come from CLDR. In a real app pass the active locale (e.g. from
+// useAppContext().locale); here we render Japanese names to match the surrounding demo.
+const regionNames = new Intl.DisplayNames(["ja"], { type: "region" });
+
+const COUNTRIES: SelectOption[] = COUNTRY_CODES.map((code) => ({
+  value: code,
+  label: regionNames.of(code) ?? code,
+  group: REGION_GROUP[code],
+}));
+
+// A real picker over every country uses loadOptions: the server filters + paginates, the client
+// never bundles the full list. We simulate latency so fetching/empty states are real, and filter
+// the bundled set by localized name OR ISO code (server-side in production).
+async function loadCountries({ query }: SelectLoadParams): Promise<SelectLoadResult> {
+  await new Promise((resolve) => setTimeout(resolve, 600));
+  const needle = query.trim().toLowerCase();
+  const options = needle
+    ? COUNTRIES.filter(
+        (c) => c.label.toLowerCase().includes(needle) || c.value.toLowerCase().includes(needle),
+      )
+    : COUNTRIES;
+  return { options, hasMore: false };
+}
+
+// renderOption draws an ISO-code chip + CLDR name. NOT an emoji flag (broken on Windows/Linux); a
+// real product ships an SVG flag set and renders it here. Tokens only — no hex, no inline style.
+function renderCountry(option: SelectOption) {
+  return (
+    <span className="flex items-center gap-2">
+      <Text size="xs" tone="muted" mono className="bg-muted rounded px-1.5 py-0.5">
+        {option.value}
+      </Text>
+      <Text truncate>{option.label}</Text>
+    </span>
+  );
+}
+
+export default function Demo() {
+  const [billing, setBilling] = useState("JP");
+  const [partner, setPartner] = useState("");
+  const [residence, setResidence] = useState("VN");
+
+  return (
+    <PageContainer
+      title="Country picker (recipe)"
+      subtitle="国選択は Select のレシピ · 専用コンポーネントは無い（値は ISO コード、名称は CLDR）"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>請求先の国（必須・日本デフォルト・クリア不可）</CardTitle>
+            <CardDescription>
+              value は ISO 3166-1 alpha-2 コード、ラベルは
+              Intl.DisplayNames（CLDR）で生成する（国名を
+              ハードコードしない・絵文字フラグも使わない）。 showSearch で絞り込み、name
+              でフォーム送信。 必須項目なので clearable=false でクリア行を出さない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="billing-country" label="請求先の国" required>
+              <Select
+                id="billing-country"
+                name="billingCountry"
+                value={billing}
+                onValueChange={setBilling}
+                showSearch
+                clearable={false}
+                searchPlaceholder="国名 / ISO コードで検索..."
+                emptyMessage="該当する国がありません"
+                options={COUNTRIES}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>取引先の国（任意・クリア可）</CardTitle>
+            <CardDescription>
+              clearable（デフォルト true）で「指定なし」に戻せる。placeholder で空状態を案内する。
+              任意項目なので未選択（プレースホルダー表示）を初期値にしている。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="partner-country" label="取引先の国">
+              <Select
+                id="partner-country"
+                name="partnerCountry"
+                value={partner}
+                onValueChange={setPartner}
+                showSearch
+                placeholder="国を選択..."
+                searchPlaceholder="国名 / ISO コードで検索..."
+                emptyMessage="該当する国がありません"
+                options={COUNTRIES}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>居住国（loadOptions・遠隔リスト・SVG フラグ枠）</CardTitle>
+            <CardDescription>
+              全世界の長いリストは options を同梱せず loadOptions でサーバー検索＋ページングする。
+              読み込み中は loadingMessage、0 件は emptyMessage を出す。selectedLabel は値の option
+              が まだ読み込まれていないときの表示名。renderOption で ISO
+              コードチップ＋国名を描画（絵文字 フラグは使わず、実運用では SVG フラグを差し込む）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="residence-country" label="居住国">
+              <Select
+                id="residence-country"
+                name="residenceCountry"
+                value={residence}
+                onValueChange={setResidence}
+                showSearch
+                loadOptions={loadCountries}
+                renderOption={renderCountry}
+                selectedLabel={regionNames.of(residence) ?? residence}
+                placeholder="国を選択..."
+                searchPlaceholder="国名 / ISO コードで検索..."
+                loadingMessage="国を読み込み中..."
+                emptyMessage="該当する国がありません"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/date-picker.tsx

@@ -0,0 +1,191 @@
+import { useState } from "react";
+import { ja } from "date-fns/locale";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { DatePicker, FormField } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * DatePicker — WAI-ARIA date combobox with a real typeable ISO-8601 input.
+ * Always give it a `name` for form submission. Use `fromDate`/`toDate` to
+ * constrain the selectable range. Never hand-roll a date input + calendar.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [issueDate, setIssueDate] = useState<Date | undefined>(new Date(2026, 0, 15));
+  const [dueDate, setDueDate] = useState<Date | undefined>(undefined);
+  const [closingDate, setClosingDate] = useState<Date | undefined>(undefined);
+  const [meetingDate, setMeetingDate] = useState<Date | undefined>(new Date(2026, 5, 25));
+  const [settlementDate, setSettlementDate] = useState<Date | undefined>(undefined);
+
+  return (
+    <PageContainer
+      title="DatePicker"
+      subtitle="日付入力 · ISO-8601 タイプ入力 + カレンダーポップオーバー"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>基本 (controlled)</CardTitle>
+            <CardDescription>
+              value + onValueChange で制御。name= を指定すると ISO yyyy-MM-dd でフォーム送信される。
+              入力欄に直接タイプでき、カレンダーと同期。フォーカスを外すと正規の ISO
+              形式に整形され、 解釈できない入力は元の値へ復帰する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="issue-date" label="発行日" required>
+              <DatePicker
+                id="issue-date"
+                name="issue_date"
+                value={issueDate}
+                onValueChange={setIssueDate}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>fromDate で過去日を無効化</CardTitle>
+            <CardDescription>
+              支払期限など、今日以降しか選べない場合に fromDate=&#123;new Date(2026, 0, 1)&#125;
+              で制限。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="due-date" label="支払期限">
+              <DatePicker
+                id="due-date"
+                name="due_date"
+                value={dueDate}
+                onValueChange={setDueDate}
+                fromDate={new Date(2026, 0, 1)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>fromDate + toDate で範囲を制限</CardTitle>
+            <CardDescription>決算締め日など、選択可能期間を会計年度内に絞る場合。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="closing-date" label="締め日">
+              <DatePicker
+                id="closing-date"
+                name="closing_date"
+                value={closingDate}
+                onValueChange={setClosingDate}
+                fromDate={new Date(2026, 3, 1)}
+                toDate={new Date(2027, 2, 31)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>disabled 状態</CardTitle>
+            <CardDescription>確定済み伝票など編集不可フィールドに使用。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="posted-date" label="転記日">
+              <DatePicker
+                id="posted-date"
+                name="posted_date"
+                value={new Date(2026, 2, 31)}
+                disabled
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>defaultValue (uncontrolled)</CardTitle>
+            <CardDescription>
+              value/onValueChange を渡さず defaultValue で初期値だけ与える非制御モード。状態は
+              コンポーネント内部で保持され、name= でそのままフォーム送信できる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="entry-date" label="起票日">
+              <DatePicker id="entry-date" name="entry_date" defaultValue={new Date(2026, 0, 31)} />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>locale で暦の言語を切替</CardTitle>
+            <CardDescription>
+              locale={"{ja}"} を渡すとカレンダーの曜日・月名が日本語表示になる。値は ISO-8601
+              のまま不変で、表示のみ各 locale に追従する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="meeting-date" label="取締役会開催日">
+              <DatePicker
+                id="meeting-date"
+                name="meeting_date"
+                value={meetingDate}
+                onValueChange={setMeetingDate}
+                locale={ja}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>error 状態 (aria-invalid)</CardTitle>
+            <CardDescription>
+              FormField の error= を指定すると aria-invalid と role=&quot;alert&quot;
+              のエラーメッセージが付与される。必須日付の未入力や範囲外選択の検証結果を提示する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="settlement-date"
+              label="決算日"
+              required
+              error="決算日は会計年度内の日付を入力してください。"
+            >
+              <DatePicker
+                id="settlement-date"
+                name="settlement_date"
+                value={settlementDate}
+                onValueChange={setSettlementDate}
+                fromDate={new Date(2026, 3, 1)}
+                toDate={new Date(2027, 2, 31)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>フッター操作 (showToday / showClose)</CardTitle>
+            <CardDescription>
+              showToday は今日を選択して閉じる。showClose は選択せずに閉じる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="visit-date" label="来訪日">
+              <DatePicker
+                id="visit-date"
+                name="visit_date"
+                value={meetingDate}
+                onValueChange={setMeetingDate}
+                showToday
+                showClose
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}