@godxjp/ui 31.31.7 → 32.0.0

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

@@ -1,316 +0,0 @@
-import { useState } from "react";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Form, 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.
- * Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  const [controlled, setControlled] = useState("email");
-  const [plan, setPlan] = useState("business");
-
-  return (
-    <PageContainer
-      title="RadioGroup"
-      subtitle="Mutually-exclusive choices, all visible · options array"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Vertical</CardTitle>
-            <CardDescription>The default stacked layout.</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <RadioGroup
-              defaultValue="taxed"
-              options={[
-                { value: "taxed", label: "税抜" },
-                { value: "included", label: "税込" },
-                { value: "exempt", label: "非課税" },
-              ]}
-            />
-          </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>
-            <Form>
-              <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>
-            </Form>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Controlled · named · disabled</CardTitle>
-            <CardDescription>
-              Controlled callback and native form name with disabled options.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <RadioGroup
-              className="contract-radio-group"
-              name="notification_channel"
-              value={controlled}
-              onValueChange={setControlled}
-              options={[
-                { value: "email", label: "メール" },
-                { value: "sms", label: "SMS" },
-                { value: "push", label: "プッシュ", disabled: true },
-              ]}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Disabled group · custom children</CardTitle>
-            <CardDescription>
-              The children composition remains labelled and non-interactive.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <RadioGroup disabled defaultValue="locked">
-              <Field id="radio-locked" label="確定済み">
-                <RadioItem id="radio-locked" value="locked" />
-              </Field>
-            </RadioGroup>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Horizontal</CardTitle>
-            <CardDescription>orientation=“horizontal” for compact rows.</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <RadioGroup
-              defaultValue="round"
-              orientation="horizontal"
-              options={[
-                { value: "round", label: "四捨五入" },
-                { value: "floor", label: "切り捨て" },
-                { value: "ceil", label: "切り上げ" },
-              ]}
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/rating.tsx

@@ -1,91 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Form, FormField, Rating } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Rating — star-rating input (radiogroup internally). Controlled via
- * value/onValueChange. Use readOnly for displaying an average score.
- * Pass name for native form submission. Composed only from real @godxjp/ui
- * components.
- */
-export default function Demo() {
-  const [vendorScore, setVendorScore] = useState(0);
-  const [qualityScore, setQualityScore] = useState(4);
-
-  return (
-    <PageContainer
-      title="Rating"
-      subtitle="Star-rating input (radiogroup) — collecting reviews or displaying averages"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Controlled input</CardTitle>
-            <CardDescription>
-              Controlled via value/onValueChange. Keyboard accessible (radiogroup). Pass name= for
-              native form submission.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <Flex direction="col" gap="md">
-                <FormField id="vendor-rating" label="取引先評価">
-                  <Rating name="vendor_rating" value={vendorScore} onValueChange={setVendorScore} />
-                </FormField>
-                <FormField id="quality-rating" label="品質スコア">
-                  <Rating
-                    name="quality_score"
-                    value={qualityScore}
-                    onValueChange={setQualityScore}
-                    max={5}
-                  />
-                </FormField>
-              </Flex>
-            </Form>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Read-only display</CardTitle>
-            <CardDescription>
-              readOnly=true turns it into a display widget with no interaction. Use for showing
-              average scores.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <Flex direction="col" gap="md">
-                <FormField id="avg-payment" label="支払い信頼性 (平均)">
-                  <Rating value={4} readOnly />
-                </FormField>
-                <FormField id="avg-response" label="対応速度 (平均)">
-                  <Rating value={3} readOnly />
-                </FormField>
-                <FormField id="avg-accuracy" label="請求正確性 (平均)">
-                  <Rating value={5} readOnly />
-                </FormField>
-              </Flex>
-            </Form>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Custom max stars</CardTitle>
-            <CardDescription>
-              max= controls the number of stars rendered. Default is 5.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="priority-rating" label="優先度 (10段階)">
-              <Rating name="priority" defaultValue={7} max={10} />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

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

@@ -1,209 +0,0 @@
-import { useState } from "react";
-import { Shield, User } from "lucide-react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { RecordPicker } from "@godxjp/ui/data-entry";
-import { Icon, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * RecordPicker — the three shapes a real consumer needed (gh#932).
- *
- * Every case on this page is one that shipped WRONG in an app before the component existed, and
- * the page is arranged so the failure each one fixes is visible: a dropdown that cannot be
- * searched, two kinds of thing in one field, and a free-text key that only failed validation
- * after save.
- */
-
-const SMALL = [
-  { value: "u1", label: "Alex Tran" },
-  { value: "u2", label: "Bea Nakamura" },
-  { value: "u3", label: "Cam Ito" },
-];
-
-/** 800 people is the case the report is actually about; a dropdown cannot be the answer. */
-const PEOPLE = Array.from({ length: 800 }, (_, i) => ({
-  value: `u${i}`,
-  label: `Member ${String(i).padStart(3, "0")}`,
-  sublabel: `member${i}@example.co.jp`,
-}));
-
-const ROLES = [
-  { value: "r-admin", label: "Administrator", group: "Roles" },
-  { value: "r-review", label: "Reviewer", group: "Roles" },
-  { value: "r-observer", label: "Observer", group: "Roles" },
-];
-
-const ISSUES = Array.from({ length: 300 }, (_, i) => ({
-  value: `PKG-${i + 1}`,
-  label: `PKG-${i + 1}`,
-  sublabel: `Requirement ${i + 1} — imported from the spec sheet`,
-}));
-
-const delay = <T,>(value: T) => new Promise<T>((r) => setTimeout(() => r(value), 120));
-
-export default function Demo() {
-  const [small, setSmall] = useState<string | null>("u2");
-  const [owner, setOwner] = useState<string | null>("");
-  const [approvers, setApprovers] = useState<string[]>(["r-review"]);
-  const [issue, setIssue] = useState<string | null>("PKG-1");
-
-  return (
-    <PageContainer
-      title="RecordPicker"
-      subtitle="One control whose shape follows the size of the set — dropdown under the threshold, searchable dialog over it"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Under the threshold, it IS a Select</CardTitle>
-            <CardDescription>
-              Three people, so nothing is gained by a dialog. The same component renders Select —
-              same trigger, same panel, same search. Nothing here is a lookalike.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm" align="start">
-              <RecordPicker options={SMALL} value={small} onValueChange={(v) => setSmall(v as string)} />
-              <Text as="p" size="2xs" tone="muted" tabular>
-                value: {JSON.stringify(small)}
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Assigning an owner out of 800</CardTitle>
-            <CardDescription>
-              The case the report is about: this field was a dropdown with no search. `count` comes
-              from the server — the page of rows in hand says nothing about the set behind it. The
-              pinned “Unassigned” row is a value the record HOLDS, not an empty field.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm" align="start">
-              <RecordPicker
-                count={PEOPLE.length}
-                loadOptions={async ({ query, filters }) =>
-                  delay({
-                    options: PEOPLE.filter(
-                      (p) =>
-                        p.label.toLowerCase().includes(query.toLowerCase()) &&
-                        (!filters.scope || filters.scope === "project"),
-                    ).slice(0, 40),
-                  })
-                }
-                filters={[
-                  {
-                    name: "scope",
-                    label: "Scope",
-                    options: [
-                      { value: "project", label: "On this project" },
-                      { value: "all", label: "Everyone" },
-                    ],
-                  },
-                ]}
-                emptyOption={{ value: "", label: "Unassigned" }}
-                selectedOptions={[{ value: "", label: "Unassigned" }]}
-                value={owner}
-                onValueChange={(v) => setOwner(v as string)}
-                dialogTitle="Choose an owner"
-                notFoundContent="No one matches that name"
-              />
-              <Text as="p" size="2xs" tone="muted" tabular>
-                value: {JSON.stringify(owner)}
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Two kinds of thing in one field</CardTitle>
-            <CardDescription>
-              An approval step accepts a PERSON or a ROLE. They are two `group`s in one list rather
-              than two controls, and the option `icon` is what keeps the chips apart once chosen.
-              `multiple` commits on Confirm, so a mis-click is undone by Cancel.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm" align="start">
-              <RecordPicker
-                mode="multiple"
-                count={PEOPLE.length + ROLES.length}
-                loadOptions={async ({ query }) =>
-                  delay({
-                    options: [
-                      ...ROLES.filter((r) => r.label.toLowerCase().includes(query.toLowerCase())).map(
-                        (r) => ({ ...r, icon: <Icon as={Shield} size="sm" tone="muted" /> }),
-                      ),
-                      ...PEOPLE.filter((p) => p.label.toLowerCase().includes(query.toLowerCase()))
-                        .slice(0, 30)
-                        .map((p) => ({
-                          ...p,
-                          group: "Users",
-                          icon: <Icon as={User} size="sm" tone="muted" />,
-                        })),
-                    ],
-                  })
-                }
-                selectedOptions={ROLES}
-                value={approvers}
-                onValueChange={(v) => setApprovers(v as string[])}
-                dialogTitle="Choose approvers"
-              />
-              <Text as="p" size="2xs" tone="muted" tabular>
-                value: {JSON.stringify(approvers)}
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>A record, by key or by title</CardTitle>
-            <CardDescription>
-              This field used to be free text: you typed the key, and a wrong one failed with a 422
-              AFTER save. Searching both the key and the title, with the key shown beside it, means
-              the value cannot be wrong by the time it is submitted.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm" align="start">
-              <RecordPicker
-                count={ISSUES.length}
-                loadOptions={async ({ query, filters }) =>
-                  delay({
-                    options: ISSUES.filter(
-                      (o) =>
-                        (o.label + o.sublabel).toLowerCase().includes(query.toLowerCase()) &&
-                        (!filters.state || filters.state === "open"),
-                    ).slice(0, 40),
-                  })
-                }
-                filters={[
-                  {
-                    name: "state",
-                    label: "State",
-                    options: [
-                      { value: "open", label: "Open" },
-                      { value: "closed", label: "Closed" },
-                    ],
-                  },
-                ]}
-                selectedOptions={[{ value: "PKG-1", label: "PKG-1", sublabel: "Requirement 1" }]}
-                value={issue}
-                onValueChange={(v) => setIssue(v as string)}
-                dialogTitle="Choose a requirement"
-              />
-              <Text as="p" size="2xs" tone="muted" tabular>
-                value: {JSON.stringify(issue)}
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}