@godxjp/ui 31.31.7 → 32.0.0

package/docs/general/float-button.tsx

@@ -1,133 +0,0 @@
-import type { CSSProperties } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FloatButton, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { MessageCircle, Printer, Share2 } from "lucide-react";
-
-/** One row up from the corner: the control's own height plus one stack step, both tokens. */
-const STEP_UP = "calc(var(--space-stack-xl) + var(--control-height-lg) + var(--space-stack-md))";
-/** Two rows up. */
-const STEP_UP_TWICE =
-  "calc(var(--space-stack-xl) + (var(--control-height-lg) + var(--space-stack-md)) * 2)";
-
-/**
- * FloatButton — Ant Design のコーナーアクションを 100% 移植したもの（antd 6.6.3）。
- *
- * ページの内容ではないが常に手の届く場所にあるべき道具のための、ビューポートに固定された操作子。
- * `Button` はレイアウトの流れの中にあるので、隅に留めるには呼び出し側が `position: fixed` を書く
- * しかなく、それは `ui-audit` が止める（gh#558）。`Popover` はパネルの位置を決めるもので、
- * トリガーの位置は決めない。`Banner` は全幅の帯であって隅の印ではない。
- *
- * 隅までの距離は `--float-button-offset-block-end` / `--float-button-offset-inline-end`。
- * 下部に固定バーがあるサービスは、メディアクエリではなくトークン 1 つで印を動かす。
- *
- * このフレームは実際に固定表示される要素を含むため、画面の右下に印が重なって見える。
- * それが正しい姿で、そこが FloatButton の唯一の居場所である。
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="FloatButton"
-      subtitle="ビューポートの隅に固定される操作子 · Group と BackTop つき"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>単体のボタン</CardTitle>
-            <CardDescription>
-              画面右下に丸い印が 1 つ出ている。`tooltip` を文字列で渡すと、それがアクセシブル名にも
-              なる —— アイコンだけの操作子に名前がないのは WCAG 4.1.2 違反であり、ツールチップは
-              タッチの利用者には決して届かないため。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Text size="sm" tone="muted">
-                type=&quot;primary&quot; はブランド塗り、type=&quot;default&quot; は面とヘアライン。
-                antd の語をそのまま使っている（この Library の他の場所では variant と呼ぶもの）。
-              </Text>
-              <Text size="sm" tone="muted">
-                badge は count / dot / overflowCount / showZero を取る。count が overflowCount を
-                超えると &quot;99+&quot; になる。
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Group · 積み重ねか、1 つのトリガーの後ろか</CardTitle>
-            <CardDescription>
-              `trigger` がその切り替えスイッチ。渡さなければ全部のボタンが見えたままの素の積み重ね、
-              渡せば子はトリガーの後ろに畳まれ、click か hover で開く。`placement` は top / left /
-              right / bottom。left と right は `inset-inline-*` で解決されるので、
-              dir=&quot;rtl&quot; では画面上の向きが正しく反転する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Text size="sm" tone="muted">
-              Group のルート要素は `pointer-events: none`、ボタンだけが `auto`。タッチ画面で、
-              ボタンとボタンの隙間に落ちたスワイプがページのスクロールを殺さないため。
-            </Text>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>BackTop</CardTitle>
-            <CardDescription>
-              `visibilityHeight`（既定 400px）だけ下ったところで現れ、`duration`（既定 450ms）で
-              上まで戻す。`prefers-reduced-motion` では瞬時に移動する（WCAG 2.3.3）。 `target`
-              に「その要素を返す関数」を渡せば、document ではなくその要素を見張る —— 自前の
-              スクロール領域を持つシェルの中でも使えるのはこのため。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Text size="sm" tone="muted">
-              `showProgress` を付けると、どこまで読んだかをリングで描く。1 フレームごとに変わる値は
-              カスタムプロパティ 1 つだけで、呼び出し側に数値は 1 つも出てこない。
-            </Text>
-          </CardContent>
-        </Card>
-      </Flex>
-
-      {/*
-        実運用の画面に浮くボタンは 1 つである。このフレームは 3 つの形を同時に見せるため、
-        2 つ目と 3 つ目を 1 段ずつ上にずらしてある —— そして、そのずらし方こそが gh#558 の求めた
-        ものである: メディアクエリでも呼び出し側の px でもなく、トークンを 1 つ上書きするだけ。
-        段の高さはボタンの高さ + 段間で、どちらもトークンなので密度を変えても崩れない。
-      */}
-      <FloatButton
-        tooltip="アシスタントに聞く"
-        type="primary"
-        icon={<MessageCircle />}
-        badge={{ count: 3 }}
-      />
-
-      <FloatButton.Group
-        trigger="hover"
-        placement="left"
-        aria-label="その他の操作"
-        style={
-          {
-            "--float-button-offset-block-end": STEP_UP,
-          } as CSSProperties
-        }
-      >
-        <FloatButton tooltip="共有" icon={<Share2 />} />
-        <FloatButton tooltip="印刷" icon={<Printer />} />
-      </FloatButton.Group>
-
-      <FloatButton.BackTop
-        visibilityHeight={0}
-        showProgress
-        style={
-          {
-            "--float-button-offset-block-end": STEP_UP_TWICE,
-          } as CSSProperties
-        }
-      />
-    </PageContainer>
-  );
-}

package/docs/general/icon.tsx

@@ -1,217 +0,0 @@
-import {
-  ArrowUpRight,
-  Check,
-  Download,
-  FileWarning,
-  Globe,
-  Lock,
-  ShieldCheck,
-  Smartphone,
-  Unlock,
-} from "lucide-react";
-
-import { Card, CardContent, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Button, Heading, Icon, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
-
-/**
- * Icon · a glyph on the `--icon-size-*` scale, and the only supported way to draw a standalone one.
- *
- * A lucide component ships `width="24" height="24"`. Four rules in this library override that
- * (`.ui-button svg`, the menu row, the topbar cell, the ListRow leading slot) and nothing else
- * does · so a glyph in a `Text`, a table cell or an `<a>` draws at 24px beside 14px type, 1.7× the
- * text it annotates. `docs/CONSUMER-RULES.md` §3/§8 forbid the `size-4` / `w-[16px]` escape, which
- * left a consumer with 38 oversized glyphs and no supported fix (gh#712).
- *
- * `Icon` renders ONTO the glyph · the sized element is the `<svg>` itself · so it composes
- * anywhere a bare glyph does and adds no box to the row. Decorative (`aria-hidden`) by default;
- * `label` switches it to `role="img"` with that accessible name.
- *
- * Composed only from real @godxjp/ui components. All copy is consumer-owned and localized.
- */
-
-/** The nine steps, with the px each resolves to at a 16px root · docs/TOKENS.md. */
-const SIZES = [
-  { size: "2xs", px: "10px", note: "アバターの在席ドット" },
-  { size: "xs", px: "12px", note: "表の並べ替えカーソル" },
-  { size: "sm", px: "14px", note: 'size="sm" のコントロール' },
-  { size: "md", px: "16px", note: "既定のアイコン段" },
-  { size: "lg", px: "20px", note: "アラート・ランチャー" },
-  { size: "xl", px: "24px", note: "アップロードタイル" },
-  { size: "2xl", px: "36px", note: "StatCard のメダリオン" },
-  { size: "3xl", px: "40px", note: "ドロップゾーン" },
-  { size: "4xl", px: "48px", note: "空状態の枠" },
-] as const;
-
-/** `tone` shares Text's vocabulary · one table for the glyph and the label beside it. */
-const TONES = [
-  { tone: "default", label: "default · 前景色" },
-  { tone: "muted", label: "muted · 補足" },
-  { tone: "primary", label: "primary · 主要導線" },
-  { tone: "success", label: "success · 有効" },
-  { tone: "warning", label: "warning · 要確認" },
-  { tone: "destructive", label: "destructive · 失敗" },
-  { tone: "info", label: "info · 情報" },
-  { tone: "inherit", label: "inherit · 面の色を継承" },
-] as const;
-
-/** The real screen: a security settings list whose status is carried by a glyph beside 14px text. */
-const SESSIONS = [
-  {
-    id: "s1",
-    device: "MacBook Pro · 東京",
-    detail: "2026-09-17 09:12 · 192.0.2.24",
-    secure: true,
-  },
-  {
-    id: "s2",
-    device: "iPhone 15 · 大阪",
-    detail: "2026-09-16 21:40 · 198.51.100.7",
-    secure: true,
-  },
-  {
-    id: "s3",
-    device: "Windows PC · 未確認の拠点",
-    detail: "2026-09-15 02:05 · 203.0.113.19",
-    secure: false,
-  },
-];
-
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Icon"
-      subtitle='--icon-size-* の9段にグリフを載せる唯一の方法 · 既定は装飾（aria-hidden）· label で role="img"'
-    >
-      <Flex direction="col" gap="lg">
-        {/* ── The real screen · the defect this primitive exists for: a status glyph inline with
-             14px body text, where no context rule would ever have sized it. ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>サインイン中の端末</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {SESSIONS.map((session) => (
-                <Flex key={session.id} direction="row" gap="sm" align="center" justify="between">
-                  <Flex direction="row" gap="sm" align="center">
-                    <Icon
-                      as={session.secure ? ShieldCheck : FileWarning}
-                      size="lg"
-                      tone={session.secure ? "success" : "warning"}
-                      label={session.secure ? "保護された接続" : "確認が必要な接続"}
-                    />
-                    <Flex direction="col">
-                      <Text weight="medium">{session.device}</Text>
-                      {/* A decorative glyph INSIDE 14px text · `sm` puts it on the type's own step. */}
-                      <Text size="xs" tone="muted">
-                        <Icon as={Globe} size="xs" /> {session.detail}
-                      </Text>
-                    </Flex>
-                  </Flex>
-                  <Button variant="outline" size="sm">
-                    <Icon as={session.secure ? Lock : Unlock} size="sm" />
-                    サインアウト
-                  </Button>
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* ── Every step of the scale ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>size · 9段のアイコンスケール</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              {SIZES.map((step) => (
-                <Flex key={step.size} direction="row" gap="md" align="center">
-                  <Flex direction="row" gap="sm" align="center">
-                    <Icon as={Smartphone} size={step.size} />
-                  </Flex>
-                  <Text size="sm" mono>
-                    {step.size}
-                  </Text>
-                  <Text size="sm" tone="muted" mono>
-                    {step.px}
-                  </Text>
-                  <Text size="sm" tone="muted">
-                    {step.note}
-                  </Text>
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* ── Every tone, beside the Text that shares the vocabulary ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>tone · Text と同じ意味の語彙</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              {TONES.map((entry) => (
-                <Flex key={entry.tone} direction="row" gap="sm" align="center">
-                  <Icon as={Check} size="md" tone={entry.tone} />
-                  <Text size="sm" tone={entry.tone}>
-                    {entry.label}
-                  </Text>
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* ── Where it composes · inside Text, inside a Button, standalone in a link ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>合成 · Text の中・Button の中・単独</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="col" gap="xs">
-                <Heading level={3}>Text の中</Heading>
-                <Text size="sm">
-                  請求書は <Icon as={Lock} size="sm" tone="muted" /> 暗号化されて保管されます。
-                </Text>
-              </Flex>
-
-              <Separator />
-
-              <Flex direction="col" gap="xs">
-                <Heading level={3}>Button の中 · 明示した段が Button の既定に勝つ</Heading>
-                {/* 320px では 2 つのラベル付き Button が 1 行に収まらない。Button はラベル幅より
-                    縮まないので、行を折り返させるのは並べた側の責任（`wrap`）。 */}
-                <Flex direction="row" gap="sm" align="center" wrap>
-                  <Button size="sm">
-                    <Icon as={Download} size="sm" />
-                    書き出す
-                  </Button>
-                  <Button variant="outline">
-                    <Icon as={Download} size="lg" />
-                    大きめのグリフ
-                  </Button>
-                </Flex>
-              </Flex>
-
-              <Separator />
-
-              <Flex direction="col" gap="xs">
-                <Heading level={3}>単独 · 名前を持つグリフ</Heading>
-                <Flex direction="row" gap="sm" align="center">
-                  <Text as="a" href="#icon-standalone" size="sm" tone="primary">
-                    監査ログを開く <Icon as={ArrowUpRight} size="sm" />
-                  </Text>
-                  <Icon as={ShieldCheck} size="md" tone="success" label="二要素認証は有効です" />
-                </Flex>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/general/logo.tsx

@@ -1,194 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Logo, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/** Logo — token-sized brand mark with decorative and explicitly named accessibility modes. */
-export default function Demo() {
-  return (
-    <PageContainer title="Logo" subtitle="size · glyph · decorative and named brand marks">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Size tiers</CardTitle>
-            <CardDescription>
-              xs / sm / md（既定）/ lg のトークンサイズ。size はすべてのマークに効きます。箱付き
-              glyph の辺と字送りは --logo-size-* と --logo-font-size-*、識別マーク
-              （mark=&quot;godx&quot;）は専用の --logo-godx-size-* （1.5 / 1.75 / 2 / 2.5rem）が
-              所有します。識別マークは正方形の viewBox
-              に横長カプセルが入るため、同じ視覚重量になるよう箱付き glyph より 1
-              段大きく取ります。サービステーマが --logo-godx-size
-              を設定すると、全ティアで識別マークの箱を固定できます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" align="center" wrap gap="md">
-                <Logo size="xs" />
-                <Logo size="sm" />
-                <Logo />
-                <Logo size="lg" />
-              </Flex>
-              {/* The identity mark honours the SAME size prop — it is not a fixed-size mark. */}
-              <Flex direction="row" align="center" wrap gap="md">
-                <Logo mark="godx" size="xs" label="godx identity mark, xs" />
-                <Logo mark="godx" size="sm" label="godx identity mark, sm" />
-                <Logo mark="godx" label="godx identity mark, md" />
-                <Logo mark="godx" size="lg" label="godx identity mark, lg" />
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Glyph and accessible name</CardTitle>
-            <CardDescription>
-              Wordmark と組み合わせる mark は decorative。単独 mark は label で名前を付けます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="row" align="center" gap="sm">
-                <Logo glyph="GX" />
-                <Text weight="bold">godx Admin</Text>
-              </Flex>
-              <Logo glyph="神" label="Godx" size="lg" />
-              <Logo glyph="G" tone="success" label="Godx green identity mark" />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>tone · アイデンティティロール</CardTitle>
-            <CardDescription>
-              tone は 2 値で、箱付き glyph の塗りを決めます。primary（既定）はアプリのアクション色
-              --primary、success はブランドの識別ロール --brand です。--brand
-              はステータス緑（--success）とも アクション色とも独立しているため、
-              テーマを変えても正規のエメラルドが保たれます。 なお mark=&quot;godx&quot;
-              の識別マークは tone に関わらず常に --brand で描かれます。size は効きます（上の Size
-              tiers を参照）。箱付き glyph は実テキストなので WCAG 2.2 SC 1.4.3 の 4.5:1
-              が適用されます（14px bold は large text ではありません）。文字色は
-              --logo-identity-foreground（近黒）で、--brand-foreground
-              ではありません。後者は識別マークの抜き色（--background に追従）で エメラルド上では
-              3.67:1 しかなく、非テキスト（SC 1.4.11）の 3:1 しか満たしません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap gap="lg">
-              <Flex direction="col" gap="sm">
-                <Logo tone="primary" glyph="GX" size="lg" label="primary tone boxed glyph" />
-                <Text size="2xs" mono tone="muted">
-                  {`tone="primary" · --primary`}
-                </Text>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Logo tone="success" glyph="GX" size="lg" label="brand tone boxed glyph" />
-                <Text size="2xs" mono tone="muted">
-                  {`tone="success" · --brand`}
-                </Text>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Logo tone="primary" mark="godx" label="godx identity mark, primary tone" />
-                <Text size="2xs" mono tone="muted">
-                  {`mark="godx" tone="primary" · --brand`}
-                </Text>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Logo tone="success" mark="godx" label="godx identity mark, brand tone" />
-                <Text size="2xs" mono tone="muted">
-                  {`mark="godx" tone="success" · --brand`}
-                </Text>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Wordmark lockup</CardTitle>
-            <CardDescription>
-              wordmark を渡すと mark + 製品名の lockup になります。GoDX の lockup は --primary
-              ではなく identity role（brand green）で着色されるため、
-              テーマ変更でブランド色が崩れません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {/* Canonical GoDX lockup — brand-green mark + wordmark, one element. */}
-              <Logo mark="godx" tone="success" wordmark="GoDX" />
-              <Logo mark="godx" tone="success" wordmark="GoDX ID" size="lg" />
-              {/* Boxed-glyph lockup for a product brand that is not the GoDX identity. */}
-              <Logo glyph="GX" wordmark="godx Admin" size="sm" />
-              {/* label overrides the lockup name when the wordmark alone is ambiguous. */}
-              <Logo mark="godx" wordmark="GoDX" label="GoDX ID ホーム" />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Product suffix — 「GoDX | ID」</CardTitle>
-            <CardDescription>
-              productSuffix は製品名を lockup の内側に置きます。マスターは
-              mark=&quot;godx-lockup&quot; の 1 つだけで、区切り線・その前後の間隔・size
-              スケール・light/dark
-              の切替はすべてパッケージのトークンが所有します（--logo-divider-color / -width /
-              -height / -alpha、--logo-product-suffix-gap / -color /
-              -font-weight）。製品名は「描いた図形」ではなく wordmark と同じ組版
-              （--logo-wordmark-font-size-* /
-              -font-family）です。別座標系のマスターを増やさず、製品が増えても
-              リリースが要らず、ローカライズできるためです。 区切り線の色はロゴタイプの ink
-              （--logo-godx-ink-color）の 0.25 alpha で、light では #c1c2cb（1.74:1、 公式キットの
-              #c5c8d6 = 1.64:1 とほぼ同じ）、dark では #515150（2.30:1）。 キットの固定値と違い dark
-              の対応があります。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {/* size は suffix にも効く — マークもロゴタイプも製品名も同じティアで動きます。 */}
-              <Flex direction="row" align="center" wrap gap="lg">
-                <Logo mark="godx-lockup" productSuffix="ID" size="xs" />
-                <Logo mark="godx-lockup" productSuffix="ID" size="sm" />
-                <Logo mark="godx-lockup" productSuffix="ID" />
-                <Logo mark="godx-lockup" productSuffix="ID" size="lg" />
-              </Flex>
-              {/* 将来の製品名も同じ API。追加のアセットもリリースも要りません。 */}
-              <Flex direction="row" align="center" wrap gap="lg">
-                <Logo mark="godx-lockup" productSuffix="Console" />
-                <Logo mark="godx-lockup" productSuffix="Admin" />
-                <Logo mark="godx-lockup" productSuffix="管理コンソール" />
-              </Flex>
-              {/* 描かれた "GoDX" は sr-only テキストで補われ、名前は "GoDX ID" になります。
-               * role="img" を使わないのは、asChild でリンクにしたとき link ロールを
-               * 上書きしてしまうためです。 */}
-              <Flex direction="col" gap="sm">
-                <Logo mark="godx-lockup" productSuffix="ID" size="lg" />
-                <Text size="2xs" mono tone="muted">
-                  {`mark="godx-lockup" productSuffix="ID" → accessible name "GoDX ID"`}
-                </Text>
-              </Flex>
-              {/* 組版の wordmark と併用すると、suffix はその後ろに入ります。 */}
-              <Flex direction="col" gap="sm">
-                <Logo glyph="c" wordmark="CoreBooks" productSuffix="Admin" />
-                <Text size="2xs" mono tone="muted">
-                  {`glyph + wordmark + productSuffix → name "CoreBooks Admin"`}
-                </Text>
-              </Flex>
-              {/* suffix がノードでも名前は壊れません。label は従来どおり上書きできます。 */}
-              <Logo
-                mark="godx-lockup"
-                productSuffix={<Text size="xs">ID</Text>}
-                label="GoDX ID ホーム"
-              />
-              {/* リンク化も同じ。lockup そのものが <a> になります。 */}
-              <Logo asChild mark="godx-lockup" productSuffix="ID">
-                <a href="#logo-product-suffix" />
-              </Logo>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}