@godxjp/ui 31.31.8 → 32.0.1

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

@@ -1,145 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, TagInput } from "@godxjp/ui/data-entry";
-import { useTranslation } from "@godxjp/ui/i18n";
-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 { t } = useTranslation();
-  const [invoiceTags, setInvoiceTags] = useState<string[]>(["営業部", "Q1"]);
-  const [skillTags, setSkillTags] = useState<string[]>(["経理", "仕訳入力"]);
-  const [recipientEmails, setRecipientEmails] = useState<string[]>([]);
-  /* The reporter's exact 71-character string, held FIRST so the truncated chip is one of the two
-     that render rather than one of the ones `+N` hides (gh#840). */
-  const [ledgerTags, setLedgerTags] = useState<string[]>([
-    "THEME_SEED_LEDGER_0007_CONTRAST_VERIFIED_AGAINST_CANVAS_AND_LABEL_00042",
-    "本番",
-    "ổn định",
-  ]);
-
-  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}>{t("showcase.tagInput.longIdTitle")}</CardTitle>
-            <CardDescription>
-              maxTagTextLength cuts the chip TEXT only — the whole value stays in the chip&apos;s
-              title and in the remove button&apos;s accessible name. maxTagCount collapses the rest
-              into a +N that names, in its own title and aria-label, exactly which tags it hides.
-              Neither may swallow a value silently (gh#840).
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField
-              id="ledger-tags"
-              label={t("showcase.tagInput.ledgerLabel")}
-              helper={t("showcase.tagInput.ledgerHelper")}
-            >
-              <TagInput
-                id="ledger-tags"
-                value={ledgerTags}
-                onValueChange={setLedgerTags}
-                maxTagCount={2}
-                maxTagTextLength={16}
-                aria-label={t("showcase.tagInput.ledgerLabel")}
-              />
-            </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>
-  );
-}

package/docs/data-entry/textarea.tsx

@@ -1,249 +0,0 @@
-import * as React from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Form, 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. 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">
-            <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">
-                    <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>
-            <Form>
-              <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>
-            </Form>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              Ant Design axes · status, variant, size, count, autoSize
-            </CardTitle>
-            <CardDescription>
-              variant carries five accepted spellings for three states: outlined / filled /
-              borderless are Ant Design&apos;s, and this library&apos;s older default / ghost
-              resolve onto the first and the last. autoSize is autoGrow plus its row bounds in one
-              prop.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Textarea aria-label="エラー状態" status="error" defaultValue="不正な値" />
-              <Textarea aria-label="警告状態" status="warning" defaultValue="確認してください" />
-              <Textarea aria-label="枠線あり" variant="outlined" defaultValue="outlined" />
-              <Textarea aria-label="塗りつぶし" variant="filled" defaultValue="filled" />
-              <Textarea aria-label="枠線なし" variant="borderless" defaultValue="borderless" />
-              <Textarea aria-label="既定 (旧称)" variant="default" defaultValue="default" />
-              <Textarea aria-label="ゴースト (旧称)" variant="ghost" defaultValue="ghost" />
-              <Textarea aria-label="小さいサイズ" size="sm" placeholder="sm" />
-              <Textarea aria-label="標準サイズ" size="md" placeholder="md" />
-              <Textarea aria-label="大きいサイズ" size="lg" placeholder="lg" />
-              <Textarea
-                aria-label="文字数カウンタ"
-                count={{ max: 140 }}
-                defaultValue="東京都の請求書について"
-              />
-              <Textarea
-                aria-label="自動リサイズ"
-                autoSize={{ minRows: 2, maxRows: 6 }}
-                placeholder="2行から6行まで伸びます"
-              />
-            </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

@@ -1,187 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Form, FormField, TimePicker, TimeRangePicker } 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>
-            <Form>
-              <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>
-            </Form>
-          </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>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>秒単位の締切</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <FormField id="precision-time" label="締切時刻">
-              <TimePicker
-                id="precision-time"
-                name="precision"
-                defaultValue="17:50:15"
-                format="HH:mm:ss"
-                hourStep={2}
-                minuteStep={10}
-                secondStep={15}
-                changeOnScroll
-                needConfirm
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>12時間表示</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <FormField id="twelve-time" label="開始時刻">
-              <TimePicker
-                id="twelve-time"
-                name="twelve"
-                defaultValue="13:30"
-                format="h:mm A"
-                use12Hours
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>入力状態</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <Flex direction="col" gap="md">
-                <FormField id="readonly-time" label="選択のみ">
-                  <TimePicker
-                    id="readonly-time"
-                    inputReadOnly
-                    defaultValue="09:00"
-                    allowClear={false}
-                    size="sm"
-                    variant="filled"
-                  />
-                </FormField>
-                <FormField id="invalid-time" label="入力を保持">
-                  <TimePicker id="invalid-time" preserveInvalidOnBlur status="error" size="lg" />
-                </FormField>
-                <FormField id="quiet-time" label="任意時刻">
-                  <TimePicker
-                    id="quiet-time"
-                    variant="borderless"
-                    status="warning"
-                    placement="top-start"
-                    showNow={false}
-                  />
-                </FormField>
-              </Flex>
-            </Form>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>勤務時間帯</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <FormField id="shift-range" label="勤務時間">
-              <TimeRangePicker
-                id="shift-range"
-                name="shift"
-                defaultValue={["09:00", "18:00"]}
-                allowEmpty={[false, true]}
-                minuteStep={15}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

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

@@ -1,55 +0,0 @@
-import { TimeRangePicker, FormField } from "@godxjp/ui/data-entry";
-import { Card, CardContent, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-export default function Demo() {
-  return (
-    <PageContainer title="TimeRangePicker" subtitle="勤務時間と受付時間の範囲選択">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>勤務時間</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <FormField id="work-period" label="勤務時間">
-              <TimeRangePicker
-                id="work-period"
-                name="work"
-                defaultValue={["09:00", "18:00"]}
-                minuteStep={15}
-                allowEmpty={[false, false]}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>終了時刻は任意</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <FormField id="optional-end" label="受付時間">
-              <TimeRangePicker
-                id="optional-end"
-                name="reception"
-                defaultValue={["09:00", ""]}
-                allowEmpty={[false, true]}
-                format="HH:mm:ss"
-                showSeconds
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>日をまたぐ勤務</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <FormField id="overnight" label="夜勤">
-              <TimeRangePicker id="overnight" defaultValue={["22:00", "06:00"]} order={false} />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}