@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-display/card/index.tsx

@@ -1,390 +0,0 @@
-import {
-  Card,
-  CardAction,
-  CardBar,
-  CardContent,
-  CardCover,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  Descriptions,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  StatCard,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { AspectRatio, Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-import { MoreHorizontal } from "lucide-react";
-
-import coverTerrain from "../../assets/cover-terrain.svg";
-
-/*
- *  A committed SVG under docs/assets, imported so the bundler rewrites the URL against
- * PREVIEW_BASE. It replaces a picsum.photos fetch that hung `networkidle` and timed this page out
- * at 30s in CI; it was briefly an inline data: URI, which fixed the hang but put 700
- * unreadable characters in the middle of the example a consumer is meant to copy.
- */
-
-/**
- * Card — surface container. Body content ALWAYS goes in CardContent (a bare Card
- * has zero padding); titles in CardHeader/CardTitle; action bars in CardFooter.
- * Flat by design — 1px border, no shadow at rest. Composed only from real
- * @godxjp/ui components.
- */
-const accents = ["primary", "success", "warning", "info", "attention", "destructive"] as const;
-
-export default function Demo() {
-  return (
-    <PageContainer title="Card" subtitle="variant · accent · header / content / footer composition">
-      <Flex direction="col" gap="lg">
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            CardBar · scrollable controls + pinned action
-          </Text>
-          <Card>
-            <CardBar
-              extra={
-                <Button size="sm" variant="outline">
-                  保存
-                </Button>
-              }
-            >
-              <Button size="sm" variant="ghost">
-                すべて
-              </Button>
-              <Button size="sm" variant="ghost">
-                未払い
-              </Button>
-              <Button size="sm" variant="ghost">
-                超過
-              </Button>
-            </CardBar>
-            <CardContent>
-              main が混み合うと main のみ横スクロールし、extra は末尾に固定されます。
-            </CardContent>
-          </Card>
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            StatCard · stacked / inline / inverse
-          </Text>
-          <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
-            <StatCard label="月間売上" value="¥12,840,000" delta="+12.4%" hint="前月比" />
-            <StatCard label="未払い" value="28" delta="-3" accent="warning" />
-            <StatCard
-              label="平均処理時間"
-              value="2.8日"
-              delta="-0.4日"
-              inverse
-              layout="inline"
-              align="end"
-            />
-          </ResponsiveGrid>
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            Variants
-          </Text>
-          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
-            <Card variant="default">
-              <CardHeader>
-                <CardTitle level={2}>default</CardTitle>
-              </CardHeader>
-              <CardContent>標準のサーフェス</CardContent>
-            </Card>
-            <Card variant="muted">
-              <CardHeader>
-                <CardTitle level={2}>muted</CardTitle>
-              </CardHeader>
-              <CardContent>控えめな塗り</CardContent>
-            </Card>
-            <Card variant="outline">
-              <CardHeader>
-                <CardTitle level={2}>outline</CardTitle>
-              </CardHeader>
-              <CardContent>枠線のみ</CardContent>
-            </Card>
-            <Card variant="borderless">
-              <CardHeader>
-                <CardTitle level={2}>borderless</CardTitle>
-              </CardHeader>
-              <CardContent>塗りのみ · 枠線なし</CardContent>
-            </Card>
-            <Card variant="featured">
-              <CardHeader>
-                <CardTitle level={2}>featured</CardTitle>
-              </CardHeader>
-              <CardContent>強調サーフェス</CardContent>
-            </Card>
-          </ResponsiveGrid>
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            hoverable · actions · Ant Design の hoverable と actions
-          </Text>
-          <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
-            {/*
-             * `hoverable` は見た目だけのフラグです。カード全体が押せるように見えるなら、
-             * キーボードでも届く本物のコントロールを必ず同居させます（ここでは footer の
-             * Button）。div に onClick を置くのは禁止です。
-             */}
-            <Card hoverable>
-              <CardHeader>
-                <CardTitle level={2}>ホバーで浮き上がる</CardTitle>
-                <CardDescription>--card-hover-shadow まで一段上がります</CardDescription>
-              </CardHeader>
-              <CardFooter actions>
-                <Button variant="ghost">複製</Button>
-                <Button variant="ghost">共有</Button>
-                <Button variant="ghost">削除</Button>
-              </CardFooter>
-            </Card>
-            <Card hoverable accent="info" accentPlacement="perimeter">
-              <CardHeader>
-                <CardTitle level={2}>accent と併用</CardTitle>
-                <CardDescription>ホバー中もアテンションのリングは消えません</CardDescription>
-              </CardHeader>
-              <CardFooter actions>
-                <Button variant="ghost">承認</Button>
-                <Button variant="ghost">却下</Button>
-              </CardFooter>
-            </Card>
-          </ResponsiveGrid>
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            asChild · カード全体をひとつのコントロールにする
-          </Text>
-          <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
-            {/*
-             * `hoverable` が約束する「カード全体をひとつのコントロールとして描く」側。
-             * `asChild` はカードの箱を子の要素に譲るので、リンクそのものがカードになり、
-             * Tab は一度しか止まらず、スクリーンリーダーはリンクひとつとして読み上げます。
-             * 入れ子の禁則：これはもうコントロールなので、中に <a>/<Button> は置けません
-             * （HTML として不正）。中にボタンが要るカードは asChild を外し、hoverable +
-             * CardFooter のボタン（上の例）にします。
-             */}
-            <Card asChild hoverable>
-              <a href="#card-as-child">
-                <CardHeader>
-                  <CardTitle level={2}>カード全体がリンク</CardTitle>
-                  <CardDescription>
-                    タブ 1 回で届き、フォーカスリングはカードの箱に出ます
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  詳細画面へ遷移します。onClick しか無い場合もこの形（router の Link
-                  コンポーネントを子に渡す）にします。
-                </CardContent>
-              </a>
-            </Card>
-            <Card hoverable>
-              <CardHeader>
-                <CardTitle level={2}>中にコントロールがある場合</CardTitle>
-                <CardDescription>
-                  asChild は使わず、本物のコントロールを内側に置きます
-                </CardDescription>
-              </CardHeader>
-              <CardFooter separated>
-                <Button variant="outline">詳細</Button>
-              </CardFooter>
-            </Card>
-          </ResponsiveGrid>
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            Accent · accentPlacement=&quot;edge&quot; (既定 · 先頭エッジのレール)
-          </Text>
-          <ResponsiveGrid columns={{ sm: 2, md: 3, lg: 6 }}>
-            {accents.map((a) => (
-              <Card key={a} accent={a}>
-                <CardContent>{a}</CardContent>
-              </Card>
-            ))}
-          </ResponsiveGrid>
-        </Flex>
-
-        {/* accentPlacement="perimeter" — the semantic attention border */}
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            Accent · accentPlacement=&quot;perimeter&quot; (全周のアテンションボーダー)
-          </Text>
-          <Text size="xs" tone="muted">
-            variant=&quot;featured&quot;
-            は定義上ブランド色の全周ボーダー。トーンを自分で決めたいとき —
-            「対応が必要」「失敗した」— は accent と accentPlacement の 2
-            語で表す。本文の左インセットは レール版と同じ位置に戻るので、placement
-            を切り替えても文字は動かない。
-          </Text>
-          <ResponsiveGrid columns={{ sm: 2, md: 3, lg: 6 }}>
-            {accents.map((a) => (
-              <Card key={a} accent={a} accentPlacement="perimeter">
-                <CardContent>{a}</CardContent>
-              </Card>
-            ))}
-          </ResponsiveGrid>
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            Composition · banded header + separated footer
-          </Text>
-          <Card accent="primary">
-            <CardHeader banded>
-              <CardTitle level={2}>請求書 INV-2024-0312</CardTitle>
-              <CardDescription>株式会社ベトヤ · 2024-04-12</CardDescription>
-              <CardAction>
-                <Button variant="ghost" size="icon-sm" aria-label="メニュー">
-                  <MoreHorizontal />
-                </Button>
-              </CardAction>
-            </CardHeader>
-            <CardContent>
-              <Descriptions>
-                <Descriptions.Item label="小計">¥438,182</Descriptions.Item>
-                <Descriptions.Item label="消費税 (10%)">¥43,818</Descriptions.Item>
-                <Descriptions.Item label="合計">¥482,000</Descriptions.Item>
-              </Descriptions>
-            </CardContent>
-            <CardFooter separated>
-              <Flex direction="row" wrap gap="sm" justify="end">
-                <Button variant="outline">却下</Button>
-                <Button>承認</Button>
-              </Flex>
-            </CardFooter>
-          </Card>
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            Density · tight 12px · base 16px · cozy 20px
-          </Text>
-          <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
-            <Card density="tight">
-              <CardHeader>
-                <CardTitle level={2}>tight</CardTitle>
-              </CardHeader>
-              <CardContent>余白を詰めた密度</CardContent>
-            </Card>
-            <Card>
-              <CardHeader>
-                <CardTitle level={2}>base</CardTitle>
-              </CardHeader>
-              <CardContent>既定の密度</CardContent>
-            </Card>
-            <Card density="cozy">
-              <CardHeader>
-                <CardTitle level={2}>cozy</CardTitle>
-              </CardHeader>
-              <CardContent>ゆったりした密度</CardContent>
-            </Card>
-          </ResponsiveGrid>
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            CardContent · flush (edge-to-edge table) · solo (no header)
-          </Text>
-          <ResponsiveGrid columns={{ sm: 1, lg: 2 }}>
-            <Card>
-              <CardHeader banded>
-                <CardTitle level={2}>仕訳明細</CardTitle>
-              </CardHeader>
-              <CardContent flush>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>勘定科目</TableHead>
-                      <TableHead className="text-end">借方</TableHead>
-                      <TableHead className="text-end">貸方</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    <TableRow>
-                      <TableCell>売掛金</TableCell>
-                      <TableCell className="text-end tabular-nums">¥482,000</TableCell>
-                      <TableCell className="text-end">—</TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell>売上高</TableCell>
-                      <TableCell className="text-end">—</TableCell>
-                      <TableCell className="text-end tabular-nums">¥438,182</TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell>仮受消費税</TableCell>
-                      <TableCell className="text-end">—</TableCell>
-                      <TableCell className="text-end tabular-nums">¥43,818</TableCell>
-                    </TableRow>
-                  </TableBody>
-                </Table>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardContent solo>
-                ヘッダーのない本文。solo はトップパディングをカードのシェルに合わせます。
-              </CardContent>
-            </Card>
-          </ResponsiveGrid>
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            CardCover · full-bleed media, header below
-          </Text>
-          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
-            <Card>
-              <CardCover>
-                <AspectRatio ratio={16 / 9}>
-                  <img
-                    src={coverTerrain}
-                    alt="オフィスビルの外観"
-                    className="h-full w-full object-cover"
-                  />
-                </AspectRatio>
-              </CardCover>
-              <CardHeader>
-                <CardTitle level={2}>渋谷オフィス</CardTitle>
-                <CardDescription>東京都渋谷区 · 内見受付中</CardDescription>
-              </CardHeader>
-              <CardFooter separated>
-                <Button variant="ghost">詳細を見る</Button>
-              </CardFooter>
-            </Card>
-          </ResponsiveGrid>
-        </Flex>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>連続したツールバー</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Text>本文</Text>
-          </CardContent>
-          <CardBar pad={{ block: 1, inline: 3 }} surface="muted" border="block-start" gap="sm">
-            <Button variant="ghost" size="sm">
-              添付
-            </Button>
-          </CardBar>
-          <CardBar
-            pad={{ block: 2, inline: 3 }}
-            border="block-start"
-            gap="sm"
-            extra={<Button>送信</Button>}
-          >
-            <Text tone="muted">下書きを保存しました</Text>
-          </CardBar>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/carousel.tsx

@@ -1,160 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Carousel,
-  CarouselContent,
-  CarouselDots,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  StatCard,
-} from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Carousel — Embla-backed stepping list with prev/next controls.
- * Compose Carousel > CarouselContent > CarouselItem + CarouselPrevious/Next.
- * Structurally configured via `opts` (loop, align, axis) and `plugins`; `setApi`
- * exposes the Embla api for external controls (e.g. dot indicators via scrollTo).
- * Composed only from real @godxjp/ui components.
- */
-const months = [
-  { label: "1月 売上", value: "¥7.4M", delta: "+4%" },
-  { label: "2月 売上", value: "¥7.9M", delta: "+7%" },
-  { label: "3月 売上", value: "¥8.0M", delta: "+1%" },
-  { label: "4月 売上", value: "¥8.2M", delta: "+12%" },
-  { label: "5月 売上", value: "¥8.6M", delta: "+5%" },
-];
-
-const slides = [
-  { label: "第1四半期", value: "¥23.3M" },
-  { label: "第2四半期", value: "¥25.4M" },
-  { label: "第3四半期", value: "¥26.1M" },
-];
-
-/** Dot navigation — `CarouselDots` reads the Embla api from context; no manual `setApi` wiring. */
-function DotNavExample() {
-  return (
-    <Carousel
-      style={{ paddingInline: "var(--space-10)" }}
-      opts={{ loop: true }}
-      aria-label="ドットナビゲーション付きカルーセル"
-    >
-      <CarouselContent>
-        {slides.map((s) => (
-          <CarouselItem key={s.label}>
-            <StatCard label={s.label} value={s.value} />
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-      <CarouselDots />
-    </Carousel>
-  );
-}
-
-export default function Demo() {
-  return (
-    <PageContainer title="Carousel" subtitle="Embla-backed stepping list with prev/next controls">
-      <Flex direction="col" gap="lg">
-        {/* Default horizontal, multi-up responsive track. px-10 clears the absolute arrow buttons. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>月次 KPI</CardTitle>
-            <CardDescription>
-              Default horizontal track. Step with prev/next; arrows auto-disable at the first and
-              last slide.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Carousel style={{ paddingInline: "var(--space-10)" }} aria-label="月次 KPI カルーセル">
-              <CarouselContent>
-                {months.map((m) => (
-                  <CarouselItem key={m.label} className="basis-full sm:basis-1/2 lg:basis-1/3">
-                    <StatCard label={m.label} value={m.value} delta={m.delta} />
-                  </CarouselItem>
-                ))}
-              </CarouselContent>
-              <CarouselPrevious />
-              <CarouselNext />
-            </Carousel>
-          </CardContent>
-        </Card>
-
-        {/* opts: looping single-up gallery — wraps past the ends, so both arrows stay enabled. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ループ ギャラリー</CardTitle>
-            <CardDescription>
-              opts=&#123;&#123; loop: true, align: &quot;start&quot; &#125;&#125; — wraps past the
-              ends, so prev/next never disable.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Carousel
-              style={{ paddingInline: "var(--space-10)" }}
-              opts={{ loop: true, align: "start" }}
-              aria-label="ループギャラリーカルーセル"
-            >
-              <CarouselContent>
-                {months.map((m) => (
-                  <CarouselItem key={m.label}>
-                    <StatCard label={m.label} value={m.value} delta={m.delta} />
-                  </CarouselItem>
-                ))}
-              </CarouselContent>
-              <CarouselPrevious />
-              <CarouselNext />
-            </Carousel>
-          </CardContent>
-        </Card>
-
-        {/* setApi + scrollTo: external dot navigation, active dot seeded visible at rest. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ドット ナビゲーション</CardTitle>
-            <CardDescription>
-              Drop in CarouselDots and it reads the Embla api from context, rendering one dot per
-              slide. The active dot widens and carries aria-current.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <DotNavExample />
-          </CardContent>
-        </Card>
-
-        {/* opts.axis: vertical orientation — emits data-orientation="vertical". */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>縦方向 (vertical)</CardTitle>
-            <CardDescription>
-              opts=&#123;&#123; axis: &quot;y&quot; &#125;&#125; — stacks slides and moves the
-              prev/next controls to top and bottom.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Carousel
-              style={{ paddingBlock: "var(--space-10)" }}
-              opts={{ axis: "y" }}
-              aria-label="縦方向カルーセル"
-            >
-              <CarouselContent className="h-48">
-                {slides.map((s) => (
-                  <CarouselItem key={s.label}>
-                    <StatCard label={s.label} value={s.value} />
-                  </CarouselItem>
-                ))}
-              </CarouselContent>
-              <CarouselPrevious />
-              <CarouselNext />
-            </Carousel>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}