@godxjp/ui 19.1.0 → 19.2.0

package/docs/data-entry/select.tsx

@@ -0,0 +1,369 @@
+import { useState } from "react";
+
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import {
+  FormField,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Select — the single-select control. Prefer the data-driven `options` API
+ * (handles search, grouping, async); compose sub-parts only for a custom
+ * trigger. Never a raw <select>. Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [status, setStatus] = useState("paid");
+  const [currency, setCurrency] = useState("JPY");
+  const [priority, setPriority] = useState("medium");
+  const [priorityMd, setPriorityMd] = useState("medium");
+  const [assignee, setAssignee] = useState("tanaka");
+  const [reviewer, setReviewer] = useState("tanaka");
+  const [reviewerAsync, setReviewerAsync] = useState("tanaka");
+  const [reviewerCustom, setReviewerCustom] = useState("tanaka");
+  const [reviewerLabel, setReviewerLabel] = useState("tanaka");
+
+  const people = [
+    { value: "tanaka", label: "田中 太郎", sublabel: "tanaka@example.com" },
+    { value: "suzuki", label: "鈴木 花子", sublabel: "suzuki@example.com" },
+    { value: "sato", label: "佐藤 次郎", sublabel: "sato@example.com" },
+  ];
+  const avatarFor = (label: string) => (
+    <Avatar className="size-5">
+      <AvatarFallback>{label.slice(0, 1)}</AvatarFallback>
+    </Avatar>
+  );
+  const peopleWithIcon = people.map((person) => ({ ...person, icon: avatarFor(person.label) }));
+
+  // A real picker fetches + paginates server-side; we simulate latency so the loading state and the
+  // selectedLabel / selectedIcon at-rest behaviour (option not loaded yet) are real.
+  const loadPeople = async ({ query }: { query: string; page: number }) => {
+    await new Promise((resolve) => setTimeout(resolve, 600));
+    const needle = query.trim().toLowerCase();
+    const list = needle
+      ? peopleWithIcon.filter((person) => person.label.toLowerCase().includes(needle))
+      : peopleWithIcon;
+    return { options: list, hasMore: false };
+  };
+
+  // Async loaders can reject (network / 500). A rejected loader is a DISTINCT state from
+  // "no results": the panel shows an error affordance, never a blank surface.
+  const loadFailing = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    throw new Error("network error");
+  };
+
+  return (
+    <PageContainer
+      title="Select"
+      subtitle="Single-select · data-driven options, searchable, or compound"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Data-driven (options)</CardTitle>
+            <CardDescription>
+              Pass an options array; name= submits the value with the form.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="status" label="状態">
+              <Select
+                id="status"
+                name="status"
+                value={status}
+                onValueChange={setStatus}
+                placeholder="状態を選択"
+                options={[
+                  { value: "draft", label: "下書き" },
+                  { value: "sent", label: "送付済" },
+                  { value: "paid", label: "入金済" },
+                  { value: "overdue", label: "期限超過" },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Searchable + grouped</CardTitle>
+            <CardDescription>
+              showSearch enables client-side filtering; group buckets options.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="currency" label="通貨">
+              <Select
+                id="currency"
+                name="currency"
+                value={currency}
+                onValueChange={setCurrency}
+                showSearch
+                clearable={false}
+                searchPlaceholder="通貨を検索..."
+                options={[
+                  { value: "JPY", label: "日本円", group: "アジア" },
+                  { value: "VND", label: "ベトナムドン", group: "アジア" },
+                  { value: "EUR", label: "ユーロ", group: "ヨーロッパ" },
+                  { value: "GBP", label: "英ポンド", group: "ヨーロッパ" },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Searchable + clearable</CardTitle>
+            <CardDescription>
+              With a value set and clearable (default), an inline ✕ on the trigger resets the
+              selection without opening the list.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="assignee" label="担当者">
+              <Select
+                id="assignee"
+                name="assignee"
+                value={assignee}
+                onValueChange={setAssignee}
+                showSearch
+                searchPlaceholder="担当者を検索..."
+                placeholder="担当者を選択"
+                options={people}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Option icon · shown on the trigger too</CardTitle>
+            <CardDescription>
+              Give each option an `icon` (avatar / flag / lucide icon). It renders before the label
+              in the list AND on the trigger once selected, with no `renderOption` needed.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="reviewer" label="レビュー担当">
+              <Select
+                id="reviewer"
+                name="reviewer"
+                value={reviewer}
+                onValueChange={setReviewer}
+                showSearch
+                searchPlaceholder="担当者を検索..."
+                placeholder="担当者を選択"
+                options={peopleWithIcon}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Async (loadOptions) + selectedIcon</CardTitle>
+            <CardDescription>
+              With `loadOptions` and a preset value, `selectedLabel` + `selectedIcon` show the
+              picked person's name AND avatar on the trigger at rest, before the async list has
+              loaded.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="reviewer-async" label="レビュー担当 (async)">
+              <Select
+                id="reviewer-async"
+                name="reviewer_async"
+                value={reviewerAsync}
+                onValueChange={setReviewerAsync}
+                loadOptions={loadPeople}
+                selectedLabel="田中 太郎"
+                selectedIcon={avatarFor("田中 太郎")}
+                searchPlaceholder="担当者を検索..."
+                placeholder="担当者を選択"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Empty options · trigger disabled</CardTitle>
+            <CardDescription>
+              A static `options={[]}` list has nothing to pick, so the trigger disables itself and
+              never opens a blank popover. Provide options (or an async loadOptions) to enable it.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="empty-static" label="部門">
+              <Select id="empty-static" name="empty_static" options={[]} placeholder="部門を選択" />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Async error state (errorMessage)</CardTitle>
+            <CardDescription>
+              When `loadOptions` rejects, the panel shows a distinct error affordance instead of a
+              blank surface or a misleading “no results”. Override the localized default with
+              `errorMessage`. Open it to see the loading row resolve into the error row.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="reviewer-error" label="レビュー担当 (error)">
+              <Select
+                id="reviewer-error"
+                name="reviewer_error"
+                loadOptions={loadFailing}
+                errorMessage="担当者を読み込めませんでした"
+                searchPlaceholder="担当者を検索..."
+                placeholder="担当者を選択"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Custom rows (renderOption)</CardTitle>
+            <CardDescription>
+              `renderOption` (like Ant&apos;s optionRender) draws a fully custom row: avatar + name
+              + email + a status badge. Use a flex ROW (`div className=&quot;flex
+              items-center&quot;`), not a bare `Flex` which defaults to a column.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="reviewer-custom" label="レビュー担当 (custom)">
+              <Select
+                id="reviewer-custom"
+                name="reviewer_custom"
+                value={reviewerCustom}
+                onValueChange={setReviewerCustom}
+                showSearch
+                searchPlaceholder="担当者を検索..."
+                placeholder="担当者を選択"
+                options={people}
+                renderOption={(option) => (
+                  <div className="flex w-full items-center gap-2">
+                    {avatarFor(option.label)}
+                    <div className="flex min-w-0 flex-col">
+                      <span className="truncate text-sm font-medium">{option.label}</span>
+                      <span className="text-muted-foreground truncate text-xs">
+                        {option.sublabel}
+                      </span>
+                    </div>
+                    <Badge tone="success" className="ms-auto">
+                      VIP
+                    </Badge>
+                  </div>
+                )}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>labelRender · custom selected display</CardTitle>
+            <CardDescription>
+              `labelRender` (Ant Design) customizes the SELECTED value shown on the trigger: here an
+              avatar + name + a role badge. The placeholder still shows when nothing is selected.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="reviewer-label" label="レビュー担当 (labelRender)">
+              <Select
+                id="reviewer-label"
+                name="reviewer_label"
+                value={reviewerLabel}
+                onValueChange={setReviewerLabel}
+                showSearch
+                searchPlaceholder="担当者を検索..."
+                placeholder="担当者を選択"
+                options={people}
+                labelRender={({ label }) => (
+                  <span className="flex items-center gap-2">
+                    {avatarFor(String(label))}
+                    <span className="truncate">{label}</span>
+                    <Badge tone="info" icon={null} className="ms-1">
+                      担当
+                    </Badge>
+                  </span>
+                )}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Compound API (custom trigger)</CardTitle>
+            <CardDescription>
+              Compose sub-parts when the trigger needs custom content. SelectTrigger accepts size
+              &quot;sm&quot; and &quot;md&quot;; &quot;md&quot; is the default and matches Input
+              height in a form, &quot;sm&quot; fits a dense toolbar or table header.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="priority-md" label="優先度 (size=md)">
+                <Select value={priorityMd} onValueChange={setPriorityMd}>
+                  <SelectTrigger size="md" id="priority-md" aria-labelledby="priority-md-label">
+                    <SelectValue placeholder="優先度" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="high">高</SelectItem>
+                    <SelectItem value="medium">中</SelectItem>
+                    <SelectItem value="low">低</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormField>
+              <FormField id="priority" label="優先度 (size=sm)">
+                <Select value={priority} onValueChange={setPriority}>
+                  <SelectTrigger size="sm" id="priority" aria-labelledby="priority-label">
+                    <SelectValue placeholder="優先度" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectLabel>標準</SelectLabel>
+                      <SelectItem value="high">高</SelectItem>
+                      <SelectItem value="medium">中</SelectItem>
+                      <SelectItem value="low">低</SelectItem>
+                    </SelectGroup>
+                    <SelectSeparator />
+                    <SelectGroup>
+                      <SelectLabel>追加レベル</SelectLabel>
+                      {Array.from({ length: 24 }, (_, index) => (
+                        <SelectItem key={index} value={`level-${index + 1}`}>
+                          レベル {index + 1}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/slider.tsx

@@ -0,0 +1,130 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, Slider } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Slider — Radix Slider wrapper. value/defaultValue MUST be number[] not a plain
+ * number. Single-thumb: [50], dual-thumb range: [20, 80].
+ * Use onValueCommit (not onValueChange) for expensive side-effects.
+ * Composed only from real @godxjp/ui components.
+ */
+const yen = (n: number) =>
+  new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" }).format(n);
+
+export default function Demo() {
+  const [taxRate, setTaxRate] = useState<number[]>([10]);
+  const [amountRange, setAmountRange] = useState<number[]>([50000, 300000]);
+  const [allocation, setAllocation] = useState<number[]>([40]);
+
+  return (
+    <PageContainer
+      title="Slider"
+      subtitle="Numeric range slider · value/defaultValue must be number[] (single-thumb: [n], range: [min, max])"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>単一スライダー · 税率設定</CardTitle>
+            <CardDescription>
+              Single-thumb controlled slider. value={`[n]`} — plain number breaks rendering.
+              onValueChange fires on every drag; onValueCommit fires on release.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField
+                id="tax-rate"
+                label={`消費税率: ${taxRate[0]}%`}
+                helper="0% / 8% (軽減税率) / 10% から選択"
+              >
+                <Slider
+                  value={taxRate}
+                  onValueChange={setTaxRate}
+                  min={0}
+                  max={10}
+                  step={2}
+                  name="tax_rate"
+                  aria-label="消費税率"
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>レンジスライダー · 請求金額フィルタ</CardTitle>
+            <CardDescription>
+              Dual-thumb range slider: value={`[min, max]`}. Use minStepsBetweenThumbs to prevent
+              thumbs overlapping.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="amount-range"
+              label={`請求金額: ${yen(amountRange[0])} 〜 ${yen(amountRange[1])}`}
+            >
+              <Slider
+                value={amountRange}
+                onValueChange={setAmountRange}
+                onValueCommit={(v) => {
+                  // expensive filter refetch only on commit (pointer/key release)
+                  void v;
+                }}
+                min={0}
+                max={1000000}
+                step={10000}
+                minStepsBetweenThumbs={1}
+                aria-label="請求金額範囲"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>予算配分スライダー</CardTitle>
+            <CardDescription>
+              step=5 for coarse granularity. Use name= to submit with a native form without JS
+              wiring.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="allocation"
+              label={`広告費配分: ${allocation[0]}%`}
+              helper="残り ${100 - allocation[0]}% が運転資金へ充当されます"
+            >
+              <Slider
+                value={allocation}
+                onValueChange={setAllocation}
+                min={0}
+                max={100}
+                step={5}
+                name="ad_allocation"
+                aria-label="広告費配分"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Disabled (read-only indicator)</CardTitle>
+            <CardDescription>
+              Pass disabled with a controlled value to show a non-interactive bar. Use Progress for
+              pure status display.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="locked-rate" label="確定済み税率 (変更不可)">
+              <Slider value={[10]} disabled min={0} max={20} step={1} aria-label="確定済み税率" />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/switch.tsx

@@ -0,0 +1,67 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Field, Switch } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Switch — a boolean toggle. Wrap in Field (NOT FormField) for a labelled row
+ * with the hidden form input + description. Composed only from real @godxjp/ui
+ * components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer title="Switch" subtitle="Boolean toggle · wrap in Field for a labelled row">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Labelled rows (Field)</CardTitle>
+            <CardDescription>Field owns the label, description, and form input.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Field
+                id="invoice-mail"
+                label="請求書をメール送信"
+                description="発行時に取引先へ自動送信します"
+              >
+                <Switch id="invoice-mail" defaultChecked />
+              </Field>
+              <Field id="reminder" label="支払期日リマインダー" description="期日3日前に通知します">
+                <Switch id="reminder" />
+              </Field>
+              <Field id="locked" label="期間ロック" description="確定済みのため変更できません">
+                <Switch id="locked" disabled defaultChecked />
+              </Field>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>size · sm / md</CardTitle>
+            <CardDescription>
+              sm は一覧行やツールバーなど密度の高い場所、md (既定) は設定画面の行に使う。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Field
+                id="sw-size-sm"
+                label="自動保存 (sm)"
+                description="行の高さを抑えた一覧向けのサイズ"
+              >
+                <Switch id="sw-size-sm" size="sm" defaultChecked />
+              </Field>
+              <Field
+                id="sw-size-md"
+                label="自動保存 (md · 既定)"
+                description="設定画面の標準サイズ"
+              >
+                <Switch id="sw-size-md" size="md" defaultChecked />
+              </Field>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

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

@@ -0,0 +1,108 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, TagInput } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * TagInput — free-form multi-value chips input. value is string[] (NOT string).
+ * Enter or comma commits a tag; Backspace on empty removes the last chip.
+ * Use Select (multiple, with showSearch) instead when the set of values is fixed.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [invoiceTags, setInvoiceTags] = useState<string[]>(["営業部", "Q1"]);
+  const [skillTags, setSkillTags] = useState<string[]>(["経理", "仕訳入力"]);
+  const [recipientEmails, setRecipientEmails] = useState<string[]>([]);
+
+  return (
+    <PageContainer
+      title="TagInput"
+      subtitle="Free-form chips input · value is string[]; Enter/comma to add, Backspace to remove"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>請求書ラベル</CardTitle>
+            <CardDescription>
+              Controlled via value/onValueChange (string[]). Deduplicate is built in. Use for ad-hoc
+              record labels.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="invoice-tags" label="ラベル" helper="Enterまたはカンマで追加">
+              <TagInput
+                value={invoiceTags}
+                onValueChange={setInvoiceTags}
+                placeholder="ラベルを追加..."
+                name="labels"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>担当者スキルタグ</CardTitle>
+            <CardDescription>
+              name= emits a hidden comma-joined input for native form submission without JS wiring.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="skill-tags" label="スキル・資格">
+              <TagInput
+                value={skillTags}
+                onValueChange={setSkillTags}
+                placeholder="スキルを入力..."
+                name="skills"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>承認通知メール送信先</CardTitle>
+            <CardDescription>
+              Uncontrolled start (empty defaultValue); caller receives full updated array on each
+              change.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="recipient-emails"
+              label="CC送信先"
+              helper="複数のメールアドレスをEnterで追加できます"
+            >
+              <TagInput
+                id="recipient-emails"
+                aria-label="CC送信先メール"
+                className="contract-tag-input"
+                value={recipientEmails}
+                onValueChange={setRecipientEmails}
+                placeholder="メールアドレスを追加..."
+                name="cc_emails"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>無効状態</CardTitle>
+            <CardDescription>
+              disabled dims the whole control and drops the remove buttons; the container is marked
+              aria-disabled so the dimmed chips are treated as an inactive control (no contrast
+              failure).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="disabled-tags" label="ラベル">
+              <TagInput value={["確定済み", "ロック"]} disabled />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}