@godxjp/ui 31.31.7 → 32.0.0

package/docs/data-display/code-block.tsx

@@ -1,188 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  CodeBlock,
-} from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-const responseBody = `{
-  "data": {
-    "id": 2,
-    "key": "EXSELI-2",
-    "title": "見積画面で合計が更新されない",
-    "attachments": [
-      { "id": 7, "name": "trace.har", "size": 65536 },
-      { "id": 8, "name": "screenshot.png", "size": 240113 }
-    ]
-  }
-}`;
-
-const consoleLog = `[12:04:11.203] warn  Deprecated: estimate.total is read before hydrate()
-[12:04:11.209] error TypeError: Cannot read properties of undefined (reading 'total')
-    at EstimateSummary (estimate-summary.tsx:41:17)
-[12:04:11.210] info  retry 1/3`;
-
-const longHeader =
-  'report-to: {"endpoints":[{"url":"https:\\/\\/a.nel.cloudflare.com\\/report\\/v4?s=' +
-  "x".repeat(200) +
-  '"}],"group":"cf-nel","max_age":604800}';
-
-/**
- * CodeBlock — a block of preformatted text: request and response bodies, console output,
- * snippets. Wraps long lines by default and scrolls inside the block past `maxHeight`.
- * Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  return (
-    <PageContainer title="CodeBlock" subtitle="整形済みテキストのブロック · 折り返しと高さ上限">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Response body (maxHeight="sm")</CardTitle>
-            <CardDescription>
-              64 KB のレスポンスでもページを押し下げない。上限を超えるとブロック内でスクロールする。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <CodeBlock maxHeight="sm" language="json" aria-label="Response body">
-              {responseBody}
-            </CodeBlock>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Console (size="xs", maxHeight="md")</CardTitle>
-            <CardDescription>ログは xs で密に。行の折り返しは既定で有効。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <CodeBlock size="xs" maxHeight="md" aria-label="Console output">
-              {consoleLog}
-            </CodeBlock>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Long line: wrap (default) vs wrap={"{false}"}</CardTitle>
-            <CardDescription>
-              241 文字のヘッダー値。既定はカード内で折り返す。wrap=false は横スクロールになる
-              (maxHeight="lg" / "none")。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <CodeBlock size="sm" maxHeight="none" aria-label="Wrapped header">
-                {longHeader}
-              </CodeBlock>
-              <CodeBlock wrap={false} maxHeight="lg" aria-label="Unwrapped header">
-                {longHeader}
-              </CodeBlock>
-            </Flex>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Copyable (gh#1032)</CardTitle>
-            <CardDescription>
-              antd Typography&apos;s copyable, same name and semantics. The button sits in the
-              inline-end corner, the block reserves that column so no line runs under it, and the
-              copy is announced politely. Pass copyable.text to copy something other than the
-              block&apos;s text content; the button stays in its corner while the block scrolls.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <CodeBlock copyable language="bash" aria-label="Install command">
-                pnpm add @godxjp/ui
-              </CodeBlock>
-              <CodeBlock
-                copyable={{ tooltips: ["Copy response", "Copied"] }}
-                maxHeight="sm"
-                language="json"
-                aria-label="Response body with a copy button"
-              >
-                {responseBody}
-              </CodeBlock>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Syntax colour · the package owns the palette (gh#784)</CardTitle>
-            <CardDescription>
-              CodeBlock bundles no highlighter. Bring your own, then tag each span with
-              data-code-token and the package colours it. The twelve names are Shiki
-              createCssVariablesTheme&apos;s verbatim, so mapping is a rename rather than a
-              translation. Note what the consumer never writes: no style attribute, no palette
-              class. Every knob is a role-mirror, so this follows the theme into dark with no second
-              palette.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <CodeBlock language="ts" aria-label="Highlighted TypeScript">
-              <span data-code-token="comment">{"// resolve the active tenant\n"}</span>
-              <span data-code-token="keyword">export</span>{" "}
-              <span data-code-token="keyword">async</span>{" "}
-              <span data-code-token="keyword">function</span>{" "}
-              <span data-code-token="function">loadTenant</span>
-              <span data-code-token="punctuation">(</span>
-              <span data-code-token="parameter">slug</span>
-              <span data-code-token="punctuation">:</span>{" "}
-              <span data-code-token="constant">string</span>
-              <span data-code-token="punctuation">)</span>{" "}
-              <span data-code-token="punctuation">{"{"}</span>
-              {"\n  "}
-              <span data-code-token="keyword">const</span> res{" "}
-              <span data-code-token="punctuation">=</span>{" "}
-              <span data-code-token="keyword">await</span>{" "}
-              <span data-code-token="function">fetch</span>
-              <span data-code-token="punctuation">(</span>
-              <span data-code-token="string">{"`/api/tenants/"}</span>
-              <span data-code-token="string-expression">{"${slug}"}</span>
-              <span data-code-token="string">{"`"}</span>
-              <span data-code-token="punctuation">)</span>
-              <span data-code-token="punctuation">;</span>
-              {"\n  "}
-              <span data-code-token="keyword">return</span> res
-              <span data-code-token="punctuation">.</span>
-              <span data-code-token="function">json</span>
-              <span data-code-token="punctuation">()</span>
-              <span data-code-token="punctuation">;</span>
-              {"\n"}
-              <span data-code-token="punctuation">{"}"}</span>
-            </CodeBlock>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Diff tokens · inserted and deleted</CardTitle>
-            <CardDescription>
-              The same vocabulary carries a diff. inserted, deleted and changed default to the
-              success, destructive and warning roles, so they agree with every other affirmative and
-              destructive mark in the system rather than inventing a second green and red.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <CodeBlock language="diff" aria-label="Patch">
-              <span data-code-token="comment">{"--- a/tokens.css\n+++ b/tokens.css\n"}</span>
-              <span data-code-token="deleted">{"-  --code-block-foreground: #111;\n"}</span>
-              <span data-code-token="inserted">{"+  --code-block-foreground: initial;\n"}</span>
-              <span data-code-token="changed">
-                {"!  --code-block-token-changed-color: initial;\n"}
-              </span>
-              <span data-code-token="punctuation">
-                {"   /* role-mirror: the default moved to the call site */"}
-              </span>
-            </CodeBlock>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/collapsible.tsx

@@ -1,162 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { ChevronDown } from "lucide-react";
-import { useState } from "react";
-
-/**
- * Collapsible — a single open/close region (no item set; use Accordion for a set
- * of sections). Compose Collapsible + CollapsibleTrigger + CollapsibleContent.
- * Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  // Controlled example: open state is owned by the page, not the component.
-  const [open, setOpen] = useState(false);
-
-  return (
-    <PageContainer title="Collapsible" subtitle="A single toggleable region">
-      <Flex direction="col" gap="lg">
-        {/* Uncontrolled pair — defaultOpen vs default-closed, side by side */}
-        <Flex direction="col" gap="md" className="md:flex-row">
-          <Card className="flex-1">
-            <CardHeader>
-              <CardTitle level={2}>補助科目（既定で開く）</CardTitle>
-              <CardDescription>defaultOpen: 初期表示で展開された状態。</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Collapsible defaultOpen>
-                <Flex direction="row" align="center" justify="between" gap="md">
-                  <Text weight="medium">普通預金 · 補助科目 (3)</Text>
-                  <CollapsibleTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon-sm"
-                      aria-label="開閉"
-                      className="transition-transform data-[state=open]:rotate-180"
-                    >
-                      <ChevronDown className="ui-disclosure-chevron" />
-                    </Button>
-                  </CollapsibleTrigger>
-                </Flex>
-                <CollapsibleContent>
-                  <Flex direction="col" gap="xs">
-                    <div className="text-sm">GMOあおぞらネット銀行</div>
-                    <div className="text-sm">三菱UFJ銀行 渋谷支店</div>
-                    <div className="text-sm">みずほ銀行 当座</div>
-                  </Flex>
-                </CollapsibleContent>
-              </Collapsible>
-            </CardContent>
-          </Card>
-
-          <Card className="flex-1">
-            <CardHeader>
-              <CardTitle level={2}>補助科目（既定で閉じる）</CardTitle>
-              <CardDescription>初期表示は折りたたみ。トリガーで展開します。</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Collapsible>
-                <Flex direction="row" align="center" justify="between" gap="md">
-                  <Text weight="medium">当座預金 · 補助科目 (2)</Text>
-                  <CollapsibleTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon-sm"
-                      aria-label="開閉"
-                      className="transition-transform data-[state=open]:rotate-180"
-                    >
-                      <ChevronDown className="ui-disclosure-chevron" />
-                    </Button>
-                  </CollapsibleTrigger>
-                </Flex>
-                <CollapsibleContent>
-                  <Flex direction="col" gap="xs">
-                    <div className="text-sm">三井住友銀行 丸の内支店</div>
-                    <div className="text-sm">りそな銀行 本店</div>
-                  </Flex>
-                </CollapsibleContent>
-              </Collapsible>
-            </CardContent>
-          </Card>
-        </Flex>
-
-        {/* Controlled — open state owned by the page (open + onOpenChange) */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>制御コンポーネント</CardTitle>
-            <CardDescription>open と onOpenChange でページ側が開閉を管理します。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Collapsible open={open} onOpenChange={setOpen}>
-              <Flex direction="row" align="center" justify="between" gap="md">
-                <Text weight="medium">
-                  外貨預金 · 補助科目 (2) · {open ? "展開中" : "折りたたみ中"}
-                </Text>
-                <Flex direction="row" align="center" gap="xs">
-                  <Button variant="outline" size="sm" onClick={() => setOpen((value) => !value)}>
-                    {open ? "閉じる" : "開く"}
-                  </Button>
-                  <CollapsibleTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon-sm"
-                      aria-label="開閉"
-                      className="transition-transform data-[state=open]:rotate-180"
-                    >
-                      <ChevronDown className="ui-disclosure-chevron" />
-                    </Button>
-                  </CollapsibleTrigger>
-                </Flex>
-              </Flex>
-              <CollapsibleContent>
-                <Flex direction="col" gap="xs">
-                  <div className="text-sm">USD 普通預金 · シティバンク</div>
-                  <div className="text-sm">EUR 普通預金 · 三菱UFJ銀行</div>
-                </Flex>
-              </CollapsibleContent>
-            </Collapsible>
-          </CardContent>
-        </Card>
-
-        {/* Disabled — locked, non-interactive */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>無効状態</CardTitle>
-            <CardDescription>disabled: トリガーが操作不可（ロック）になります。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Collapsible disabled defaultOpen>
-              <Flex direction="row" align="center" justify="between" gap="md">
-                <Text weight="medium">定期預金 · 補助科目 (1) · 締め処理中</Text>
-                <CollapsibleTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon-sm"
-                    aria-label="開閉"
-                    className="transition-transform data-[state=open]:rotate-180"
-                  >
-                    <ChevronDown className="ui-disclosure-chevron" />
-                  </Button>
-                </CollapsibleTrigger>
-              </Flex>
-              <CollapsibleContent>
-                <Flex direction="col" gap="xs">
-                  <div className="text-sm">三菱UFJ銀行 定期 (1年)</div>
-                </Flex>
-              </CollapsibleContent>
-            </Collapsible>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/credential-reveal.tsx

@@ -1,148 +0,0 @@
-import * as React from "react";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  CredentialReveal,
-} from "@godxjp/ui/data-display";
-import { Button } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@godxjp/ui/feedback";
-
-const API_KEY = "gxp_live_8Fh2kQ9wR7nZ1xV4bT6mL0cD3pS5yJ";
-const CLIENT_SECRET = "cs_9aE2rT4uY6iO8pA1sD3fG5hJ7kL9zX";
-
-/**
- * CredentialReveal — the one-time secret pattern (device credential / API key / service-account
- * secret). Masked by default, a show/hide toggle, a copy button that confirms the copy, an optional
- * download, and an acknowledge action to pair with a Dialog. Composed only from real @godxjp/ui.
- */
-export default function Demo() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <PageContainer
-      title="CredentialReveal"
-      subtitle="一度だけ表示するシークレット · マスク解除 + コピー + 期限警告"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Dialog に組み込む（推奨）</CardTitle>
-            <CardDescription>
-              APIキー発行直後の一度きり表示。onAcknowledge で「保存しました」を押すまで閉じません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button onClick={() => setOpen(true)}>APIキーを発行</Button>
-            <Dialog open={open} onOpenChange={setOpen}>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>APIキーを発行しました</DialogTitle>
-                  <DialogDescription>
-                    このキーはこの画面でのみ表示されます。安全な場所に保管してください。
-                  </DialogDescription>
-                </DialogHeader>
-                <DialogBody>
-                  <CredentialReveal
-                    label="APIキー"
-                    secret={API_KEY}
-                    downloadable
-                    onAcknowledge={() => setOpen(false)}
-                  />
-                </DialogBody>
-              </DialogContent>
-            </Dialog>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>インライン（マスク解除 + コピー）</CardTitle>
-            <CardDescription>
-              既定はマスク表示。目のトグルで表示、コピーボタンは成功を aria-live で通知します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <CredentialReveal label="クライアントシークレット" secret={CLIENT_SECRET} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ダウンロード付き</CardTitle>
-            <CardDescription>
-              downloadable でファイル保存を提供。復旧コードやブートストラップ資格情報向け。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <CredentialReveal
-              label="リカバリーコード"
-              secret="8QF2-K9WR-7NZ1-XV4B-T6ML"
-              downloadable
-              downloadFileName="recovery-code.txt"
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Tone</CardTitle>
-            <CardDescription>
-              警告帯の severity は tone。warning（既定）は保管を促す通常の一度きり表示、destructive
-              は失効・再発行が必要な重大な扱い、info は運用上の補足に使います。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <CredentialReveal
-                label="サービスアカウント鍵"
-                secret="svc_3pS5yJ8Fh2kQ9wR7nZ1xV4bT"
-                tone="warning"
-              />
-              <CredentialReveal
-                label="デバイス資格情報"
-                secret="dev_7h2K9wR7nZ1xV4bT6mL0cD"
-                tone="destructive"
-              />
-              <CredentialReveal
-                label="Webhook 署名シークレット"
-                secret="whsec_1xV4bT6mL0cD3pS5yJ8Fh2kQ"
-                tone="info"
-                warning="このシークレットは Webhook 署名の検証にのみ使用します。"
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Size</CardTitle>
-            <CardDescription>
-              size は資格情報行の高さと操作ボタンの寸法を決めます。xs / sm
-              は明細行や設定表の中に、md （既定）は単独のカードに、lg
-              は発行直後のダイアログで使います。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <CredentialReveal label="xs" secret="key_xs_9wR7nZ1xV4bT6mL0cD" size="xs" />
-              <CredentialReveal label="sm" secret="key_sm_9wR7nZ1xV4bT6mL0cD" size="sm" />
-              <CredentialReveal label="md（既定）" secret="key_md_9wR7nZ1xV4bT6mL0cD" size="md" />
-              <CredentialReveal label="lg" secret="key_lg_9wR7nZ1xV4bT6mL0cD" size="lg" />
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}