@godxjp/ui 19.1.0 → 19.2.0

package/docs/data-entry/textarea.tsx

@@ -0,0 +1,209 @@
+import * as React from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, Textarea } from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Textarea — styled wrapper around the native textarea. Pair with FormField for
+ * a labelled field. Composed only from real @godxjp/ui components.
+ */
+
+type Message = { id: number; author: string; body: string };
+
+const SEED_MESSAGES: Message[] = [
+  { id: 1, author: "佐藤", body: "月次の締め、明日の10時までにお願いします。" },
+  { id: 2, author: "Trần", body: "承知しました。INV-2024-0312 の差異だけ確認中です。" },
+];
+
+/**
+ * The godx-chatter composer (gh#310). One line at rest, grows line by line, scrolls itself past
+ * eight rows, and collapses back to one line the moment the post is sent — the send button just
+ * resets the controlled value, and `autoGrow` follows it without a single line of layout code.
+ */
+function Composer() {
+  const [messages, setMessages] = React.useState(SEED_MESSAGES);
+  const [draft, setDraft] = React.useState("");
+
+  const send = () => {
+    const body = draft.trim();
+    if (!body) return;
+    setMessages((current) => [...current, { id: current.length + 1, author: "自分", body }]);
+    setDraft("");
+  };
+
+  return (
+    <Flex direction="col" gap="md">
+      <Flex direction="col" gap="sm">
+        {messages.map((message) => (
+          <Card key={message.id}>
+            <CardContent>
+              <CardTitle level={3}>{message.author}</CardTitle>
+              <CardDescription>{message.body}</CardDescription>
+            </CardContent>
+          </Card>
+        ))}
+      </Flex>
+
+      <Card className="focus-within:ring-ring/50 overflow-hidden focus-within:ring-2">
+        <CardContent flush>
+          <Textarea
+            variant="ghost"
+            autoGrow
+            minRows={1}
+            maxRows={8}
+            aria-label="メッセージ"
+            placeholder="メッセージを入力... (Shift+Enter で改行)"
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+          />
+          <Flex direction="row" justify="end" gap="sm" className="px-2 pb-2">
+            <Button size="sm" onClick={send}>
+              送信
+            </Button>
+          </Flex>
+        </CardContent>
+      </Card>
+    </Flex>
+  );
+}
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Textarea"
+      subtitle="Multi-line text · pair with FormField for label / helper"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>States</CardTitle>
+            <CardDescription>Placeholder, filled, and disabled.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Textarea aria-label="プレースホルダー状態" placeholder="摘要を入力..." />
+              <Textarea aria-label="入力済み状態" defaultValue={"4月分 受注\nINV-2024-0312"} />
+              <Textarea aria-label="無効状態" disabled defaultValue="無効 (disabled)" />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Embedded in a surface · variant="ghost"</CardTitle>
+            <CardDescription>
+              The Card already draws the box, so the field must not draw a second one. Focus moves
+              to the surface via focus-within.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Card className="focus-within:ring-ring/50 overflow-hidden focus-within:ring-2">
+                <CardContent flush>
+                  <Textarea
+                    variant="ghost"
+                    className="resize-none"
+                    rows={2}
+                    aria-label="サーフェス内のテキストエリア"
+                    placeholder="メッセージを入力..."
+                  />
+                  <Flex direction="row" justify="end" className="px-2 pb-2">
+                    <Button size="sm">送信</Button>
+                  </Flex>
+                </CardContent>
+              </Card>
+              <Textarea
+                variant="default"
+                rows={2}
+                aria-label="単独のテキストエリア"
+                defaultValue='variant="default" — 単独のフィールドは自分で枠を描く'
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Chat composer · autoGrow</CardTitle>
+            <CardDescription>
+              一行から始まり、入力と貼り付けに合わせて行単位で伸び、8行を超えると内部でスクロールし、送信すると一行に戻ります。高さを書くコードはありません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Composer />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>autoGrow の下限と上限 · minRows / maxRows</CardTitle>
+            <CardDescription>
+              下限・上限は「行」で指定します。行数なら密度切替や --font-size-base
+              の再テーマでも見た目の行数がずれません。上限を超えた分は箱がスクロールします。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField
+                id="autogrow-ceiling"
+                label="上限あり (minRows=1 / maxRows=3)"
+                helper="4行目からは箱が伸びずに内部スクロールへ切り替わります。"
+              >
+                <Textarea
+                  id="autogrow-ceiling"
+                  autoGrow
+                  minRows={1}
+                  maxRows={3}
+                  defaultValue={"1行目\n2行目\n3行目\n4行目\n5行目\n6行目"}
+                />
+              </FormField>
+
+              <FormField
+                id="autogrow-floor"
+                label="下限あり (minRows=3)"
+                helper="空でも3行分の高さを保ちます。"
+              >
+                <Textarea
+                  id="autogrow-floor"
+                  autoGrow
+                  minRows={3}
+                  placeholder="社内メモ..."
+                  allowClear
+                />
+              </FormField>
+
+              <FormField
+                id="autogrow-unbounded"
+                label="上限なし (maxRows=0)"
+                helper="ページ側にスクロールを持つ画面でのみ使ってください。"
+              >
+                <Textarea
+                  id="autogrow-unbounded"
+                  autoGrow
+                  maxRows={0}
+                  defaultValue={
+                    "長文の下書きを最後まで見せたい画面向け。\n箱は内容に合わせて伸び続けます。"
+                  }
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>In FormField</CardTitle>
+            <CardDescription>Labelled with a helper hint.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="memo" label="摘要" helper="仕訳に表示される説明文です">
+              <Textarea id="memo" placeholder="例: 4月分 受注 INV-2024-0312" />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

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

@@ -0,0 +1,99 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, TimePicker } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * TimePicker — 24h HH:mm combobox with a scrollable hour/minute popover.
+ * The visible input IS the form field — give it a `name` and it submits
+ * directly. Adjust minuteStep for domain needs (15 for scheduling, 1 for
+ * precise entry). Never a raw <input type="time">. Composed only from real
+ * @godxjp/ui components.
+ */
+export default function Demo() {
+  const [cutoffTime, setCutoffTime] = useState("17:00");
+  const [shiftStart, setShiftStart] = useState("09:00");
+  const [shiftEnd, setShiftEnd] = useState("18:00");
+
+  return (
+    <PageContainer
+      title="TimePicker"
+      subtitle="時刻入力 · 24h HH:mm コンボボックス、スクロール選択付き"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>基本 (controlled)</CardTitle>
+            <CardDescription>
+              value + onValueChange で制御。name= を指定すると HH:mm でフォーム送信される。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="cutoff-time" label="締め時刻" required>
+              <TimePicker
+                id="cutoff-time"
+                name="cutoff_time"
+                value={cutoffTime}
+                onValueChange={setCutoffTime}
+                minuteStep={5}
+                className="w-36"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>minuteStep={15} — シフト入力</CardTitle>
+            <CardDescription>
+              勤怠管理など 15 分刻みの列を表示。typed 入力は任意の HH:mm を受け付ける。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md" wrap>
+              <FormField id="shift-start" label="出勤時刻">
+                <TimePicker
+                  id="shift-start"
+                  name="shift_start"
+                  value={shiftStart}
+                  onValueChange={setShiftStart}
+                  minuteStep={15}
+                  className="w-36"
+                />
+              </FormField>
+              <FormField id="shift-end" label="退勤時刻">
+                <TimePicker
+                  id="shift-end"
+                  name="shift_end"
+                  value={shiftEnd}
+                  onValueChange={setShiftEnd}
+                  minuteStep={15}
+                  className="w-36"
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>disabled 状態</CardTitle>
+            <CardDescription>確定済みシフトや読み取り専用フィールドに使用。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="locked-time" label="確定時刻">
+              <TimePicker
+                id="locked-time"
+                name="locked_time"
+                value="09:00"
+                disabled
+                className="w-36"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/toggle-count.tsx

@@ -0,0 +1,293 @@
+import { useState } from "react";
+import { Eye, PartyPopper, ThumbsUp } from "lucide-react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+} from "@godxjp/ui/data-display";
+import { Toggle, ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Toggle `count` — the counted, PRESSED chip (gh#312).
+ *
+ * `Button` owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`) and `Toggle`
+ * owns the pressed state, so a faceted filter chip ("未対応 42", selected or not) and a reaction
+ * chip had no primitive: `<Button aria-pressed>` paints no state, a hand-written `<span>` inside a
+ * Toggle re-derives the Intl formatting and the cap page-side, and a nested `Badge` double-borders
+ * the chip. Toggle now carries the SAME vocabulary, so the chip is one control with one accessible
+ * name and one focus ring.
+ *
+ * Composed only from real @godxjp/ui components.
+ */
+
+type Ticket = {
+  id: string;
+  subject: string;
+  status: "open" | "waiting" | "closed";
+  assignee: string;
+  updatedAt: string;
+};
+
+const TICKETS: Ticket[] = [
+  {
+    id: "TCK-1042",
+    subject: "請求書の消費税区分が誤っている",
+    status: "open",
+    assignee: "佐藤",
+    updatedAt: "2026-08-28",
+  },
+  {
+    id: "TCK-1041",
+    subject: "口座振替の初回引落日について",
+    status: "waiting",
+    assignee: "鈴木",
+    updatedAt: "2026-08-28",
+  },
+  {
+    id: "TCK-1039",
+    subject: "年末調整の書類提出期限を延長したい",
+    status: "open",
+    assignee: "高橋",
+    updatedAt: "2026-08-27",
+  },
+  {
+    id: "TCK-1035",
+    subject: "退職者の social insurance 資格喪失届",
+    status: "closed",
+    assignee: "田中",
+    updatedAt: "2026-08-26",
+  },
+  {
+    id: "TCK-1031",
+    subject: "支店追加に伴う権限設定の依頼",
+    status: "waiting",
+    assignee: "佐藤",
+    updatedAt: "2026-08-25",
+  },
+];
+
+const STATUS_LABEL: Record<Ticket["status"], string> = {
+  open: "未対応",
+  waiting: "保留中",
+  closed: "対応済み",
+};
+
+const COLUMNS = [
+  { key: "id", header: "番号", width: "8rem", priority: "meta" as const },
+  { key: "subject", header: "件名", priority: "primary" as const },
+  {
+    key: "status",
+    header: "状態",
+    width: "8rem",
+    priority: "secondary" as const,
+    render: (row: Ticket) => STATUS_LABEL[row.status],
+  },
+  { key: "assignee", header: "担当", width: "8rem", priority: "secondary" as const },
+  { key: "updatedAt", header: "更新日", width: "10rem", priority: "meta" as const },
+];
+
+export default function Demo() {
+  // Faceted filter chips — pressed = the facet is applied. Counts are the facet sizes.
+  const [facets, setFacets] = useState<string[]>(["open"]);
+  // A reaction row: the count is how many people reacted, the pressed state is whether YOU did.
+  const [reactions, setReactions] = useState<string[]>(["thumbsup"]);
+  const [pinned, setPinned] = useState(true);
+
+  const counts = {
+    open: TICKETS.filter((t) => t.status === "open").length,
+    waiting: TICKETS.filter((t) => t.status === "waiting").length,
+    closed: TICKETS.filter((t) => t.status === "closed").length,
+  };
+  const rows = facets.length === 0 ? TICKETS : TICKETS.filter((t) => facets.includes(t.status));
+
+  return (
+    <PageContainer
+      title="Toggle count"
+      subtitle="カウント付きの押下チップ · faceted filter · リアクション"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>問い合わせ受信箱</CardTitle>
+            <CardDescription>
+              ToggleGroup type=&quot;multiple&quot; の各アイテムが count
+              を持つファセットチップ。variant/size はグループの context から届き、数字だけが item
+              ごとのデータ。押下状態は aria-pressed
+              が担い、色だけに依存しない（押下でチップが反転し、ピルも反転する）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <ToggleGroup
+                type="multiple"
+                variant="outline"
+                size="sm"
+                value={facets}
+                onValueChange={setFacets}
+                aria-label="状態で絞り込み"
+              >
+                <ToggleGroupItem value="open" count={counts.open} countLabel="件">
+                  未対応
+                </ToggleGroupItem>
+                <ToggleGroupItem value="waiting" count={counts.waiting} countLabel="件">
+                  保留中
+                </ToggleGroupItem>
+                <ToggleGroupItem value="closed" count={counts.closed} countLabel="件">
+                  対応済み
+                </ToggleGroupItem>
+                <ToggleGroupItem value="escalated" count={0} showZero={false} countLabel="件">
+                  エスカレーション
+                </ToggleGroupItem>
+              </ToggleGroup>
+              <Text tone="muted" size="sm">
+                「エスカレーション」は count=0 かつ showZero=false
+                なのでピルが出ない。0件のファセットを常に見せたい場合は showZero を既定の true
+                のままにする。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent flush>
+            <DataTable data={rows} columns={COLUMNS} getRowId={(row: Ticket) => row.id} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>リアクション</CardTitle>
+            <CardDescription>
+              絵文字ラベルには aria-label が要る。aria-label
+              があると内容はアクセシブル名から外れるので、count はラベル側に畳み込まれ 「いいね, 12
+              件」と読み上げられる。数字の読み上げは 1 回だけで、count が変わっても live region
+              では通知しない（他人のリアクションはこのコントロールの状態ではない）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="sm" wrap align="center">
+              <ToggleGroup
+                type="multiple"
+                size="sm"
+                value={reactions}
+                onValueChange={setReactions}
+                aria-label="この投稿へのリアクション"
+              >
+                <ToggleGroupItem
+                  value="thumbsup"
+                  aria-label="いいね"
+                  count={reactions.includes("thumbsup") ? 12 : 11}
+                  countLabel="件"
+                >
+                  <ThumbsUp aria-hidden="true" />
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  value="party"
+                  aria-label="おめでとう"
+                  count={reactions.includes("party") ? 4 : 3}
+                  countLabel="件"
+                >
+                  <PartyPopper aria-hidden="true" />
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  value="eyes"
+                  aria-label="確認中"
+                  count={reactions.includes("eyes") ? 1240 : 1239}
+                  overflowCount={999}
+                  countLabel="件"
+                >
+                  <Eye aria-hidden="true" />
+                </ToggleGroupItem>
+              </ToggleGroup>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Button の count と同じ語彙</CardTitle>
+            <CardDescription>
+              count / overflowCount / showZero は Button から一字一句そのまま。ピルの寸法
+              （min-width 16px・左右パディング 4px・12.47px・角 pill・tabular-nums）も Button と
+              完全に一致し、トークン同値テストで固定してある。色だけは分けている： Toggle
+              のピルは押下で反転する面の上に乗るので、押下時 5.04:1（light）/ 7.05:1（dark）、
+              非押下時 14.18:1 / 12.44:1 と別に実測している。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md" align="center" wrap>
+              <Button variant="outline" count={1240} overflowCount={999}>
+                受信箱
+              </Button>
+              <Toggle
+                variant="outline"
+                count={1240}
+                overflowCount={999}
+                countLabel="件"
+                pressed={pinned}
+                onPressedChange={setPinned}
+              >
+                受信箱
+              </Toggle>
+              <Text tone="muted" size="sm">
+                どちらも Intl.NumberFormat でロケール整形され、overflowCount を超えると
+                「999+」になる。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>サイズと variant</CardTitle>
+            <CardDescription>
+              sm / md / lg × default / outline。数字は tabular-nums で桁が動かず、min-width
+              があるので 1 桁でもピルが潰れない。粗いポインタでは --control-height が 44px
+              以上に上がるので、チップの行がタップの地雷原にならない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" gap="md" align="center" wrap>
+                <Toggle size="sm" count={3} countLabel="件" defaultPressed>
+                  小
+                </Toggle>
+                <Toggle size="md" count={42} countLabel="件" defaultPressed>
+                  標準
+                </Toggle>
+                <Toggle size="lg" count={1000} countLabel="件" defaultPressed>
+                  大
+                </Toggle>
+              </Flex>
+              <Flex direction="row" gap="md" align="center" wrap>
+                <Toggle variant="outline" size="sm" count={3} countLabel="件">
+                  小
+                </Toggle>
+                <Toggle variant="outline" size="md" count={42} countLabel="件">
+                  標準
+                </Toggle>
+                <Toggle variant="outline" size="lg" count={1000} countLabel="件">
+                  大
+                </Toggle>
+              </Flex>
+              <Flex direction="row" gap="md" align="center" wrap>
+                <Toggle count={7} countLabel="件" pressed disabled>
+                  締め済み（押下・無効）
+                </Toggle>
+                <Toggle count={7} countLabel="件" disabled>
+                  締め済み（無効）
+                </Toggle>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}