@godxjp/ui 19.0.0 → 19.2.0

package/docs/foundation/density.tsx

@@ -0,0 +1,232 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import {
+  Checkbox,
+  Field,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+} from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Density · design-token foundation. One knob (`<PageContainer density>`) swaps a
+ * single CSS class (`.ui-density-compact|default|comfortable`) that retunes
+ * --control-height, --control-padding-x, --checkbox-size, --switch-* and the φ
+ * unit. The first card renders the SAME real controls inside each density-scoped
+ * subtree so the retune is visible at rest. The DataTable owns a separate density
+ * prop (--table-row-height / --table-cell-padding-y), shown in its own card.
+ * Composed only from real @godxjp/ui components.
+ */
+
+type Line = { id: string; item: string; qty: string };
+
+const lines: Line[] = [
+  { id: "L-01", item: "ライセンス", qty: "12" },
+  { id: "L-02", item: "保守費", qty: "1" },
+  { id: "L-03", item: "初期構築", qty: "1" },
+];
+
+const columns: ColumnDef<Line>[] = [
+  { key: "id", header: "明細", width: "w-20" },
+  { key: "item", header: "品目" },
+  {
+    key: "qty",
+    header: "数量",
+    align: "right",
+    render: (row) => <Text tabular>{row.qty}</Text>,
+  },
+];
+
+/** The same real controls, rendered once per density column. */
+function DensitySample({ idPrefix }: { idPrefix: string }) {
+  return (
+    <Flex direction="col" gap="md">
+      <Input defaultValue="株式会社ベトヤ" aria-label="取引先名" />
+      <Select defaultValue="paid" name={`${idPrefix}-status`}>
+        <SelectTrigger id={`${idPrefix}-status`} aria-label="状態">
+          <SelectValue placeholder="状態を選択" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="draft">下書き</SelectItem>
+          <SelectItem value="sent">送付済</SelectItem>
+          <SelectItem value="paid">入金済</SelectItem>
+        </SelectContent>
+      </Select>
+      <Flex direction="row" align="center" gap="md" wrap>
+        <Field id={`${idPrefix}-tax`} label="税込表示">
+          <Checkbox id={`${idPrefix}-tax`} defaultChecked />
+        </Field>
+        <Field id={`${idPrefix}-mail`} label="自動送信">
+          <Switch id={`${idPrefix}-mail`} defaultChecked />
+        </Field>
+      </Flex>
+      <Flex direction="row" align="center" gap="sm" wrap>
+        <Button size="sm">保存</Button>
+        <Button size="sm" variant="outline">
+          下書き
+        </Button>
+        <Button size="sm" variant="ghost" disabled>
+          ロック中
+        </Button>
+      </Flex>
+    </Flex>
+  );
+}
+
+const density = [
+  {
+    cls: "ui-density-compact",
+    label: "compact",
+    role: "kintone 風の密なテーブル",
+  },
+  {
+    cls: "ui-density-default",
+    label: "default",
+    role: "標準アプリ画面",
+  },
+  {
+    cls: "ui-density-comfortable",
+    label: "comfortable",
+    role: "公開 / モバイル · WCAG タッチ floor",
+  },
+];
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Density"
+      subtitle="One knob · <PageContainer density> · retunes controls, tables, checkbox/switch, φ unit"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Same UI, three densities</CardTitle>
+            <CardDescription>
+              Set density once per page via {"<PageContainer density>"} · never the .ui-density-*
+              classes directly. Flip the one prop and Input, Select, Checkbox, Switch and Button all
+              re-tune their height, padding and the φ rhythm together. 44px (comfortable) is the
+              WCAG / Digital Agency touch floor.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="lg" align="start" wrap>
+              {density.map((d) => (
+                <Flex key={d.cls} direction="col" gap="sm" className="min-w-0 flex-1 sm:min-w-72">
+                  <Flex direction="row" align="center" justify="between" gap="sm">
+                    <Text size="xs" mono>
+                      density=&quot;{d.label}&quot;
+                    </Text>
+                    {d.label === "default" && <Badge variant="secondary">default</Badge>}
+                  </Flex>
+                  <Text size="xs" tone="muted">
+                    {d.role}
+                  </Text>
+                  <div className={d.cls}>
+                    <DensitySample idPrefix={d.label} />
+                  </div>
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Table row density (DataTable density)</CardTitle>
+            <CardDescription>
+              The DataTable owns its own density axis: density=&quot;compact&quot; vs
+              density=&quot;comfortable&quot; swaps --table-row-height and --table-cell-padding-y.
+              The density toggle in the table toolbar drives the same prop at runtime.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="lg" align="start" wrap>
+              <Flex direction="col" gap="sm" className="min-w-0 flex-1 sm:min-w-72">
+                <Text size="xs" mono>
+                  density=&quot;compact&quot;
+                </Text>
+                <Card>
+                  <CardContent flush>
+                    <DataTable
+                      data={lines}
+                      columns={columns}
+                      getRowId={(row) => row.id}
+                      density="compact"
+                    />
+                  </CardContent>
+                </Card>
+              </Flex>
+              <Flex direction="col" gap="sm" className="min-w-0 flex-1 sm:min-w-72">
+                <Text size="xs" mono>
+                  density=&quot;comfortable&quot;
+                </Text>
+                <Card>
+                  <CardContent flush>
+                    <DataTable
+                      data={lines}
+                      columns={columns}
+                      getRowId={(row) => row.id}
+                      density="comfortable"
+                    />
+                  </CardContent>
+                </Card>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Page-level knob (PageContainer density)</CardTitle>
+            <CardDescription>
+              In a real screen you pass density to the page shell once; this nested PageContainer is
+              the comfortable knob applied to a whole form. Note the taller controls and looser φ
+              rhythm versus the compact column above.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <PageContainer
+              density="comfortable"
+              title="請求書を作成"
+              subtitle="comfortable density · login / mobile surfaces"
+            >
+              <Flex direction="col" gap="md">
+                <Input defaultValue="2024-04-12" aria-label="発行日" />
+                <Select defaultValue="JPY" name="page-currency">
+                  <SelectTrigger id="page-currency" aria-label="通貨">
+                    <SelectValue placeholder="通貨を選択" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="JPY">JPY 日本円</SelectItem>
+                    <SelectItem value="USD">USD 米ドル</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Field id="page-terms" label="利用規約に同意する">
+                  <Checkbox id="page-terms" defaultChecked />
+                </Field>
+                <Flex direction="row" gap="sm" wrap>
+                  <Button>発行する</Button>
+                  <Button variant="outline">下書き保存</Button>
+                </Flex>
+              </Flex>
+            </PageContainer>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/foundation/email-tokens.tsx

@@ -0,0 +1,306 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import {
+  EMAIL_BRAND_MARK,
+  EMAIL_COLORS,
+  EMAIL_COLOR_SOURCE,
+  EMAIL_CTA,
+  EMAIL_FOCUS,
+  EMAIL_FOOTER,
+  EMAIL_MOBILE,
+  EMAIL_SHELL,
+  EMAIL_TYPOGRAPHY,
+  EMAIL_URGENCY,
+  type EmailColorToken,
+} from "@godxjp/ui/email";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+
+import { buildEmailSpecimenHtml } from "./_email-specimen";
+
+/**
+ * Email tokens · the `@godxjp/ui/email` contract (issue #227).
+ *
+ * A transactional email is rendered by Blade/Twig/MJML, by clients that strip `<style>`, ignore
+ * CSS custom properties and block remote images — so neither the React components nor the CSS
+ * token file are reachable. `@godxjp/ui/email` is the framework-neutral bridge: literal hex and px
+ * DERIVED from the same `src/tokens/` files the web reads, plus the canonical brand mark as
+ * self-contained markup. Nothing on this page types a colour or a size by hand; the two iframes
+ * below render the real specimen document at the 480px desktop width and at a narrow mobile width.
+ */
+const specimen = buildEmailSpecimenHtml();
+
+const colorRows = (Object.keys(EMAIL_COLORS) as EmailColorToken[]).map((token) => ({
+  token,
+  hex: EMAIL_COLORS[token],
+  role: EMAIL_COLOR_SOURCE[token].cssVar,
+}));
+
+const geometryGroups = [
+  {
+    title: "Shell (480px)",
+    rows: [
+      ["width", EMAIL_SHELL.width],
+      ["content column", EMAIL_SHELL.contentWidth],
+      ["card padding", EMAIL_SHELL.padding],
+      ["page gutter", EMAIL_SHELL.pagePadding],
+      ["radius", EMAIL_SHELL.radius],
+      ["border", EMAIL_SHELL.borderWidth],
+      ["block gap", EMAIL_SHELL.gap],
+      ["reference height", EMAIL_SHELL.referenceHeight],
+    ],
+  },
+  {
+    title: "Typography",
+    rows: [
+      ["body", `${EMAIL_TYPOGRAPHY.bodyFontSize}/${EMAIL_TYPOGRAPHY.bodyLineHeight}`],
+      ["body weight", String(EMAIL_TYPOGRAPHY.bodyFontWeight)],
+      ["heading", `${EMAIL_TYPOGRAPHY.headingFontSize}/${EMAIL_TYPOGRAPHY.headingLineHeight}`],
+      ["heading weight", String(EMAIL_TYPOGRAPHY.headingFontWeight)],
+      ["footer", `${EMAIL_FOOTER.fontSize}/${EMAIL_FOOTER.lineHeight}`],
+      ["mobile heading", EMAIL_MOBILE.headingFontSize],
+    ],
+  },
+  {
+    title: "Brand lockup",
+    rows: [
+      ["mark box", `${EMAIL_BRAND_MARK.widthPx} × ${EMAIL_BRAND_MARK.heightPx}px`],
+      ["viewBox", EMAIL_BRAND_MARK.viewBox],
+      ["mark · wordmark gap", EMAIL_BRAND_MARK.gap],
+      ["wordmark", EMAIL_BRAND_MARK.wordmarkFontSize],
+      ["wordmark weight", String(EMAIL_BRAND_MARK.wordmarkFontWeight)],
+      ["capsule", EMAIL_COLORS.brand],
+    ],
+  },
+  {
+    title: "Primary CTA",
+    rows: [
+      ["height", EMAIL_CTA.height],
+      ["line-height", EMAIL_CTA.lineHeight],
+      ["padding-x", EMAIL_CTA.paddingX],
+      ["radius", EMAIL_CTA.radius],
+      ["font-size", EMAIL_CTA.fontSize],
+      ["font-weight", String(EMAIL_CTA.fontWeight)],
+    ],
+  },
+  {
+    title: "Legal footer",
+    rows: [
+      ["font-size", EMAIL_FOOTER.fontSize],
+      ["line-height", String(EMAIL_FOOTER.lineHeight)],
+      ["link gap", EMAIL_FOOTER.linkGap],
+      ["padding-top", EMAIL_FOOTER.paddingTop],
+      ["hairline", EMAIL_FOOTER.borderWidth],
+      ["focus ring", EMAIL_FOCUS.borderWidth],
+    ],
+  },
+  {
+    title: "Mobile reflow",
+    rows: [
+      ["breakpoint", EMAIL_MOBILE.maxWidth],
+      ["card width", EMAIL_MOBILE.width],
+      ["card padding", EMAIL_MOBILE.padding],
+      ["page gutter", EMAIL_MOBILE.pagePadding],
+      ["heading", EMAIL_MOBILE.headingFontSize],
+      ["CTA width", EMAIL_MOBILE.ctaWidth],
+    ],
+  },
+] as const;
+
+const fontStacks = [
+  { label: "--email-font-family-sans", value: EMAIL_TYPOGRAPHY.fontFamily },
+  { label: "--email-font-family-mono", value: EMAIL_TYPOGRAPHY.monoFontFamily },
+];
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Email tokens"
+      subtitle="@godxjp/ui/email · literal hex + px derived from the web tokens, for templates that cannot run React or resolve var()"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Rendered specimen · 480px desktop</CardTitle>
+            <CardDescription>
+              The real document, built only from the token export: table layout, inline styles, an
+              embedded brand mark, a bulletproof CTA and the legal footer. The card is{" "}
+              {EMAIL_SHELL.width} wide inside a {EMAIL_SHELL.pagePadding} gutter; the canonical
+              invitation reference measures {EMAIL_SHELL.widthPx}×{EMAIL_SHELL.referenceHeightPx}.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <iframe
+              title="Transactional email specimen at 480px"
+              srcDoc={specimen}
+              className="border-border bg-background w-full rounded-md border"
+              style={{ height: 560 }}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Rendered specimen · narrow mobile</CardTitle>
+            <CardDescription>
+              The same document at 360px. Below the {EMAIL_MOBILE.maxWidth} breakpoint the card goes
+              fluid, the inset drops to {EMAIL_MOBILE.padding}, the heading steps down to{" "}
+              {EMAIL_MOBILE.headingFontSize} and the CTA goes full-bleed. Every reflow rule has an
+              inline fallback, so a client that strips the style block still renders the desktop
+              layout rather than a broken one.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <iframe
+              title="Transactional email specimen at 360px"
+              srcDoc={specimen}
+              className="border-border bg-background rounded-md border"
+              style={{ width: 360, height: 620 }}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Brand mark</CardTitle>
+            <CardDescription>
+              The canonical GoDX mark is the emerald capsule plus the internal glyph. The artwork is
+              byte-identical to the <code>&lt;Logo mark=&quot;godx&quot; /&gt;</code> path and to
+              the SCR-302 reference raster; only the rendered box is email-specific (
+              {EMAIL_BRAND_MARK.width}, against the 32px web box). A capsule alone is the incomplete
+              mark. In a header the mark is DECORATIVE and pairs with the readable wordmark{" "}
+              {EMAIL_BRAND_MARK.gap} away at {EMAIL_BRAND_MARK.wordmarkFontSize}/
+              {EMAIL_BRAND_MARK.wordmarkFontWeight}, so the name is announced once. Three
+              deliveries, none of which fetches an asset: inline SVG, the same SVG as a data: URL,
+              and a table fallback for clients with no SVG support.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
+              {[
+                { label: "Inline <svg>", markup: EMAIL_BRAND_MARK.svg },
+                {
+                  // Prose label, not markup: it names the email delivery form. The real delivery
+                  // on the next line is a self-contained data: URI (email clients block remote
+                  // images) and it does carry alt="GoDX".
+                  // ui-audit-disable-next-line img-needs-alt
+                  label: "data: URL in <img>",
+                  markup: `<img src="${EMAIL_BRAND_MARK.dataUri}" width="${EMAIL_BRAND_MARK.widthPx}" height="${EMAIL_BRAND_MARK.heightPx}" alt="GoDX">`,
+                },
+                // Prose label, not markup: a raw <table> is the only brand-mark fallback that
+                // renders in email clients without SVG support, so the label names it literally.
+                // ui-audit-disable-next-line no-raw-table
+                { label: "<table> fallback", markup: EMAIL_BRAND_MARK.tableHtml },
+              ].map((item) => (
+                <Flex key={item.label} direction="col" gap="sm">
+                  <div
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML={{ __html: item.markup }}
+                  />
+                  <Text size="sm" tone="muted">
+                    {item.label}
+                  </Text>
+                </Flex>
+              ))}
+            </ResponsiveGrid>
+            <Flex direction="col" gap="xs" className="mt-4">
+              <Text size="sm" tone="muted">
+                viewBox {EMAIL_BRAND_MARK.viewBox} · {EMAIL_BRAND_MARK.width}×
+                {EMAIL_BRAND_MARK.height} · capsule {EMAIL_COLORS.brand} · glyph{" "}
+                {EMAIL_COLORS.brandForeground}
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Palette</CardTitle>
+            <CardDescription>
+              Each slot is the semantic web role converted HSL→hex at module load. No literal is
+              ever copied by hand. Re-theme the role and the email follows. The action-required rail
+              uses {EMAIL_URGENCY.accent} from <code>--attention</code>; solid urgency labels use{" "}
+              {EMAIL_URGENCY.solidForeground} on {EMAIL_URGENCY.solidBackground} only for icons or
+              large/bold text. Body copy remains foreground on surface.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ sm: 2, md: 3, lg: 4 }}>
+              {colorRows.map((row) => (
+                <Flex key={row.token} direction="col" gap="xs">
+                  <div
+                    className="border-border h-12 rounded-md border"
+                    style={{ backgroundColor: row.hex }}
+                  />
+                  <Text size="sm">{row.token}</Text>
+                  <Flex gap="xs" align="center">
+                    <Badge tone="neutral" variant="outline">
+                      {row.role}
+                    </Badge>
+                    <Text size="sm" tone="muted">
+                      {row.hex}
+                    </Text>
+                  </Flex>
+                </Flex>
+              ))}
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Geometry &amp; typography</CardTitle>
+            <CardDescription>
+              Literal px only. No rem, no calc(), no var(). The ramp is the canonical SCR-302 email
+              ramp, deliberately looser and quieter than the web one: body{" "}
+              {EMAIL_TYPOGRAPHY.bodyFontSize}/{EMAIL_TYPOGRAPHY.bodyLineHeight}, title{" "}
+              {EMAIL_TYPOGRAPHY.headingFontSize} at weight {EMAIL_TYPOGRAPHY.headingFontWeight} (a
+              transactional title is calm, not bold), legal band {EMAIL_FOOTER.fontSize}/
+              {EMAIL_FOOTER.lineHeight}. Font stacks name the canonical Noto Sans JP face FIRST and
+              then degrade. No email client honours <code>@font-face</code>, so a reader gets Noto
+              Sans JP only where it is already available and otherwise lands on Hiragino
+              (macOS/iOS), Yu Gothic (Windows), M PLUS 2, Meiryo, the system UI face, Arial, then{" "}
+              <code>sans-serif</code>. Families are single-quoted so the value drops into a
+              double-quoted <code>style</code> attribute unescaped.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="xs" className="mb-4">
+              {fontStacks.map((stack) => (
+                <Flex key={stack.label} direction="col" gap="xs">
+                  <Badge tone="neutral" variant="outline">
+                    {stack.label}
+                  </Badge>
+                  <Text size="sm" tone="muted">
+                    {stack.value}
+                  </Text>
+                </Flex>
+              ))}
+            </Flex>
+            <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
+              {geometryGroups.map((group) => (
+                <Flex key={group.title} direction="col" gap="xs">
+                  <Text weight="medium">{group.title}</Text>
+                  {group.rows.map(([label, value]) => (
+                    <Flex key={label} justify="between" gap="sm">
+                      <Text size="sm" tone="muted">
+                        {label}
+                      </Text>
+                      <Text size="sm">{value}</Text>
+                    </Flex>
+                  ))}
+                </Flex>
+              ))}
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}