@godxjp/ui 31.31.7 → 32.0.0

package/docs/data-entry/upload.tsx

@@ -1,310 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import {
-  Form,
-  Upload,
-  type UploadFileItem,
-  type UploadRequestContext,
-} from "@godxjp/ui/data-entry";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { FilePlus2, Plus } from "lucide-react";
-
-/**
- * Upload — drag-and-drop / button / avatar / picture file uploader (6 variants).
- * Wire onUpload to your media-service; call collectUploadCommitActions on submit.
- * UploadCropDialog is embedded internally by variant="avatar-crop" — not a public import.
- * Composed only from real @godxjp/ui components.
- */
-
-/** Simulated transport: progress, abort, and retry remain observable in the preview. */
-async function demoUpload(file: File, _item: UploadFileItem, context: UploadRequestContext) {
-  for (let percent = 0; percent <= 100; percent += 20) {
-    await new Promise((resolve) => setTimeout(resolve, 180));
-    context.signal.throwIfAborted();
-    context.onProgress(percent);
-  }
-  if (file.name.startsWith("fail")) throw new Error("アップロードに失敗しました。再試行できます。");
-  return { mediaId: crypto.randomUUID() };
-}
-
-export default function Demo() {
-  const [submittedFiles, setSubmittedFiles] = useState<string[]>([]);
-  const [dropzoneItems, setDropzoneItems] = useState<UploadFileItem[]>([]);
-  const [buttonItems, setButtonItems] = useState<UploadFileItem[]>([]);
-  const [triggerIconItems, setTriggerIconItems] = useState<UploadFileItem[]>([]);
-  const [pictureCardItems, setPictureCardItems] = useState<UploadFileItem[]>([]);
-  const [pictureItem, setPictureItem] = useState<UploadFileItem[]>([]);
-  const [avatarItem, setAvatarItem] = useState<UploadFileItem[]>([]);
-  const [avatarCropItem, setAvatarCropItem] = useState<UploadFileItem[]>([]);
-  /** A test-result drawer: one screenshot, one machine-readable result, one log, one archive. */
-  const mixedItems: UploadFileItem[] = [
-    {
-      uid: "mixed-screenshot",
-      name: "screenshot.png",
-      size: 184 * 1024,
-      mimeType: "image/png",
-      status: "done",
-      previewUrl:
-        "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72'><rect width='72' height='72' fill='%23c9c6bd'/><circle cx='26' cy='26' r='9' fill='%238a877d'/></svg>",
-    },
-    // Server media whose thumbnail has not been generated yet: still an image, still marked as one.
-    { uid: "mixed-original", name: "photo-original.png", size: 4 * 1024 * 1024, status: "done" },
-    { uid: "mixed-result", name: "result.json", size: 12 * 1024, status: "done" },
-    { uid: "mixed-log", name: "run.txt", size: 3 * 1024, status: "done" },
-    { uid: "mixed-bundle", name: "evidence.zip", size: 2 * 1024 * 1024, status: "done" },
-    { uid: "mixed-spec", name: "spec.pdf", size: 640 * 1024, status: "done" },
-    { uid: "mixed-dump", name: "device-dump", size: 96 * 1024, status: "done" },
-  ];
-  const failedItems: UploadFileItem[] = [
-    {
-      uid: "failed-invoice",
-      name: "invoice-too-large.pdf",
-      size: 25 * 1024 * 1024,
-      mimeType: "application/pdf",
-      status: "error",
-      error: "20 MB 以下のファイルを選択してください",
-    },
-  ];
-
-  return (
-    <PageContainer
-      title="Upload"
-      subtitle="ファイルアップロード · 6バリアント（dropzone / button / picture-card / picture / avatar / avatar-crop）"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Multipart form</CardTitle>
-            <CardDescription>
-              選択・ドロップ・貼り付けしたファイルをフォームでまとめて送信します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form
-              onReset={() => setSubmittedFiles([])}
-              onSubmit={(event) => {
-                event.preventDefault();
-                const data = new FormData(event.currentTarget);
-                setSubmittedFiles(
-                  data
-                    .getAll("attachments[]")
-                    .filter((value): value is File => value instanceof File)
-                    .map((value) => value.name),
-                );
-              }}
-            >
-              <Upload name="attachments[]" pastable maxCount={3} />
-              <Button type="submit">添付ファイルを確認</Button>
-              <Button type="reset" variant="outline">
-                リセット
-              </Button>
-              <Text>{submittedFiles.join("、")}</Text>
-            </Form>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Dropzone</CardTitle>
-            <CardDescription>
-              ドラッグ＆ドロップエリア · PDF・Excel などの書類添付に使用。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Upload
-              variant="dropzone"
-              value={dropzoneItems}
-              onValueChange={setDropzoneItems}
-              accept=".pdf,.xlsx,.csv"
-              pastable
-              maxCount={5}
-              maxSizeBytes={20 * 1024 * 1024}
-              onUpload={demoUpload}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>List type · 添付ファイル一覧</CardTitle>
-            <CardDescription>
-              listType は variant と独立した軸です。dropzone のまま listType=&quot;picture&quot;
-              にすると、画像はサムネイル、それ以外はファイル種別のアイコンで並びます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Upload
-              variant="dropzone"
-              listType="picture"
-              value={mixedItems}
-              onValueChange={() => {}}
-              onDownload={() => {}}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Error and recovery</CardTitle>
-            <CardDescription>
-              失敗したファイルは再試行できます。処理中のファイルはキャンセルできます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Upload variant="button" value={failedItems} onValueChange={() => {}} removable />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Disabled · populated</CardTitle>
-            <CardDescription>
-              権限不足時も既存ファイル名を保ったまま操作を無効化する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Upload variant="button" value={failedItems} onValueChange={() => {}} disabled />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Button</CardTitle>
-            <CardDescription>
-              コンパクトなボタン形式 · CSVインポートなどの管理画面向け。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Upload
-              variant="button"
-              value={buttonItems}
-              onValueChange={setButtonItems}
-              accept=".csv"
-              onUpload={demoUpload}
-            >
-              CSVをインポート
-            </Upload>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>triggerIcon · 「新規作成」がアップロードのとき</CardTitle>
-            <CardDescription>
-              variant=&quot;button&quot;
-              のトリガーが描くグリフを差し替える。コンポーネントを渡す（triggerIcon=&#123;Plus&#125;、
-              要素ではない）。triggerVariant
-              は強弱しか変えられないので、実体はアップロードでも「新規作成」として並ぶボタンは
-              これまで矢印を背負うしかなかった。クラスと余白と aria-hidden
-              はライブラリ側が持ったままなので、差し替えても大きさは --upload-row-icon-size
-              のまま、読み上げにも出ない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="md" wrap align="center">
-              <Upload
-                variant="button"
-                triggerIcon={Plus}
-                triggerVariant="default"
-                value={triggerIconItems}
-                onValueChange={setTriggerIconItems}
-                accept=".pdf"
-                onUpload={demoUpload}
-              >
-                資料を追加
-              </Upload>
-              <Upload
-                variant="button"
-                triggerIcon={FilePlus2}
-                triggerSize="icon-sm"
-                triggerVariant="ghost"
-                value={[]}
-                onValueChange={() => {}}
-                aria-label="請求書を添付"
-              />
-              <Upload variant="button" value={[]} onValueChange={() => {}}>
-                既定のグリフ
-              </Upload>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Picture Card</CardTitle>
-            <CardDescription>
-              96×96 サムネイルグリッド · 商品ギャラリーや画像一覧に使用。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Upload
-              variant="picture-card"
-              value={pictureCardItems}
-              onValueChange={setPictureCardItems}
-              accept="image/*"
-              maxCount={6}
-              onUpload={demoUpload}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Picture</CardTitle>
-            <CardDescription>
-              単一画像プレビュー · コンテンツのカバー画像選択に使用。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Upload
-              variant="picture"
-              value={pictureItem}
-              onValueChange={setPictureItem}
-              accept="image/*"
-              maxCount={1}
-              onUpload={demoUpload}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Avatar</CardTitle>
-            <CardDescription>円形の単一画像ピッカー · ユーザーアイコン変更に使用。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Upload
-              variant="avatar"
-              value={avatarItem}
-              onValueChange={setAvatarItem}
-              accept="image/*"
-              onUpload={demoUpload}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Avatar Crop</CardTitle>
-            <CardDescription>
-              アバター選択後にトリミングダイアログを開く。UploadCropDialog は
-              内部モーダルとして自動で埋め込まれるため、個別インポート不要。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Upload
-              variant="avatar-crop"
-              value={avatarCropItem}
-              onValueChange={setAvatarCropItem}
-              accept="image/*"
-              maxSizeBytes={5 * 1024 * 1024}
-              onUpload={demoUpload}
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/feedback/alert-dialog.tsx

@@ -1,270 +0,0 @@
-import { useState } from "react";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogRoot,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@godxjp/ui/feedback";
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/** Every branch of AlertDialogHeader's `tone`, in the order the vocabulary declares them. */
-const headerTones = [
-  "default",
-  "success",
-  "warning",
-  "destructive",
-  "info",
-  "muted",
-  "neutral",
-] as const;
-
-/**
- * AlertDialog · canonical destructive-confirm modal. NOT a free-form Dialog.
- * Flat prop API: title (required), description, confirmLabel, cancelLabel,
- * variant="destructive", confirmPhrase for high-friction ops, onConfirm async,
- * pending while work is running.
- *
- * AlertDialogRoot is the compound counterpart: same role="alertdialog" semantics,
- * bespoke content. Mirrors DialogRoot, which the flat `Dialog` export wraps.
- */
-export default function Demo() {
-  const [deleteOpen, setDeleteOpen] = useState(true);
-  const [closeOpen, setCloseOpen] = useState(false);
-  const [voidOpen, setVoidOpen] = useState(false);
-  const [phraseOpen, setPhraseOpen] = useState(false);
-  const [toneOpen, setToneOpen] = useState(false);
-  const [headerTone, setHeaderTone] = useState<(typeof headerTones)[number]>("default");
-
-  return (
-    <PageContainer
-      title="AlertDialog"
-      subtitle="destructive confirm modal · delete, void, archive, irreversible actions"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Destructive delete (pre-opened)</CardTitle>
-            <CardDescription>
-              Flat prop API: title (required) + description + confirmLabel + variant. onConfirm may
-              be async; the dialog stays open until it resolves. Never use Dialog for destructive
-              confirms.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="md" align="center">
-              <Button variant="destructive" size="sm" onClick={() => setDeleteOpen(true)}>
-                請求書を削除
-              </Button>
-            </Flex>
-            <AlertDialog
-              open={deleteOpen}
-              onOpenChange={setDeleteOpen}
-              title="請求書 #INV-2024-0188 を削除しますか？"
-              description="この操作は元に戻せません。関連する仕訳データもすべて削除されます。"
-              confirmLabel="削除する"
-              cancelLabel="キャンセル"
-              variant="destructive"
-              onConfirm={async () => {
-                await new Promise<void>((r) => setTimeout(r, 800));
-                setDeleteOpen(false);
-              }}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Neutral confirm (the other variant branch)</CardTitle>
-            <CardDescription>
-              variant has two branches. default is the branch for a consequential but reversible
-              step: the header band stays neutral and the confirm button keeps the primary style, so
-              the dialog reads as a checkpoint rather than a warning. Reach for destructive only
-              when the action cannot be undone.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button size="sm" onClick={() => setCloseOpen(true)}>
-              月次締めを確定
-            </Button>
-            <AlertDialog
-              open={closeOpen}
-              onOpenChange={setCloseOpen}
-              title="2026年7月度の月次締めを確定しますか？"
-              description="確定後は仕訳の編集が制限されます。管理者はいつでも締めを解除できます。"
-              confirmLabel="確定する"
-              cancelLabel="あとで"
-              variant="default"
-              onConfirm={() => setCloseOpen(false)}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Void / cancel action</CardTitle>
-            <CardDescription>
-              Same pattern for voiding an invoice or cancelling a batch job: destructive variant
-              with a clear confirmLabel.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button variant="outline" size="sm" onClick={() => setVoidOpen(true)}>
-              請求書を取消
-            </Button>
-            <AlertDialog
-              open={voidOpen}
-              onOpenChange={setVoidOpen}
-              title="請求書 #INV-2024-0099 を取り消しますか？"
-              description="取消後は再発行が必要になります。"
-              confirmLabel="取消する"
-              cancelLabel="戻る"
-              variant="destructive"
-              onConfirm={() => setVoidOpen(false)}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>High-friction: confirmPhrase</CardTitle>
-            <CardDescription>
-              Pass confirmPhrase to require the user to type a specific string before the confirm
-              button activates. Use for truly irreversible bulk operations.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button variant="destructive" size="sm" onClick={() => setPhraseOpen(true)}>
-              全データを削除
-            </Button>
-            <AlertDialog
-              open={phraseOpen}
-              onOpenChange={setPhraseOpen}
-              title="すべてのデータを完全に削除しますか？"
-              description={'確認のため下のボックスに "DELETE" と入力してください。'}
-              confirmLabel="完全に削除する"
-              cancelLabel="キャンセル"
-              variant="destructive"
-              confirmPhrase="DELETE"
-              onConfirm={() => setPhraseOpen(false)}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Compound composition (AlertDialogRoot)</CardTitle>
-            <CardDescription>
-              AlertDialogRoot is the compound counterpart of the flat preset above, and the mirror
-              of DialogRoot. It supplies the alertdialog context that AlertDialogTitle,
-              AlertDialogDescription, AlertDialogAction and AlertDialogCancel read, so a bespoke
-              confirmation composes from the public API alone. Structure: AlertDialogRoot &gt;
-              AlertDialogTrigger + AlertDialogPortal &gt; AlertDialogOverlay + AlertDialogContent
-              &gt; AlertDialogHeader &gt; AlertDialogTitle. Focus trap, focus restoration and the
-              modal role=alertdialog semantics stay Radix-owned. Reach for the flat AlertDialog
-              first; use the Root only when the confirm body needs content the preset does not
-              cover.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AlertDialogRoot>
-              <AlertDialogTrigger asChild>
-                <Button variant="outline" size="sm">
-                  支払を確定
-                </Button>
-              </AlertDialogTrigger>
-              <AlertDialogPortal>
-                <AlertDialogOverlay />
-                <AlertDialogContent className="max-w-md">
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>2026年7月分の支払を確定しますか？</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      確定すると振込データが生成され、取消には管理者の承認が必要になります。
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <Text size="sm" tone="muted">
-                    対象 48 件・合計 12,480,000 円。確定後も明細の閲覧はできます。
-                  </Text>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>戻る</AlertDialogCancel>
-                    <AlertDialogAction>確定する</AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialogPortal>
-            </AlertDialogRoot>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>AlertDialogHeader tone band (every branch)</CardTitle>
-            <CardDescription>
-              AlertDialogHeader takes the same prop-driven form as DialogHeader: title, subtitle and
-              an extra slot, plus tone. tone tints only the header band and leaves the text at the
-              foreground colour, so a confirmation never turns into a loud solid fill. default
-              paints no band at all; muted and neutral deliberately share the same quiet band. This
-              branch matrix only became reachable from the public API once AlertDialogRoot shipped.
-              Pick a branch to open the same alertdialog with that header.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" gap="sm" wrap>
-                {headerTones.map((tone) => (
-                  <Button
-                    key={tone}
-                    variant="outline"
-                    size="sm"
-                    onClick={() => {
-                      setHeaderTone(tone);
-                      setToneOpen(true);
-                    }}
-                  >
-                    {tone}
-                  </Button>
-                ))}
-              </Flex>
-              <AlertDialogRoot open={toneOpen} onOpenChange={setToneOpen}>
-                <AlertDialogPortal>
-                  <AlertDialogOverlay />
-                  <AlertDialogContent className="max-w-md">
-                    <AlertDialogHeader
-                      tone={headerTone}
-                      title="取込結果を確認してください"
-                      subtitle={`見出し帯は tone="${headerTone}" で描画しています。`}
-                      extra={<Badge tone={headerTone}>{headerTone}</Badge>}
-                    />
-                    <Text size="sm">
-                      帯の色だけが tone
-                      に追従し、見出しと本文の文字色は変わりません。取込済みの仕訳は 132 件、保留は
-                      4 件です。
-                    </Text>
-                    <AlertDialogFooter>
-                      <AlertDialogCancel>閉じる</AlertDialogCancel>
-                    </AlertDialogFooter>
-                  </AlertDialogContent>
-                </AlertDialogPortal>
-              </AlertDialogRoot>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}