@godxjp/ui 31.31.8 → 32.0.1

package/docs/foundation/spacing.tsx

@@ -1,216 +0,0 @@
-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",
-  // The DISPLAY end of the grid (gh#831) — Carbon $spacing-11 / $spacing-12, for marketing bands.
-  "--space-20",
-  "--space-24",
-];
-
-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-section-band", role: "marketing band padding-block (= --space-20)" },
-  { token: "--space-section-hero", role: "hero band padding-block (= --space-24)" },
-  { 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>
-  );
-}