@godxjp/ui 19.0.0 → 19.2.0

package/docs/data-entry/checkbox.tsx

@@ -0,0 +1,256 @@
+import { useState } from "react";
+
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Checkbox, CheckboxGroup, Field, FormField } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const ALL_SCOPES = ["read", "write", "delete"];
+
+/**
+ * Checkbox — a single boolean (wrap in Field for a labelled row) or a
+ * CheckboxGroup from an options array. Composed only from real @godxjp/ui
+ * components.
+ */
+export default function Demo() {
+  // Controlled CheckboxGroup — selection is surfaced at rest below the group.
+  const [channels, setChannels] = useState<string[]>(["email", "sms"]);
+
+  // Indeterminate "select all" — parent reflects the children's mixed state.
+  const [scopes, setScopes] = useState<string[]>(["read"]);
+  const allChecked = scopes.length === ALL_SCOPES.length;
+  const someChecked = scopes.length > 0 && !allChecked;
+  const toggleScope = (scope: string) =>
+    setScopes((prev) =>
+      prev.includes(scope) ? prev.filter((s) => s !== scope) : [...prev, scope],
+    );
+
+  return (
+    <PageContainer
+      title="Checkbox"
+      subtitle="Single checkbox (in Field) or a CheckboxGroup from options"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Single · labelled with Field</CardTitle>
+            <CardDescription>
+              Field pairs the control with a label + optional description. The last row is disabled.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Field id="agree" label="利用規約に同意する" description="続行するには同意が必要です">
+                <Checkbox id="agree" defaultChecked />
+              </Field>
+              <Field id="news" label="お知らせを受け取る">
+                <Checkbox id="news" />
+              </Field>
+              <Field id="locked" label="管理者ロック" description="権限がないため変更できません">
+                <Checkbox id="locked" defaultChecked disabled />
+              </Field>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Required and explicit indeterminate defaults</CardTitle>
+            <CardDescription>
+              Required form semantics and both controlled/default indeterminate values are visible.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Field id="required-checkbox" label="必須確認">
+                <Checkbox id="required-checkbox" required defaultChecked={false} />
+              </Field>
+              <Field id="default-indeterminate" label="初期混在">
+                <Checkbox id="default-indeterminate" defaultChecked="indeterminate" />
+              </Field>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>CheckboxGroup custom children</CardTitle>
+            <CardDescription>
+              Children composition and className are explicit public contracts.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CheckboxGroup className="contract-checkbox-children">
+              <Field id="custom-child-checkbox" label="カスタム子要素">
+                <Checkbox id="custom-child-checkbox" value="custom" />
+              </Field>
+            </CheckboxGroup>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Indeterminate · select all</CardTitle>
+            <CardDescription>
+              The parent uses checked=&quot;indeterminate&quot; when only some children are selected
+              (children composed from explicit Field + Checkbox).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Field id="scope-all" label="すべての権限">
+                <Checkbox
+                  id="scope-all"
+                  checked={allChecked ? true : someChecked ? "indeterminate" : false}
+                  onCheckedChange={(next) => setScopes(next === true ? ALL_SCOPES : [])}
+                />
+              </Field>
+              <Flex direction="col" gap="sm" className="ps-6">
+                <Field id="scope-read" label="閲覧">
+                  <Checkbox
+                    id="scope-read"
+                    value="read"
+                    checked={scopes.includes("read")}
+                    onCheckedChange={() => toggleScope("read")}
+                  />
+                </Field>
+                <Field id="scope-write" label="編集">
+                  <Checkbox
+                    id="scope-write"
+                    value="write"
+                    checked={scopes.includes("write")}
+                    onCheckedChange={() => toggleScope("write")}
+                  />
+                </Field>
+                <Field id="scope-delete" label="削除">
+                  <Checkbox
+                    id="scope-delete"
+                    value="delete"
+                    checked={scopes.includes("delete")}
+                    onCheckedChange={() => toggleScope("delete")}
+                  />
+                </Field>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Error · invalid in a FormField</CardTitle>
+            <CardDescription>
+              FormField wires aria-invalid + the error message onto the control (role=alert).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="terms" label="利用規約に同意する" error="同意が必要です">
+              <Checkbox id="terms" />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>CheckboxGroup (options)</CardTitle>
+            <CardDescription>
+              Multi-select from a data-driven options array, with per-option description and
+              disabled.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CheckboxGroup
+              name="export"
+              defaultValue={["pdf"]}
+              options={[
+                { value: "pdf", label: "PDF 出力", description: "印刷向けのレイアウト" },
+                { value: "csv", label: "CSV 出力", description: "表計算ソフトで開けます" },
+                {
+                  value: "mail",
+                  label: "メール送信",
+                  disabled: true,
+                  description: "送信先が未設定です",
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Horizontal orientation</CardTitle>
+            <CardDescription>
+              orientation=&quot;horizontal&quot; lays the options out in a wrapping row.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CheckboxGroup
+              defaultValue={["mon", "wed", "fri"]}
+              orientation="horizontal"
+              options={[
+                { value: "mon", label: "月" },
+                { value: "tue", label: "火" },
+                { value: "wed", label: "水" },
+                { value: "thu", label: "木" },
+                { value: "fri", label: "金" },
+                { value: "sat", label: "土" },
+                { value: "sun", label: "日" },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Controlled value</CardTitle>
+            <CardDescription>
+              value + onValueChange own the selection; it is surfaced below the group.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <CheckboxGroup
+                value={channels}
+                onValueChange={setChannels}
+                options={[
+                  { value: "email", label: "メール" },
+                  { value: "sms", label: "SMS" },
+                  { value: "push", label: "プッシュ通知" },
+                ]}
+              />
+              <Flex gap="sm" wrap>
+                {channels.length === 0 ? (
+                  <Badge variant="secondary">未選択</Badge>
+                ) : (
+                  channels.map((c) => <Badge key={c}>{c}</Badge>)
+                )}
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Disabled group</CardTitle>
+            <CardDescription>disabled on the group disables every option at once.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CheckboxGroup
+              disabled
+              defaultValue={["auto"]}
+              options={[
+                { value: "auto", label: "自動承認" },
+                { value: "manual", label: "手動承認" },
+              ]}
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

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

@@ -0,0 +1,117 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { ColorPicker, FormField } from "@godxjp/ui/data-entry";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * ColorPicker — hex color swatch + optional editable hex input.
+ * Always initialize state to a valid 3- or 6-digit hex string.
+ * Use controlled mode (value + onValueChange); no uncontrolled path.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [brandColor, setBrandColor] = useState("#2563eb");
+  const [accentColor, setAccentColor] = useState("#16a34a");
+  const [categoryColor, setCategoryColor] = useState("#dc2626");
+  const [validatedColor, setValidatedColor] = useState("#9333ea");
+
+  return (
+    <PageContainer title="ColorPicker" subtitle="カラーピッカー · スウォッチ＋Hex入力">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ブランドカラー設定</CardTitle>
+            <CardDescription>
+              FormField と組み合わせてラベル・バリデーションを付与。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="brand-color" label="ブランドカラー">
+              <ColorPicker id="brand-color" value={brandColor} onValueChange={setBrandColor} />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>アクセントカラー（Hex入力付き）</CardTitle>
+            <CardDescription>
+              showHexInput={"{true}"} — デフォルト。Hex 文字列を直接編集可能。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="accent-color" label="アクセントカラー" helper="請求書のテーマカラー">
+              <ColorPicker
+                id="accent-color"
+                value={accentColor}
+                onValueChange={setAccentColor}
+                showHexInput
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>勘定科目カテゴリカラー（スウォッチのみ）</CardTitle>
+            <CardDescription>
+              showHexInput={"{false}"} — テーブルセルやサイドバーのコンパクト表示向け。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="category-color" label="カテゴリカラー">
+              <Flex direction="row" gap="md" className="items-center">
+                <ColorPicker
+                  id="category-color"
+                  value={categoryColor}
+                  onValueChange={setCategoryColor}
+                  showHexInput={false}
+                />
+                <Text tone="muted">選択中: {categoryColor}</Text>
+              </Flex>
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Hex バリデーションと確定動作</CardTitle>
+            <CardDescription>
+              Hex 入力は blur または Enter で確定。確定時に #RGB / #RRGGBB
+              形式でなければ、直前の有効な値へ自動的に巻き戻る。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="validated-color"
+              label="ラベルカラー"
+              helper="例えば「zzz」と入力して Enter を押すと、入力は破棄され #9333EA に戻る。"
+            >
+              <ColorPicker
+                id="validated-color"
+                value={validatedColor}
+                onValueChange={setValidatedColor}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>無効状態</CardTitle>
+            <CardDescription>
+              disabled · スウォッチと Hex 入力の両方が無効化される。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="disabled-color" label="テーマカラー">
+              <ColorPicker id="disabled-color" value="#6b7280" disabled />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/command-palette.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useRef, useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  CommandPalette,
+  type CommandPaletteItem,
+  type CommandPaletteLabels,
+} from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const labels: CommandPaletteLabels = {
+  open: "画面を検索",
+  title: "コマンドパレット",
+  description: "移動先または実行する操作を検索します。",
+  placeholder: "画面や操作を検索…",
+  empty: "一致する項目はありません。",
+  loading: "候補を読み込み中…",
+  move: "移動",
+  select: "開く",
+  close: "閉じる",
+};
+
+const groups = [
+  {
+    id: "screens",
+    label: "画面",
+    items: [
+      { id: "dashboard", label: "ダッシュボード", meta: "/dashboard" },
+      { id: "members", label: "メンバー管理", meta: "/organization/members" },
+      {
+        id: "billing",
+        label: "請求とサブスクリプション",
+        meta: "権限が必要",
+        disabled: true,
+      },
+    ],
+  },
+  {
+    id: "actions",
+    label: "操作",
+    items: [{ id: "invite", label: "メンバーを招待", meta: "⌘ I" }],
+  },
+];
+
+const directory = [
+  { id: "tanaka", label: "田中 太郎", meta: "経理部" },
+  { id: "suzuki", label: "鈴木 花子", meta: "情報システム部" },
+  { id: "sato", label: "佐藤 健", meta: "営業部" },
+  { id: "takahashi", label: "高橋 美咲", meta: "人事部" },
+];
+
+const serverLabels: CommandPaletteLabels = {
+  ...labels,
+  open: "メンバーを検索",
+  title: "メンバー検索",
+  description: "サーバー検索で該当するメンバーを表示します。",
+  placeholder: "氏名または部署で検索…",
+  empty: "該当するメンバーはいません。",
+  loading: "検索中…",
+};
+
+/**
+ * Server-backed search-as-you-type. The consumer owns the query (`onSearchChange`) and the result
+ * set, so `shouldFilter={false}` stops the palette from scoring the same rows a second time — and
+ * with it off the palette derives the empty node from `groups`, never from cmdk's scheduled count.
+ * `loading` is held for the whole in-flight window: a request that has not answered is not an
+ * empty result, so "該当なし" can only appear on a query the server actually answered.
+ */
+function ServerSearchDemo() {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState(directory);
+  const [loading, setLoading] = useState(false);
+  const requestRef = useRef(0);
+
+  useEffect(() => {
+    const request = (requestRef.current += 1);
+    setLoading(true);
+    const timer = setTimeout(() => {
+      if (request !== requestRef.current) return;
+      const trimmed = query.trim();
+      setResults(
+        trimmed === ""
+          ? directory
+          : directory.filter((entry) => `${entry.label}${entry.meta}`.includes(trimmed)),
+      );
+      setLoading(false);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  return (
+    <Flex direction="col" gap="md">
+      <CommandPalette
+        shouldFilter={false}
+        search={query}
+        onSearchChange={setQuery}
+        loading={loading}
+        groups={[{ id: "members", label: "メンバー", items: results }]}
+        labels={serverLabels}
+        onSelect={(item) => setQuery(String(item.label))}
+      />
+      <Text size="sm" tone="muted" aria-live="polite">
+        {`クエリ: ${query === "" ? "(未入力)" : query} · 結果 ${results.length} 件`}
+      </Text>
+    </Flex>
+  );
+}
+
+/**
+ * CommandPalette — searchable keyboard navigation with controlled async/error states and a durable
+ * selected-item readout. Press Command/Ctrl+K or use the trigger.
+ */
+export default function Demo() {
+  const [selected, setSelected] = useState<CommandPaletteItem | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>();
+
+  return (
+    <PageContainer title="CommandPalette" subtitle="キーボード検索 · 選択 · loading/error recovery">
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>組織コンソールの移動先</CardTitle>
+          <CardDescription>
+            Command/Ctrl+K で開き、矢印キーで移動し、Enter で選択します。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex direction="col" gap="md">
+            <CommandPalette
+              groups={groups}
+              labels={labels}
+              loading={loading}
+              error={error}
+              onSelect={(item) => setSelected(item)}
+            />
+            <Text size="sm" tone="muted" aria-live="polite">
+              {selected ? `選択: ${String(selected.label)}` : "まだ項目を選択していません。"}
+            </Text>
+            <Flex gap="sm" wrap>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  setError(undefined);
+                  setLoading((current) => !current);
+                }}
+              >
+                読み込み状態を切替
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  setLoading(false);
+                  setError((current) => (current ? undefined : "候補を取得できませんでした。"));
+                }}
+              >
+                エラー状態を切替
+              </Button>
+            </Flex>
+          </Flex>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>サーバー検索（search-as-you-type）</CardTitle>
+          <CardDescription>
+            `onSearchChange` でクエリを受け取り、結果を `groups` として返します。`shouldFilter=
+            false` でクライアント側の再フィルタを止め、空状態は `groups` から決まります。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ServerSearchDemo />
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}