@godxjp/ui 19.1.0 → 19.2.0

package/docs/foundation/radius-shadow.tsx

@@ -0,0 +1,152 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+
+/**
+ * Radius & Shadow · design-token foundation. base radius 6px; shadows stay flat
+ * (cards have NO shadow at rest · elevation only climbs at popover / dialog).
+ * Boxes render the real token var; composed only from real @godxjp/ui components.
+ */
+// DS authors the base --radius (6px) and derives sm/md/lg in @theme. --radius-xl
+// and --radius-full are NOT overridden · they fall through to Tailwind defaults.
+// `value` is the CSS the swatch renders. ds tokens resolve their var; xl/full are NOT authored as
+// vars (they fall through to Tailwind `rounded-xl` / `rounded-full`), so we render their literal
+// value — otherwise `var(--radius-full)` is undefined and the swatch collapses to a square.
+const radii = [
+  { token: "--radius-sm", px: "2px", value: "var(--radius-sm)", source: "ds" as const },
+  { token: "--radius-md", px: "4px", value: "var(--radius-md)", source: "ds" as const },
+  { token: "--radius", px: "6px (base)", value: "var(--radius)", source: "ds" as const },
+  { token: "--radius-lg", px: "6px", value: "var(--radius-lg)", source: "ds" as const },
+  { token: "--radius-xl", px: "12px", value: "0.75rem", source: "tw" as const },
+  { token: "--radius-full", px: "pill", value: "9999px", source: "tw" as const },
+];
+
+const shadows = [
+  { token: "--shadow-sm", role: "subtle lift" },
+  { token: "--shadow-lg", role: "popover / elevated" },
+  { token: "--shadow-xl", role: "dialog" },
+];
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Radius & Shadow"
+      subtitle="6px base radius · flat by default · elevation climbs only at popover / dialog"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Corner radius</CardTitle>
+            <CardDescription>
+              The system authors the base 6px radius and derives sm/md/lg from it. xl and full are
+              not overridden; they fall through to Tailwind defaults.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ sm: 2, md: 3, lg: 6 }}>
+              {radii.map((r) => (
+                <Flex key={r.token} direction="col" gap="xs">
+                  <div
+                    className="bg-secondary border-border h-16 border"
+                    style={{ borderRadius: r.value }}
+                  />
+                  <div>
+                    <Flex align="center" gap="xs">
+                      <Text size="xs" mono>
+                        {r.token}
+                      </Text>
+                      {r.source === "tw" ? (
+                        <Badge variant="outline" className="text-xs">
+                          Tailwind default
+                        </Badge>
+                      ) : null}
+                    </Flex>
+                    <Text as="div" size="xs" tone="muted">
+                      {r.px}
+                    </Text>
+                  </div>
+                </Flex>
+              ))}
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Elevation</CardTitle>
+            <CardDescription>
+              Cards carry a 1px border and NO shadow at rest. Shadow appears only on floating
+              surfaces: popover and dialog.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
+                {shadows.map((s) => (
+                  <Flex key={s.token} direction="col" gap="xs">
+                    <div
+                      className="bg-card h-16 rounded-md"
+                      style={{ boxShadow: `var(${s.token})` }}
+                    />
+                    <div>
+                      <Text as="div" size="xs" mono>
+                        {s.token}
+                      </Text>
+                      <Text as="div" size="xs" tone="muted">
+                        {s.role}
+                      </Text>
+                    </div>
+                  </Flex>
+                ))}
+              </ResponsiveGrid>
+
+              {/* Rest vs elevated, shown live: a resting Card (border, no shadow) next to a
+                  floating surface lifted by --shadow-lg, so the elevation rule is demonstrated,
+                  not just asserted. */}
+              <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
+                <Flex direction="col" gap="xs">
+                  <Card>
+                    <CardContent>
+                      <Text as="div" weight="medium">
+                        At rest（カード）
+                      </Text>
+                      <Text as="div" size="xs" tone="muted">
+                        border-border, no shadow
+                      </Text>
+                    </CardContent>
+                  </Card>
+                  <Text as="div" size="xs" tone="muted">
+                    resting surface · flat
+                  </Text>
+                </Flex>
+                <Flex direction="col" gap="xs">
+                  <div
+                    className="bg-popover text-popover-foreground border-border rounded-md border p-4"
+                    style={{ boxShadow: "var(--shadow-lg)" }}
+                  >
+                    <Text as="div" weight="medium">
+                      Floating（ポップオーバー）
+                    </Text>
+                    <Text as="div" size="xs" tone="muted">
+                      --shadow-lg lifts it off the page
+                    </Text>
+                  </div>
+                  <Text as="div" size="xs" tone="muted">
+                    floating surface · elevated
+                  </Text>
+                </Flex>
+              </ResponsiveGrid>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/foundation/spacing.tsx

@@ -0,0 +1,211 @@
+import { type RefObject, useLayoutEffect, useRef, useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Spacing · design-token foundation. Two raw scales (a 4px grid + a golden-ratio
+ * φ scale) feed the semantic layout tokens that Flex / PageContainer consume.
+ * Each bar's width is the real token var() and every px label is resolved from
+ * that same var() at runtime, so nothing can drift from the source. Composed
+ * only from real @godxjp/ui components.
+ */
+const rawScale = [
+  "--space-0",
+  "--space-1",
+  "--space-2",
+  "--space-3",
+  "--space-4",
+  "--space-5",
+  "--space-6",
+  "--space-8",
+  "--space-10",
+  "--space-12",
+];
+
+const phiScale = [
+  { token: "--phi-n2", role: "φ⁻² · phi-unit ÷ φ²" },
+  { token: "--phi-n1", role: "φ⁻¹ · phi-unit ÷ φ" },
+  { token: "--phi-0", role: "φ⁰ · phi-unit (= --space-4)" },
+  { token: "--phi-p1", role: "φ¹ · phi-unit × φ" },
+  { token: "--phi-p2", role: "φ² · phi-unit × φ²" },
+];
+
+const layoutScale = [
+  { token: "--space-page-x", role: "page gutter X (PageContainer)" },
+  { token: "--space-page-y", role: "page gutter Y (PageContainer)" },
+  { token: "--space-section", role: "section gap (= --phi-0)" },
+  { token: "--space-stack-xs", role: "Flex gap='xs'" },
+  { token: "--space-stack-sm", role: "Flex gap='sm'" },
+  { token: "--space-stack-md", role: "Flex gap='md' (default · = --phi-0)" },
+  { token: "--space-stack-lg", role: "Flex gap='lg' (= --phi-p1)" },
+  { token: "--space-stack-xl", role: "Flex gap='xl' (= --phi-p2)" },
+  { token: "--space-inline-xs", role: "inline gap='xs'" },
+  { token: "--space-inline-sm", role: "inline gap='sm'" },
+  { token: "--space-inline-md", role: "inline gap='md' (= --phi-n1)" },
+  { token: "--space-inline-lg", role: "inline gap='lg' (= --phi-0)" },
+];
+
+const allTokens = [
+  ...rawScale,
+  ...phiScale.map((s) => s.token),
+  ...layoutScale.map((s) => s.token),
+];
+
+/** Resolve each token's computed pixel value from a live probe element, so the
+ *  px labels are read from the same var() as the bars and can never drift. */
+type PxMap = Record<string, string> & { __probeRef: RefObject<HTMLDivElement | null> };
+
+function usePx(tokens: string[]): PxMap {
+  const probeRef = useRef<HTMLDivElement>(null);
+  const [px, setPx] = useState<Record<string, string>>({});
+
+  useLayoutEffect(() => {
+    const host = probeRef.current;
+    if (!host) return;
+    const next: Record<string, string> = {};
+    for (const token of tokens) {
+      const probe = document.createElement("div");
+      probe.style.width = `var(${token})`;
+      host.appendChild(probe);
+      const width = probe.getBoundingClientRect().width;
+      host.removeChild(probe);
+      next[token] = `${Math.round(width * 10) / 10}px`;
+    }
+    setPx(next);
+  }, [tokens]);
+
+  return { ...px, __probeRef: probeRef } as PxMap;
+}
+
+function TokenBar({
+  token,
+  px,
+  role,
+  className,
+}: {
+  token: string;
+  px?: string;
+  role?: string;
+  className: string;
+}) {
+  return (
+    <Flex direction="row" align="center" gap="md">
+      <Text size="xs" tone="muted" mono className="w-44 shrink-0">
+        {token}
+      </Text>
+      <div className={className} style={{ width: `var(${token})` }} />
+      <Text size="xs" tone="muted" mono className="w-14 shrink-0 text-end">
+        {px ?? "·"}
+      </Text>
+      {role ? (
+        <Text size="xs" tone="muted">
+          {role}
+        </Text>
+      ) : null}
+    </Flex>
+  );
+}
+
+export default function Demo() {
+  const px = usePx(allTokens);
+
+  return (
+    <PageContainer
+      title="Spacing"
+      subtitle="4px raw grid + golden-ratio (φ) scale → semantic layout gaps · never raw gap-* / margins"
+    >
+      {/* Off-screen probe host: bars are measured here, then removed. */}
+      <div
+        ref={px.__probeRef}
+        aria-hidden
+        className="pointer-events-none absolute -z-10 opacity-0"
+      />
+
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Raw scale · 4px grid</CardTitle>
+            <CardDescription>
+              The base step is 4px; every value is a 4-multiple. Bar width is the live token var(),
+              the px label is resolved from it at runtime.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              {rawScale.map((token) => (
+                <TokenBar
+                  key={token}
+                  token={token}
+                  px={px[token]}
+                  className="bg-primary h-3 shrink-0 rounded-sm"
+                />
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Golden-ratio scale · φ ≈ 1.618</CardTitle>
+            <CardDescription>
+              Off-grid by design: each step is the previous multiplied or divided by φ around{" "}
+              <Text mono>--phi-unit</Text> (= --space-4). These back the larger stack / inline gaps,
+              so they read as off the 4px grid (e.g. stack-lg ≈ 25.9px).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              {phiScale.map((s) => (
+                <TokenBar
+                  key={s.token}
+                  token={s.token}
+                  px={px[s.token]}
+                  role={s.role}
+                  className="bg-attention h-3 shrink-0 rounded-sm"
+                />
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Semantic layout tokens</CardTitle>
+            <CardDescription>
+              What Flex gap and PageContainer padding resolve to: set the rhythm once, never
+              hand-tune margins per element. Tokens marked (= --phi-*) inherit the golden-ratio
+              scale above, so their px value is off the 4px grid.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              {layoutScale.map((s) => (
+                <TokenBar
+                  key={s.token}
+                  token={s.token}
+                  px={px[s.token]}
+                  role={s.role}
+                  className="bg-info h-3 shrink-0 rounded-sm"
+                />
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Density retunes the φ scale</CardTitle>
+            <CardDescription>
+              PageContainer density remaps <Text mono>--phi-unit</Text> (compact → --space-3,
+              comfortable → --space-6). Because every φ-derived token (stack-md/lg/xl, inline-md/lg,
+              section) is built from --phi-unit, the whole semantic rhythm scales with one knob ·
+              the px values above shift accordingly.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/foundation/typography.tsx

@@ -0,0 +1,147 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Typography · design-token foundation. Real semantic <h1>-<h6> elements (no
+ * faked sizes): the base heading layer renders the reference-design scale and keeps
+ * the document outline SEO/accessibility correct. Composed only from real
+ * @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Typography"
+      subtitle="Noto Sans JP (M PLUS 2 fallback) · 14 / 1.7 body · headings 20/18/14/13 @ 500 · three weights only"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Heading scale</CardTitle>
+            <CardDescription>
+              h1 20 / h2 18 / h3 14 / h4-h6 13px, weight 500 (h5/h6 collapse to 13px). SEO/a11y:
+              exactly one &lt;h1&gt; per page (the page title above); h2-h6 below never skip a
+              level.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="xs">
+              <h2>&lt;h2&gt; 見出し · section heading · 18px / 500</h2>
+              <h3>&lt;h3&gt; 見出し · subsection · 14px / 500</h3>
+              <h4>&lt;h4&gt; 見出し · minor heading · 13px / 500</h4>
+              <h5>&lt;h5&gt; 見出し · 13px / 500</h5>
+              <h6>&lt;h6&gt; 見出し · 13px / 500</h6>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Body & weights</CardTitle>
+            <CardDescription>
+              Default body 14px / 1.7 (間 ma); dense tables 13px / 1.5. Three weights only · 400
+              body, 500 heading/label, 700 emphasis. NO 300, NO 600.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <p className="text-sm">
+                本文 14px / 1.7 · 漢字の密度に合わせて行間を広めに取り、読み疲れを抑えます。Body
+                copy mixes 日本語 and Latin without breaking rhythm.
+              </p>
+              <Flex direction="col" gap="xs">
+                <p className="text-sm font-normal">400 normal · 通常の本文 · regular body</p>
+                <p className="text-sm font-medium">
+                  500 medium · 見出し・ラベル · headings, labels
+                </p>
+                <p className="text-sm font-bold">700 bold · 強調のみ · emphasis only</p>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Tabular figures</CardTitle>
+            <CardDescription>
+              tabular-nums on every numeric column / large stat so digits align under 1.7 leading.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="xs">
+              <span className="text-2xl tabular-nums">¥1,284,500 · tabular ✓</span>
+              <span className="text-2xl normal-nums">¥1,284,500 · proportional ✗</span>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Size scale</CardTitle>
+            <CardDescription>
+              Six steps on the JP-dense base. text-sm (14px) is body; text-base+ are for stats /
+              large numerals, not running copy.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="xs">
+              <p className="text-xs">text-xs · 13px · 補足・密なテーブル</p>
+              <p className="text-sm">text-sm · 14px · 本文 body</p>
+              <p className="text-base">text-base · 15px · やや大きい本文</p>
+              <p className="text-lg">text-lg · 19px · リード文 lead</p>
+              <p className="text-xl">text-xl · 22px · 小見出し統計</p>
+              <p className="text-2xl">text-2xl · 26px · 大きな統計値</p>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Font family</CardTitle>
+            <CardDescription>
+              font-sans · Noto Sans JP by default (Japanese + Latin, incl. the Vietnamese subset); M
+              PLUS 2 is the fallback face for every supported locale. font-mono · the UI-monospace
+              stack for code, IDs and aligned digits.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <p className="font-sans text-sm">
+                春はあけぼの · Số hóa văn bản · The quick brown fox jumps over the lazy dog
+                0123456789
+              </p>
+              <code className="font-mono text-sm">
+                const id = &quot;EMP-2025-001&quot;; // 0123456789 IlO0
+              </code>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Line height</CardTitle>
+            <CardDescription>
+              tight 1.25 · headings · normal 1.5 · dense tables · body 1.7 · running 日本語/Latin
+              copy (the default applied to &lt;body&gt;).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <p className="text-sm leading-tight">
+                tight 1.25 · 見出し向けの詰めた行間。Compact leading for headings and single-line
+                labels where vertical rhythm should stay tight.
+              </p>
+              <p className="text-sm leading-normal">
+                normal 1.5 · 密なテーブル向け。Slightly looser for dense tables and metadata where
+                rows must stay scannable but not cramped.
+              </p>
+              <p className="text-sm leading-[var(--line-height-body)]">
+                body 1.7 · 本文向け。Generous leading for running mixed 日本語 and Latin copy so the
+                kanji density never reads as a wall of text.
+              </p>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}