@godxjp/ui 28.5.0 → 28.6.0

package/docs/data-entry/radio-group.tsx

@@ -1,9 +1,29 @@
 import { useState } from "react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Field, RadioGroup, RadioItem } from "@godxjp/ui/data-entry";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Field, FormField, RadioGroup, RadioItem } from "@godxjp/ui/data-entry";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
+/** 配送時間帯 · 選択肢が2〜4個を超えたときの見え方を確かめるための実データ。 */
+const DELIVERY_SLOTS = [
+  "08:00-10:00",
+  "10:00-12:00",
+  "12:00-14:00",
+  "14:00-16:00",
+  "16:00-18:00",
+  "18:00-20:00",
+  "20:00-21:00",
+];
+
+const CLOSING_DAYS = ["5日", "10日", "15日", "20日", "25日", "月末"];
+
 /**
  * RadioGroup — 2–4 mutually-exclusive choices, all visible at once (use Select
  * when the list is long or must collapse). Data-driven via an options array.
@@ -11,6 +31,8 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
  */
 export default function Demo() {
   const [controlled, setControlled] = useState("email");
+  const [plan, setPlan] = useState("business");
+
   return (
     <PageContainer
       title="RadioGroup"
@@ -34,6 +56,198 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>選択肢ごとの説明 · プラン選択</CardTitle>
+            <CardDescription>
+              options[].description が各行に付く。料金や条件を選択肢の外に書くと、どの行の
+              説明なのかが読み手側の推測になる。末尾の Badge は label を ReactNode にして
+              入れる。Badge は押せないのでラベルのクリック判定を壊さない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RadioGroup
+              name="plan"
+              value={plan}
+              onValueChange={setPlan}
+              options={[
+                {
+                  value: "standard",
+                  label: "スタンダード",
+                  description: "月額 4,800 円 · 5ユーザーまで · メールサポート",
+                },
+                {
+                  value: "business",
+                  label: (
+                    <>
+                      ビジネス
+                      <Badge as="span" tone="info">
+                        推奨
+                      </Badge>
+                    </>
+                  ),
+                  description: "月額 12,000 円 · 30ユーザーまで · 監査ログと権限テンプレート",
+                },
+                {
+                  value: "enterprise",
+                  label: "エンタープライズ",
+                  description: "個別見積 · SAML SSO · 専任担当とSLA",
+                },
+                {
+                  value: "legacy",
+                  label: "ライト (新規受付終了)",
+                  disabled: true,
+                  description: "既存契約のみ継続。移行先はスタンダードです",
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ラベルの長さ · 2文字と3行が同じ群に並ぶ</CardTitle>
+            <CardDescription>
+              短いラベルと折り返す長いラベルが同居する。丸は1行目の中心に留まり、2行目以降は
+              ラベル列の中で折り返す。ここが崩れると、長い選択肢だけ丸が沈んで列が波打つ。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RadioGroup
+              defaultValue="short"
+              options={[
+                { value: "short", label: "税" },
+                { value: "mid", label: "手数料を按分する" },
+                {
+                  value: "long",
+                  label:
+                    "取引先ごとに設定された端数処理の規則を優先し、規則が未設定の取引先についてのみ、この画面で選んだ既定の規則を適用する",
+                  description: "規則の上書きは監査ログに残ります",
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>optionType=&quot;button&quot; · 箱型の選択</CardTitle>
+            <CardDescription>
+              箱で選ばせたいときはこれが唯一の描画。カード型ラジオという別コンポーネントは
+              無い。role は radiogroup / radio のままなので、矢印キーの移動も name での送信も
+              変わらない。buttonStyle は選択中の塗りだけを決める。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <RadioGroup
+                defaultValue="month"
+                optionType="button"
+                options={[
+                  { value: "day", label: "日次" },
+                  { value: "week", label: "週次" },
+                  { value: "month", label: "月次" },
+                ]}
+              />
+              <RadioGroup
+                defaultValue="pdf"
+                optionType="button"
+                buttonStyle="solid"
+                options={[
+                  { value: "pdf", label: "PDF" },
+                  { value: "csv", label: "CSV" },
+                  { value: "xlsx", label: "Excel" },
+                  { value: "print", label: "印刷", disabled: true },
+                ]}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>選択肢が多いとき</CardTitle>
+            <CardDescription>
+              13件を横並びにした形。全件が見えるので比較はできるが、この量になると走査に時間が
+              かかり、Select のほうが速い。RadioGroup は「全部見せる価値がある2〜4件」が本来の
+              間合い。限界の見え方を置いておかないと、どこで乗り換えるべきか判断できない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RadioGroup
+              name="delivery_slot"
+              defaultValue="10:00-12:00"
+              orientation="horizontal"
+              options={[
+                ...DELIVERY_SLOTS.map((slot) => ({ value: slot, label: slot })),
+                ...CLOSING_DAYS.map((day) => ({ value: day, label: `${day}締め` })),
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>選択肢が1つだけ</CardTitle>
+            <CardDescription>
+              一度選ぶと解除できない。選択の取り消しが要るなら Checkbox、即時に効く オン・オフなら
+              Switch が正しい。1件のラジオを置いてしまう事故は、この見え方を 知らないまま起きる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RadioGroup
+              name="verification"
+              options={[
+                {
+                  value: "verified",
+                  label: "本人確認済みとして登録する",
+                  description: "解除するには管理者への申請が必要です",
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>FormField · 必須とエラー</CardTitle>
+            <CardDescription>
+              radiogroup は widget なので、aria-invalid / aria-errormessage / aria-required
+              まで含めた検証の配線を FormField がそのまま渡せる。エラー文は role=alert で
+              読み上げられる。readOnly は RadioGroup に無く、変更させない群は disabled で表す。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="closing-day" label="締め日" required error="締め日を選択してください">
+                <RadioGroup
+                  id="closing-day"
+                  name="closing_day"
+                  orientation="horizontal"
+                  options={CLOSING_DAYS.map((day) => ({ value: day, label: day }))}
+                />
+              </FormField>
+              <FormField
+                id="tax-rounding"
+                label="消費税の端数処理"
+                helper="取引先との契約に合わせて選びます"
+              >
+                <RadioGroup
+                  id="tax-rounding"
+                  name="tax_rounding"
+                  defaultValue="floor"
+                  orientation="horizontal"
+                  options={[
+                    { value: "round", label: "四捨五入" },
+                    { value: "floor", label: "切り捨て" },
+                    { value: "ceil", label: "切り上げ" },
+                  ]}
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Controlled · named · disabled</CardTitle>

package/docs/data-entry/switch.tsx

@@ -1,13 +1,38 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Field, Switch } from "@godxjp/ui/data-entry";
+import { useState } from "react";
+import { CircleHelp } from "lucide-react";
+
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ListRow,
+} from "@godxjp/ui/data-display";
+import { Field, Label, Switch } from "@godxjp/ui/data-entry";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@godxjp/ui/feedback";
+import { Button, Icon } from "@godxjp/ui/general";
 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.
+ * with the hidden form input + description; put it in ListRow's `trailing` when
+ * the settings row wants the toggle at the END of the line. Composed only from
+ * real @godxjp/ui components.
  */
 export default function Demo() {
+  // 公開設定は保存に往復が要る。loading 中のトグルは値を変えずに要求だけを拒否する。
+  const [published, setPublished] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const savePublished = (next: boolean) => {
+    setSaving(true);
+    window.setTimeout(() => {
+      setPublished(next);
+      setSaving(false);
+    }, 1200);
+  };
+
   return (
     <PageContainer title="Switch" subtitle="Boolean toggle · wrap in Field for a labelled row">
       <Flex direction="col" gap="lg">
@@ -35,6 +60,187 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>設定セクション · ListRow の trailing に置く</CardTitle>
+            <CardDescription>
+              設定画面の1行は「見出しと説明が左、トグルが右端」。Field は制御を先頭に置くので
+              この並びにはならない。ListRow の trailing に Switch を入れ、title を Label htmlFor
+              にして紐づける。これが無いと、行ごとにトグル位置が揃わず目で追えなくなる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ListRow
+              align="start"
+              overflow="wrap"
+              title={<Label htmlFor="set-2fa">二要素認証</Label>}
+              description="ログイン時にワンタイムコードの入力を求めます。"
+              trailing={<Switch id="set-2fa" defaultChecked />}
+            />
+            <ListRow
+              align="start"
+              overflow="wrap"
+              title={
+                <Label htmlFor="set-ocr">
+                  レシート OCR
+                  <Badge as="span" tone="info">
+                    ベータ
+                  </Badge>
+                </Label>
+              }
+              description="添付画像から金額と日付を読み取って仕訳の下書きを作ります。"
+              trailing={<Switch id="set-ocr" />}
+            />
+            <ListRow
+              align="start"
+              overflow="wrap"
+              title={<Label htmlFor="set-publish">取引先ポータルへの公開</Label>}
+              description="保存に数秒かかります。通信中は loading のまま操作を受け付けません。"
+              trailing={
+                <Switch
+                  id="set-publish"
+                  checked={published}
+                  onCheckedChange={savePublished}
+                  loading={saving}
+                />
+              }
+            />
+            <ListRow
+              align="start"
+              overflow="wrap"
+              title={<Label htmlFor="set-lock">会計期間のロック</Label>}
+              description="決算確定済みのため解除できません。管理者に依頼してください。"
+              trailing={<Switch id="set-lock" disabled defaultChecked />}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ラベルの長さ · 2文字と3行が同じ列に並ぶ</CardTitle>
+            <CardDescription>
+              同じ設定群に2文字の見出しと3行に折り返す見出しが混ざる。つまみが1行目の中心に
+              留まるかはここでしか分からない。揃っていないと、長い行だけトグルが沈んで見える。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Field id="sw-len-short" label="税" description="一覧の金額を税抜で表示します">
+                <Switch id="sw-len-short" defaultChecked />
+              </Field>
+              <Field
+                id="sw-len-long"
+                label="請求書の発行時に、取引先の経理担当窓口へ PDF を自動送付し、送付ログを電子帳簿保存法の要件に従って7年間保管する"
+                description="送付先が未登録の取引先はスキップし、月次レポートに一覧で残します"
+              >
+                <Switch id="sw-len-long" />
+              </Field>
+              <Field id="sw-len-mid" label="自動保存" description="30秒ごとに下書きを保存します">
+                <Switch id="sw-len-mid" defaultChecked />
+              </Field>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>状態の一覧</CardTitle>
+            <CardDescription>
+              オフ / オン / 無効 / 無効かつオン / 保存中 / 不正。readOnly と indeterminate は Switch
+              に存在しない。読み取り専用は disabled で表し、中間状態が要るなら Checkbox の
+              indeterminate を使う。どれが操作できる行なのか、並べないと判別できない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Field id="sw-state-off" label="オフ" description="既定値">
+                <Switch id="sw-state-off" />
+              </Field>
+              <Field id="sw-state-on" label="オン" description="defaultChecked">
+                <Switch id="sw-state-on" defaultChecked />
+              </Field>
+              <Field id="sw-state-disabled" label="無効" description="権限がありません">
+                <Switch id="sw-state-disabled" disabled />
+              </Field>
+              <Field
+                id="sw-state-disabled-on"
+                label="無効かつオン"
+                description="上位の設定で固定されています"
+              >
+                <Switch id="sw-state-disabled-on" disabled defaultChecked />
+              </Field>
+              <Field id="sw-state-loading" label="保存中" description="aria-busy / aria-disabled">
+                <Switch id="sw-state-loading" loading defaultChecked />
+              </Field>
+              {/* 不正状態は Field の error スロットが持つ。role=alert のメッセージを出し、
+                  制御に aria-invalid / aria-errormessage / aria-describedby を配線する。
+                  description と error は競合せず、上下に積む。 */}
+              <Field
+                id="sw-state-invalid"
+                label="電子帳簿保存に対応する"
+                description="保存先を設定すると有効にできます"
+                error="保存先のストレージが未設定のため有効にできません。"
+              >
+                <Switch id="sw-state-invalid" />
+              </Field>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ラベル脇の補助 · labelAddon</CardTitle>
+            <CardDescription>
+              Badge のような非対話の印は label に直接置ける。押せる補助は labelAddon に渡す。 label
+              は制御を指す本物の &lt;label htmlFor&gt; なので、その中に入れたボタンは
+              押した瞬間にトグルを反転させる。labelAddon は label の外の兄弟として行内に並ぶ。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {/* 非対話の addon は label の中で足りる。Label は ui-label の gap を持つ。 */}
+              <Field
+                id="sw-addon-badge"
+                label={
+                  <>
+                    自動仕訳
+                    <Badge as="span" tone="info">
+                      ベータ
+                    </Badge>
+                  </>
+                }
+                description="学習済みの仕訳パターンから勘定科目を推定します"
+              >
+                <Switch id="sw-addon-badge" defaultChecked />
+              </Field>
+              {/* 押せる補助は labelAddon。label の外にあるので押してもトグルは動かない。 */}
+              <Field
+                id="sw-addon-help"
+                label="源泉徴収の自動計算"
+                description="報酬の支払時に源泉徴収額を自動で行に足します"
+                labelAddon={
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        aria-label="源泉徴収の自動計算について"
+                      >
+                        <Icon as={CircleHelp} size="sm" tone="muted" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      税率は支払先の区分と支払額から決まります。確定値は請求書の明細に残ります。
+                    </TooltipContent>
+                  </Tooltip>
+                }
+              >
+                <Switch id="sw-addon-help" />
+              </Field>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>size · sm / md</CardTitle>

package/docs/data-entry/upload-crop-dialog.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useState } from "react";
 
 import {
   Avatar,
@@ -11,7 +11,7 @@ import {
   CardTitle,
 } from "@godxjp/ui/data-display";
 import { Upload, UploadCropDialog } from "@godxjp/ui/data-entry";
-import { Button, Text } from "@godxjp/ui/general";
+import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -31,7 +31,6 @@ export default function Demo() {
   const [cropFile, setCropFile] = useState<File | null>(null);
   const [avatar, setAvatar] = useState<string | null>(null);
   const [lastResult, setLastResult] = useState<string | null>(null);
-  const pickerRef = useRef<HTMLInputElement>(null);
 
   return (
     <PageContainer title="UploadCropDialog" subtitle="切り抜きだけを単体で使う場合">
@@ -46,31 +45,31 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
-              <Flex direction="row" gap="md" align="center" wrap>
-                <Avatar size="lg">
-                  {avatar ? <AvatarImage src={avatar} alt="切り抜いたプロフィール写真" /> : null}
-                  <AvatarFallback>田</AvatarFallback>
-                </Avatar>
-                <Button onClick={() => pickerRef.current?.click()}>写真を選ぶ</Button>
-              </Flex>
+              <Avatar size="lg">
+                {avatar ? <AvatarImage src={avatar} alt="切り抜いたプロフィール写真" /> : null}
+                <AvatarFallback>田</AvatarFallback>
+              </Avatar>
 
-              {/* The picker is the CONSUMER's, not the dialog's — that is the whole point of using
-                  this component standalone. It is hidden because the Button above is the affordance;
-                  a visible raw control beside a godx Button would be two controls for one job. */}
-              <input
-                ref={pickerRef}
-                type="file"
+              {/* The picker is the PAGE's, not the dialog's — that is the whole point of using this
+                  component standalone. It is `Upload variant="button"` rather than a raw
+                  <input type="file">: rule §3 forbids a raw control in an example, because a
+                  consumer copies what they see. `onUpload` hands back the File, which is exactly
+                  what UploadCropDialog wants. */}
+              <Upload
+                variant="button"
                 accept="image/*"
-                className="sr-only"
-                aria-hidden
-                tabIndex={-1}
-                onChange={(event) => {
-                  const file = event.target.files?.[0] ?? null;
-                  setCropFile(file);
-                  // Clear the input so re-picking the SAME file fires change again.
-                  event.target.value = "";
+                maxCount={1}
+                onValueChange={(items) => {
+                  /* No onUpload here on purpose: this page wants the FILE, not an upload. The
+                     catalog states it outright — "without onUpload the File object sits in
+                     item.file until you manually process it", which is exactly the standalone
+                     crop case. */
+                  const picked = items[0]?.file ?? null;
+                  if (picked) setCropFile(picked);
                 }}
-              />
+              >
+                写真を選ぶ
+              </Upload>
 
               <Text size="sm" tone="muted" aria-live="polite">
                 {lastResult ?? "まだ切り抜いていません。"}