@godxjp/ui 31.31.7 → 32.0.0

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

@@ -1,301 +0,0 @@
-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/checkbox.tsx

@@ -1,256 +0,0 @@
-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" style={{ paddingInlineStart: "var(--space-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>
-  );
-}