@godxjp/ui 20.2.1 → 22.0.0

package/docs/data-entry/chat-suggestion.tsx

@@ -0,0 +1,301 @@
+import { useState } from "react";
+
+import {
+  Avatar,
+  AvatarFallback,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import {
+  ChatComposer,
+  ChatSuggestion,
+  type ChatSuggestionItemProp,
+} from "@godxjp/ui/data-entry";
+import { Text } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { AtSign, Bot, Hash, MessageSquare, Settings, Slash, Users } from "lucide-react";
+
+/**
+ * ChatSuggestion — the trigger-character list that completes a draft in place.
+ *
+ * It owns the part `Command` does not: watching a TEXTAREA for a trigger character at the caret,
+ * tracking the query as the caret moves, and closing on Escape, on blur and on a word break —
+ * while the list itself stays the real `Command` inside a real `Popover`, so the listbox ARIA is
+ * cmdk's and not hand-rolled.
+ *
+ * Every card here is one axis at rest, so the whole API is visible without clicking:
+ * `triggerCharacter`, one level of `children`, a disabled row, an empty result, and the
+ * open/defaultOpen/onOpenChange triad. `ChatComposer`'s own page shows it wired into a live
+ * transcript; this page is about the completion behaviour alone.
+ *
+ * Composed only from real @godxjp/ui components.
+ */
+const sections: SidebarSectionProp[] = [
+  {
+    label: "アシスタント",
+    items: [
+      { id: "chat", label: "チャット", icon: MessageSquare },
+      { id: "agents", label: "エージェント", icon: Bot },
+      { id: "members", label: "メンバー", icon: Users },
+    ],
+  },
+  { label: "管理", items: [{ id: "settings", label: "設定", icon: Settings }] },
+];
+
+/** Slash commands — the `template` row carries one level of `children`. */
+const COMMANDS: ChatSuggestionItemProp[] = [
+  { value: "summarize", label: "要約する", description: "このスレッドを3行で要約します" },
+  { value: "translate", label: "翻訳する", description: "英語 ⇄ 日本語" },
+  { value: "explain", label: "詳しく説明する" },
+  {
+    value: "archive",
+    label: "アーカイブする",
+    description: "権限がないため選択できません",
+    disabled: true,
+  },
+  {
+    value: "template",
+    label: "テンプレート",
+    description: "定型文を挿入します",
+    children: [
+      { value: "minutes", label: "議事録" },
+      { value: "weekly", label: "週報" },
+    ],
+  },
+];
+
+const MEMBERS: ChatSuggestionItemProp[] = [
+  { value: "sato", label: "佐藤 花子", description: "経理" },
+  { value: "tanaka", label: "田中 太郎", description: "開発" },
+  { value: "nguyen", label: "Nguyễn Minh", description: "Design" },
+];
+
+const CHANNELS: ChatSuggestionItemProp[] = [
+  { value: "general", label: "general", description: "全社アナウンス" },
+  { value: "accounting", label: "accounting", description: "経理チーム" },
+];
+
+export default function Demo() {
+  const [slashDraft, setSlashDraft] = useState("");
+  const [mentionDraft, setMentionDraft] = useState("");
+  const [channelDraft, setChannelDraft] = useState("");
+  const [emptyDraft, setEmptyDraft] = useState("");
+  const [controlledDraft, setControlledDraft] = useState("");
+  const [controlledOpen, setControlledOpen] = useState(false);
+
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="chat"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "CoreDesk", role: "アシスタント", color: "hsl(var(--primary))" }}
+        />
+      }
+      topbar={
+        <Topbar
+          start={
+            <Avatar className="rounded-md">
+              <AvatarFallback className="bg-primary text-primary-foreground font-bold">
+                C
+              </AvatarFallback>
+            </Avatar>
+          }
+        />
+      }
+    >
+      <PageContainer
+        title="入力補完"
+        subtitle="ChatSuggestion · トリガー文字 / 階層 / 無効行 / 該当なし / 制御された開閉"
+        breadcrumb={[{ label: "アシスタント", to: "#" }, { label: "入力補完" }]}
+      >
+        <Flex direction="col" gap="lg">
+          {/* ── 1. The default trigger, and one level of children ────────────────────────── */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>
+                <Slash aria-hidden="true" />
+                スラッシュコマンド
+              </CardTitle>
+              <CardDescription>
+                「/」を入力すると開きます。「テンプレート」は子を持つので、Enter
+                はまだ確定せず一段深く入ります。Escape
+                は閉じるだけで、入力済みの文字はそのまま残ります。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ChatSuggestion
+                items={COMMANDS}
+                onValueChange={(value) => setSlashDraft(`/${value} `)}
+              >
+                {({ onTrigger, onKeyDown }) => (
+                  <ChatComposer
+                    id="slash-composer"
+                    aria-label="スラッシュコマンドを試す"
+                    value={slashDraft}
+                    onValueChange={(next) => {
+                      setSlashDraft(next);
+                      onTrigger(next);
+                    }}
+                    onKeyDown={onKeyDown}
+                    onSubmit={() => setSlashDraft("")}
+                    placeholder="「/」でコマンド一覧"
+                  />
+                )}
+              </ChatSuggestion>
+            </CardContent>
+          </Card>
+
+          {/* ── 2. triggerCharacter="@" ──────────────────────────────────────────────────── */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>
+                <AtSign aria-hidden="true" />
+                triggerCharacter=&quot;@&quot;
+              </CardTitle>
+              <CardDescription>
+                トリガー文字は差し替えられます。1つの入力欄に対して1つの
+                ChatSuggestion — 2種類を同時に見張るのではなく、用途ごとに別の欄にします。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ChatSuggestion
+                items={MEMBERS}
+                triggerCharacter="@"
+                onValueChange={(value) => setMentionDraft(`@${value} `)}
+              >
+                {({ onTrigger, onKeyDown }) => (
+                  <ChatComposer
+                    id="mention-composer"
+                    aria-label="メンバーをメンション"
+                    value={mentionDraft}
+                    onValueChange={(next) => {
+                      setMentionDraft(next);
+                      onTrigger(next);
+                    }}
+                    onKeyDown={onKeyDown}
+                    onSubmit={() => setMentionDraft("")}
+                    placeholder="「@」でメンバー一覧"
+                  />
+                )}
+              </ChatSuggestion>
+            </CardContent>
+          </Card>
+
+          {/* ── 3. triggerCharacter="#" ──────────────────────────────────────────────────── */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>
+                <Hash aria-hidden="true" />
+                triggerCharacter=&quot;#&quot;
+              </CardTitle>
+              <CardDescription>チャンネル参照。項目が少なくても扱いは同じです。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ChatSuggestion
+                items={CHANNELS}
+                triggerCharacter="#"
+                onValueChange={(value) => setChannelDraft(`#${value} `)}
+              >
+                {({ onTrigger, onKeyDown }) => (
+                  <ChatComposer
+                    id="channel-composer"
+                    aria-label="チャンネルを参照"
+                    value={channelDraft}
+                    onValueChange={(next) => {
+                      setChannelDraft(next);
+                      onTrigger(next);
+                    }}
+                    onKeyDown={onKeyDown}
+                    onSubmit={() => setChannelDraft("")}
+                    placeholder="「#」でチャンネル一覧"
+                    size="sm"
+                  />
+                )}
+              </ChatSuggestion>
+            </CardContent>
+          </Card>
+
+          {/* ── 4. No items — the empty state is the component's, not the caller's ───────── */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>該当なし</CardTitle>
+              <CardDescription>
+                候補が0件でもパネルは開き、件数は読み上げ用の status
+                で通知されます。空の list を黙って閉じると、利用者には「効かない」ように見えます。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ChatSuggestion items={[]} onValueChange={() => {}}>
+                {({ onTrigger, onKeyDown }) => (
+                  <ChatComposer
+                    id="empty-composer"
+                    aria-label="候補が0件の例"
+                    value={emptyDraft}
+                    onValueChange={(next) => {
+                      setEmptyDraft(next);
+                      onTrigger(next);
+                    }}
+                    onKeyDown={onKeyDown}
+                    onSubmit={() => setEmptyDraft("")}
+                    placeholder="「/」を押しても候補はありません"
+                  />
+                )}
+              </ChatSuggestion>
+            </CardContent>
+          </Card>
+
+          {/* ── 5. open / onOpenChange — the controlled triad ────────────────────────────── */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>open · onOpenChange</CardTitle>
+              <CardDescription>
+                開閉も制御できます。下の行は現在の状態をそのまま映したもので、
+                トリガー文字・Escape・語の区切りのいずれでも同じ値が動きます。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="sm">
+                <ChatSuggestion
+                  items={COMMANDS}
+                  open={controlledOpen}
+                  onOpenChange={setControlledOpen}
+                  onValueChange={(value) => setControlledDraft(`/${value} `)}
+                >
+                  {({ onTrigger, onKeyDown }) => (
+                    <ChatComposer
+                      id="controlled-composer"
+                      aria-label="開閉を制御した例"
+                      value={controlledDraft}
+                      onValueChange={(next) => {
+                        setControlledDraft(next);
+                        onTrigger(next);
+                      }}
+                      onKeyDown={onKeyDown}
+                      onSubmit={() => setControlledDraft("")}
+                      placeholder="「/」で開き、Escape で閉じます"
+                    />
+                  )}
+                </ChatSuggestion>
+                <Text size="xs" tone="muted">
+                  open = {controlledOpen ? "true" : "false"}
+                </Text>
+              </Flex>
+            </CardContent>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

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

@@ -4,11 +4,14 @@ 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";
+import type { DateRange } from "react-day-picker";
 
 /**
- * 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.
+ * DatePicker — ONE date control. `picker` sets the granularity (day · week · month · quarter ·
+ * year), `range` turns it into a two-endpoint field, `multiple` into a set. Always give it a
+ * `name` for form submission; it emits ISO-8601 at the picker's own precision. Use
+ * `minDate`/`maxDate` to constrain what is selectable. Never hand-roll a date input + calendar,
+ * and never compose two DatePickers side-by-side to fake a range — that is `range`.
  * Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
@@ -17,6 +20,11 @@ export default function Demo() {
   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);
+  const [period, setPeriod] = useState<DateRange | undefined>({
+    from: new Date(2026, 3, 1),
+    to: new Date(2027, 2, 31),
+  });
+  const [term, setTerm] = useState<DateRange | undefined>(undefined);
 
   return (
     <PageContainer
@@ -271,6 +279,138 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>期間 (range)</CardTitle>
+            <CardDescription>
+              range を付けると値は DateRange になり、開始/終了の 2 入力を 1
+              つのコントロールにまとめる。 name=&#34;period&#34; は period_from / period_to として
+              ISO 送信される。 開始 &gt; 終了で入力しても order (既定 true) が昇順に正規化する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent data-axe-open>
+            <FormField id="period" label="会計期間" required>
+              <DatePicker
+                range
+                id="period"
+                name="period"
+                value={period}
+                onValueChange={setPeriod}
+                minDate={new Date(2020, 0, 1)}
+                maxDate={new Date(2030, 11, 31)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>月次の期間 (range × picker)</CardTitle>
+            <CardDescription>
+              range と picker は直交する。picker=&#34;month&#34; の期間は月グリッドで選び、
+              term_from / term_to を ISO yyyy-MM で送信する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="term" label="対象期間">
+              <DatePicker
+                range
+                picker="month"
+                id="term"
+                name="term"
+                value={term}
+                onValueChange={setTerm}
+                minDate={new Date(2024, 0, 1)}
+                maxDate={new Date(2027, 11, 31)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>期間プリセットと確定</CardTitle>
+            <CardDescription>
+              presets · needConfirm · allowEmpty は range でも同じ綴りで効く。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="preset-range" label="集計期間">
+              <DatePicker
+                range
+                id="preset-range"
+                name="report"
+                format="yyyy/MM/dd"
+                needConfirm
+                allowEmpty={[false, true]}
+                showWeek
+                minDate={new Date(2026, 0, 1)}
+                maxDate={new Date(2026, 11, 31)}
+                presets={[
+                  {
+                    label: "9月",
+                    value: () => ({ from: new Date(2026, 8, 1), to: new Date(2026, 8, 30) }),
+                  },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>パネルの初期表示 (defaultPickerValue)</CardTitle>
+            <CardDescription>
+              値とは独立に「パネルがどの期間を開くか」を指定する。会計年度の開始月で開く、
+              編集中の行の月で開く、といった要求はこれでしか表現できない。antd と同じく
+              開くたびに再適用される。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="fiscal-open" label="会計年度開始月">
+              <DatePicker
+                id="fiscal-open"
+                name="fiscal_open"
+                picker="month"
+                defaultPickerValue={new Date(2027, 3, 1)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>片側だけ固定した期間</CardTitle>
+            <CardDescription>
+              range のとき disabled は [from, to] のタプルを取り、片方だけロックできる。
+              「開始日は契約で確定、終了日だけ交渉中」がこれで表現できる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="contract-period" label="契約期間">
+              <DatePicker
+                range
+                id="contract-period"
+                name="contract_period"
+                defaultValue={{ from: new Date(2026, 3, 1), to: new Date(2027, 2, 31) }}
+                disabled={[true, false]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>disabled な期間</CardTitle>
+            <CardDescription>確定済み期間や読み取り専用フィールドに使用。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="locked-period" label="確定期間">
+              <DatePicker
+                range
+                id="locked-period"
+                name="locked_period"
+                value={{ from: new Date(2025, 3, 1), to: new Date(2026, 2, 31) }}
+                disabled
+              />
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/form/examples/invoice-form.tsx

@@ -3,7 +3,6 @@ import { useState } from "react";
 import {
   Cascader,
   DatePicker,
-  DateRangePicker,
   Field,
   Form,
   FormField,
@@ -294,7 +293,8 @@ export default function Demo() {
                     />
                   </FormField>
                   <FormField id="iv-period" label="対象期間">
-                    <DateRangePicker
+                    <DatePicker
+                      range
                       id="iv-period"
                       name="period"
                       value={v.period}

package/docs/data-entry/form-field/examples/a11y-contract.tsx

@@ -5,11 +5,9 @@ import {
   CheckboxGroup,
   ColorPicker,
   DatePicker,
-  DateRangePicker,
   Form,
   FormField,
   Input,
-  MonthPicker,
   RadioGroup,
   SearchInput,
   Select,
@@ -129,14 +127,14 @@ export default function Demo() {
               <FormField id="ac-date" label="取引日" helper="yyyy-MM-dd">
                 <DatePicker id="ac-date" name="date" />
               </FormField>
-              <FormField id="ac-month" label="対象月" helper="yyyy/MM">
-                <MonthPicker id="ac-month" name="month" />
+              <FormField id="ac-month" label="対象月" helper="yyyy-MM">
+                <DatePicker picker="month" id="ac-month" name="month" />
               </FormField>
               <FormField id="ac-time" label="締め時刻" helper="24時間表記">
                 <TimePicker id="ac-time" name="time" />
               </FormField>
               <FormField id="ac-period" label="対象期間" helper="開始日と終了日">
-                <DateRangePicker id="ac-period" name="period" />
+                <DatePicker range id="ac-period" name="period" />
               </FormField>
               <FormField id="ac-color" label="タグ色" helper="16進カラー">
                 <ColorPicker id="ac-color" onValueChange={() => {}} />

package/docs/data-entry/form.tsx

@@ -5,7 +5,6 @@ import {
   Checkbox,
   CheckboxGroup,
   DatePicker,
-  DateRangePicker,
   Field,
   Form,
   FormErrors,
@@ -425,7 +424,7 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>日時系 · DatePicker / DateRangePicker / TimePicker</CardTitle>
+            <CardTitle level={2}>日時系 · DatePicker / DatePicker range / TimePicker</CardTitle>
             <CardDescription>
               単一日付・期間・時刻。ISO-8601 / IANA タイムゾーンに準拠し locale
               連動でフォーマットする。
@@ -483,12 +482,13 @@ export default function Demo() {
                 />
               </FormField>
               <FormField id="f-period" label="会計期間" colSpan={2}>
-                <DateRangePicker
+                <DatePicker
+                  range
                   id="f-period"
                   name="period"
                   value={period}
                   onValueChange={setPeriod}
-                  // 土日は選べない。fromDate/toDate では表せない規則。
+                  // 土日は選べない。minDate/maxDate では表せない規則。
                   disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
                 />
               </FormField>

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

@@ -223,6 +223,37 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* prefix / suffix — all THREE combinations, because the two-affix case is the only one
+            that used to be exercised and the suffix-only one is where the bug lived. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>prefix · suffix · 単位つきの数値</CardTitle>
+            <CardDescription>
+              通貨記号や単位はフィールドの内側に重ねる装飾。読み上げからは外れる (aria-hidden)
+              ので、意味は必ずラベル側に置く。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md" id="number-input-affixes">
+              <FormField id="ni-prefix" label="金額（前置き）">
+                <NumberInput id="ni-prefix" prefix="¥" defaultValue={1980} aria-label="金額" />
+              </FormField>
+              <FormField id="ni-suffix" label="日数（後置き）">
+                <NumberInput id="ni-suffix" suffix="日" defaultValue={7} aria-label="日数" />
+              </FormField>
+              <FormField id="ni-both" label="率（前後）">
+                <NumberInput
+                  id="ni-both"
+                  prefix="+"
+                  suffix="%"
+                  defaultValue={12}
+                  aria-label="率"
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <Heading level={2}>キーボード操作</Heading>