@godxjp/ui 31.31.8 → 32.0.0

package/docs/feedback/callout.tsx

@@ -1,220 +0,0 @@
-import { Callout } from "@godxjp/ui/feedback";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Prose,
-} from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Callout · the aside INSIDE a document body — the Alert primitive with the
- * structural axis fixed to variant="callout". It is the one variant that is NOT a
- * live region: role="note", so a page carrying three of them stays silent on load.
- * kind is the GitHub/Obsidian admonition preset (note/tip/important/warning/caution)
- * and resolves tone + glyph; tone and icon still override per instance. Geometry —
- * the leading rail, the prose insets, the block margin — is owned by the --callout-*
- * tokens, never consumer CSS.
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Callout"
-      subtitle="kind × tone × icon · the static aside in prose (the announcing presentations are Alert and Banner)"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>The five admonitions · every kind</CardTitle>
-            <CardDescription>
-              GitHub&apos;s documented set, which Obsidian&apos;s lower-case spelling maps onto
-              one-for-one. Each kind resolves a tone and its OWN glyph, so the five are told apart
-              without colour (WCAG 1.4.1). important takes the neutral tone on purpose. This system
-              has no purple role, and borrowing info would make it indistinguishable from note.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Callout kind="note">
-                <Callout.Title>補足</Callout.Title>
-                <Callout.Description>
-                  この設定は次回のログインから有効になります。
-                </Callout.Description>
-              </Callout>
-              <Callout kind="tip">
-                <Callout.Title>ヒント</Callout.Title>
-                <Callout.Description>
-                  ⌘K でどの画面からでもコマンドパレットを開けます。
-                </Callout.Description>
-              </Callout>
-              <Callout kind="important">
-                <Callout.Title>重要</Callout.Title>
-                <Callout.Description>
-                  組織の所有者だけが請求情報を変更できます。
-                </Callout.Description>
-              </Callout>
-              <Callout kind="warning">
-                <Callout.Title>注意</Callout.Title>
-                <Callout.Description>
-                  APIキーを再発行すると、既存のキーは直ちに無効になります。
-                </Callout.Description>
-              </Callout>
-              <Callout kind="caution">
-                <Callout.Title>警告</Callout.Title>
-                <Callout.Description>
-                  リポジトリを削除すると、Issue と Pull Request
-                  も一緒に削除されます。この操作は取り消せません。
-                </Callout.Description>
-              </Callout>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>In prose · what it is actually for</CardTitle>
-            <CardDescription>
-              A callout is part of the document being read, not an update to it, which is why it
-              carries role=&quot;note&quot; and never announces. Read this card with a screen
-              reader: the three callouts are reached in document order, and none of them interrupts.
-              An Alert in the same place would announce all three the moment the page loaded.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Prose>
-              <h3>APIキーの再発行</h3>
-              <p>
-                APIキーは組織ごとに発行され、すべての連携サービスで共有されます。ローテーションは四半期ごとを推奨しています。
-              </p>
-              <Callout kind="tip">
-                <Callout.Description>
-                  再発行の前に、連携中のサービス一覧を書き出しておくと復旧が早くなります。
-                </Callout.Description>
-              </Callout>
-              <p>
-                再発行すると新しいキーが即座に有効になり、古いキーは同じ瞬間に失効します。猶予期間はありません。
-              </p>
-              <Callout kind="warning">
-                <Callout.Title>停止時間が発生します</Callout.Title>
-                <Callout.Description>
-                  古いキーを使っている連携は、新しいキーを設定するまで認証に失敗します。
-                </Callout.Description>
-              </Callout>
-              <p>設定画面の「セキュリティ」タブから、いつでも再発行の履歴を確認できます。</p>
-              <Callout kind="note">
-                <Callout.Description>
-                  履歴は90日間保持されます。それより古い記録は監査ログからのみ参照できます。
-                </Callout.Description>
-              </Callout>
-            </Prose>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Title-less · a single paragraph</CardTitle>
-            <CardDescription>
-              Callout.Title is optional, exactly as on Alert. With one line of copy the glyph and
-              the rail carry the kind on their own, and the aside stays the height of its text.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Callout kind="note">
-                <Callout.Description>
-                  Rates are shown in the organization&apos;s billing currency, not the viewer&apos;s
-                  locale.
-                </Callout.Description>
-              </Callout>
-              <Callout kind="caution">
-                <Callout.Description>
-                  Exporting includes personal data; the download link expires after one hour.
-                </Callout.Description>
-              </Callout>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Overrides · tone and icon, per instance</CardTitle>
-            <CardDescription>
-              kind is a preset, not a second colour axis. Pass tone to recolour one aside without
-              changing which admonition it is, or icon={false} to drop the glyph entirely. The tone
-              vocabulary is the SAME one Alert and Banner use.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Callout kind="note" tone="muted">
-                <Callout.Title>Quieter than the default note</Callout.Title>
-                <Callout.Description>
-                  tone=&quot;muted&quot; keeps the note glyph and drops the colour to the neutral
-                  surface.
-                </Callout.Description>
-              </Callout>
-              <Callout kind="important" icon={false}>
-                <Callout.Title>Glyphless</Callout.Title>
-                <Callout.Description>
-                  icon={"{false}"} removes the leading glyph; the rail alone carries the tone.
-                </Callout.Description>
-              </Callout>
-              <Callout kind="tip" tone="info">
-                <Callout.Title>A tip in the note colour</Callout.Title>
-                <Callout.Description>
-                  The lightbulb stays, so this is still readable as a tip without relying on the
-                  hue.
-                </Callout.Description>
-              </Callout>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Long JA / EN / VI copy · 390px wrapping</CardTitle>
-            <CardDescription>
-              The text column wraps inside min-width 0 and the rail stays on the START edge in both
-              directions (logical properties throughout). Narrow this frame to 390px: nothing clips
-              and nothing overflows horizontally.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Callout kind="important">
-                <Callout.Title>
-                  ご契約中のプランでは、組織あたりのAPIリクエスト数に上限が設定されており、上限を超えた分は翌月の請求に自動的に加算されます
-                </Callout.Title>
-                <Callout.Description>
-                  現在の消費量は請求ダッシュボードで確認できます。上限の引き上げをご希望の場合は、担当者にご連絡ください。
-                </Callout.Description>
-              </Callout>
-              <Callout kind="caution">
-                <Callout.Title>
-                  Deleting an organization removes every project, dataset and audit record it owns,
-                  and this cannot be undone by support
-                </Callout.Title>
-                <Callout.Description>
-                  Members lose access immediately. Export anything you need to keep before you
-                  confirm. The deletion runs as soon as the dialog closes.
-                </Callout.Description>
-              </Callout>
-              <Callout kind="tip">
-                <Callout.Title>
-                  Bạn có thể gán vai trò cho cả một nhóm thay vì từng thành viên, và mọi thay đổi về
-                  thành viên của nhóm sẽ tự động áp dụng
-                </Callout.Title>
-                <Callout.Description>
-                  Cách này giữ cho danh sách phân quyền ngắn gọn và dễ kiểm toán hơn nhiều so với
-                  việc cấp quyền riêng lẻ.
-                </Callout.Description>
-              </Callout>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/feedback/danger-confirm.tsx

@@ -1,91 +0,0 @@
-import { useState } from "react";
-import { AlertDialog } from "@godxjp/ui/feedback";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Button } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * DangerConfirm recipe (godxui#193) — high-stakes deletion built on the AlertDialog preset.
- * No new component: `challenge` gates the confirm button behind an exact typed slug, and `stepUp`
- * runs an async passkey / 2FA re-auth before onConfirm fires. Both force the destructive shape
- * (button + leading status glyph, untinted surface — antd `Modal.confirm` parity).
- * Mirrors DXS SCR-203 (org delete by slug) and SCR-209 (refund with step-up).
- */
-export default function Demo() {
-  const [orgOpen, setOrgOpen] = useState(false);
-  const [refundOpen, setRefundOpen] = useState(false);
-
-  return (
-    <PageContainer
-      title="DangerConfirm"
-      subtitle="typed-challenge + step-up destructive confirmation · AlertDialog recipe"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Organization delete · typed slug challenge</CardTitle>
-            <CardDescription>
-              The confirm button stays disabled until the operator types the exact organization slug
-              (<code>acme-inc</code>). A typed challenge always forces the destructive shape: the
-              destructive confirm button and antd&rsquo;s leading status glyph. The header surface
-              stays untinted — the glyph is the signal, exactly as <code>Modal.confirm</code> does
-              it.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button variant="destructive" size="sm" onClick={() => setOrgOpen(true)}>
-              Delete organization
-            </Button>
-            <AlertDialog
-              open={orgOpen}
-              onOpenChange={setOrgOpen}
-              title="Delete “Acme Inc.” permanently?"
-              description="This removes every workspace, member and billing record. This cannot be undone."
-              challenge="acme-inc"
-              confirmLabel="Delete organization"
-              cancelLabel="Keep organization"
-              onConfirm={async () => {
-                await new Promise<void>((r) => setTimeout(r, 800));
-                setOrgOpen(false);
-              }}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Refund · step-up re-authentication</CardTitle>
-            <CardDescription>
-              A privileged action guarded by <code>stepUp</code>: the async passkey / 2FA check runs
-              first, the button shows a verifying state, and a failed check keeps the dialog open
-              with an announced error. onConfirm only fires after step-up resolves truthy.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button variant="destructive" size="sm" onClick={() => setRefundOpen(true)}>
-              Issue full refund
-            </Button>
-            <AlertDialog
-              open={refundOpen}
-              onOpenChange={setRefundOpen}
-              title="Issue a full refund of ¥48,000?"
-              description="The charge is reversed immediately and the customer is notified."
-              confirmLabel="Refund now"
-              cancelLabel="Cancel"
-              variant="destructive"
-              stepUp={async () => {
-                // A real consumer triggers a passkey / WebAuthn or TOTP challenge here.
-                await new Promise<void>((r) => setTimeout(r, 600));
-                return true;
-              }}
-              onConfirm={async () => {
-                await new Promise<void>((r) => setTimeout(r, 500));
-                setRefundOpen(false);
-              }}
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/feedback/dialog-touch.tsx

@@ -1,24 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-  DialogTrigger,
-} from "@godxjp/ui/feedback";
-import { Button } from "@godxjp/ui/general";
-import { PageContainer } from "@godxjp/ui/layout";
-export default function Demo() {
-  return (
-    <PageContainer title="Dialog touch" subtitle="Touch target and close behavior verification">
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button>Open touch dialog</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogTitle>Touch dialog</DialogTitle>
-          <DialogDescription>Touch target and close behavior verification.</DialogDescription>
-        </DialogContent>
-      </Dialog>
-    </PageContainer>
-  );
-}