@godxjp/ui 31.31.7 → 32.0.0

package/docs/layout/account-chip.tsx

@@ -1,72 +0,0 @@
-import { Button } from "@godxjp/ui/general";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@godxjp/ui/data-entry";
-import { AccountChip, Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * AccountChip — the signed-in user in a PageContainer `extra` slot, a Topbar or a footer row.
- * Avatar, name and one ghost action at the control tier height, level with the controls beside it.
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="AccountChip"
-      subtitle="サインイン中のユーザー（アバター・名前・1 アクション）"
-      extra={
-        <>
-          <Select aria-label="言語" defaultValue="ja">
-            <SelectTrigger width="auto">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="ja">日本語</SelectItem>
-              <SelectItem value="en">English</SelectItem>
-              <SelectItem value="vi">Tiếng Việt</SelectItem>
-            </SelectContent>
-          </Select>
-          <Button variant="outline">履歴</Button>
-          <AccountChip
-            name="Satoshi"
-            email="satoshi@example.com"
-            actionLabel="サインアウト"
-            onAction={() => {}}
-          />
-          <Button>送信</Button>
-        </>
-      }
-    >
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>ヘッダー行の中で</CardTitle>
-          <CardDescription>
-            上の `extra` スロット: Select（width=&quot;auto&quot;）、Button、AccountChip、Button
-            がすべて同じ --control-height に揃います。
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Flex direction="col" gap="md">
-            <AccountChip name="Nguyễn Thị Thu Hà" email="thuha@example.com" />
-            <AccountChip
-              name="Satoshi"
-              avatarSrc="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><rect width='32' height='32' fill='%23334155'/></svg>"
-              actionLabel="Sign out"
-              onAction={() => {}}
-            />
-            <AccountChip
-              name="Disabled action"
-              actionLabel="Sign out"
-              onAction={() => {}}
-              disabled
-            />
-          </Flex>
-        </CardContent>
-      </Card>
-    </PageContainer>
-  );
-}

package/docs/layout/admin-collection.tsx

@@ -1,122 +0,0 @@
-import { useMemo, useState } from "react";
-import { Plus } from "lucide-react";
-
-import { DataTable, type ColumnDef } from "@godxjp/ui/data-display";
-import { SearchInput } from "@godxjp/ui/data-entry";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { Toolbar, ToolbarGroup } from "@godxjp/ui/navigation";
-
-type Locale = "ja" | "en" | "vi";
-type Organization = { id: string; name: string; slug: string; members: number; status: string };
-
-const copy = {
-  ja: {
-    title: "組織",
-    subtitle: "すべての組織を管理します",
-    search: "組織を検索",
-    create: "組織を作成",
-  },
-  en: {
-    title: "Organizations",
-    subtitle: "Manage every organization in this environment",
-    search: "Search organizations",
-    create: "Create organization",
-  },
-  vi: {
-    title: "Tổ chức",
-    subtitle: "Quản lý toàn bộ tổ chức trong môi trường này",
-    search: "Tìm kiếm tổ chức",
-    create: "Tạo tổ chức",
-  },
-} as const;
-
-const rows: Organization[] = [
-  { id: "org_01", name: "GoDX Japan", slug: "godx-japan", members: 142, status: "Active" },
-  {
-    id: "org_02",
-    name: "Famsys Operations",
-    slug: "famsys-operations",
-    members: 86,
-    status: "Active",
-  },
-  {
-    id: "org_03",
-    name: "International Customer Experience Division",
-    slug: "customer-experience-international",
-    members: 39,
-    status: "Review",
-  },
-  {
-    id: "org_04",
-    name: "Nền tảng vận hành Việt Nam",
-    slug: "van-hanh-viet-nam",
-    members: 71,
-    status: "Active",
-  },
-  {
-    id: "org_05",
-    name: "関西プロダクト開発統括部",
-    slug: "kansai-product-development",
-    members: 54,
-    status: "Active",
-  },
-];
-
-const columns: ColumnDef<Organization>[] = [
-  { key: "name", header: "Organization", render: (row) => <Text weight="medium">{row.name}</Text> },
-  { key: "slug", header: "Slug", render: (row) => <Text mono>{row.slug}</Text> },
-  { key: "members", header: "Members", align: "right" },
-  { key: "status", header: "Status" },
-];
-
-export default function AdminCollectionPreview() {
-  const [locale, setLocale] = useState<Locale>("ja");
-  const [query, setQuery] = useState("");
-  const labels = copy[locale];
-  const filtered = useMemo(
-    () =>
-      rows.filter((row) => `${row.name} ${row.slug}`.toLowerCase().includes(query.toLowerCase())),
-    [query],
-  );
-
-  return (
-    <PageContainer
-      preset="admin-collection"
-      title={labels.title}
-      subtitle={labels.subtitle}
-      extra={
-        <Button size="sm">
-          <Plus aria-hidden="true" />
-          {labels.create}
-        </Button>
-      }
-    >
-      <Toolbar aria-label="Admin collection controls">
-        <ToolbarGroup label={<span className="sr-only">{labels.search}</span>}>
-          <SearchInput
-            ariaLabel={labels.search}
-            placeholder={labels.search}
-            value={query}
-            onValueChange={setQuery}
-          />
-        </ToolbarGroup>
-        <ToolbarGroup label={<span className="sr-only">Locale</span>}>
-          <Flex gap="xs" wrap>
-            {(["ja", "en", "vi"] as const).map((language) => (
-              <Button
-                key={language}
-                size="sm"
-                variant={locale === language ? "default" : "outline"}
-                onClick={() => setLocale(language)}
-              >
-                {language.toUpperCase()}
-              </Button>
-            ))}
-          </Flex>
-        </ToolbarGroup>
-      </Toolbar>
-      <DataTable data={filtered} columns={columns} getRowId={(row) => row.id} />
-    </PageContainer>
-  );
-}

package/docs/layout/affix.tsx

@@ -1,209 +0,0 @@
-import { useRef, useState } from "react";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Descriptions,
-  ScrollArea,
-} from "@godxjp/ui/data-display";
-import { Button, Heading, Paragraph, Text } from "@godxjp/ui/general";
-import { Affix, Flex, PageContainer } from "@godxjp/ui/layout";
-import { Check, Filter } from "lucide-react";
-
-/**
- * Affix — Ant Design `Affix` (6.6.5). Pin an element to its scrollport, and REPORT that it is
- * pinned — which is the whole difference from `position: sticky`, and the reason both website
- * showcases in docs/showcase/ wrote `position: sticky` and got nothing usable out of it.
- *
- * The cases on this page are the ones that break a hand-rolled sticky header:
- *
- * — the PAGE JUMP. Taking a bar out of flow removes its height, so everything below it moves up by
- *   exactly that height. Card 1 prints the measured number it is holding open;
- * — the CONDENSE. The bar is a different bar once pinned — a smaller control, a shorter title, a
- *   monogram instead of a wordmark — and nothing but the reported boolean can drive that;
- * — a SCROLLING CONTAINER that is not the page, which is `target`;
- * — the BLOCK-END pin, which is the sticky form footer and not the sticky header;
- * — a bar of CJK beside Latin and a 71-character unbreakable token, because the measured height is
- *   only right if it is measured at the width it is actually laid out at;
- * — and the narrow case, where the same bar wraps to two lines and the placeholder has to follow.
- *
- * Composed only from real @godxjp/ui components.
- */
-
-/** A real filename in a real toolbar: 71 characters with nowhere to break. */
-const UNBREAKABLE = "RegionalDeploymentConfigurationParameterNamespaceIdentifierOverrides123";
-
-function Filler({ id, title, lines }: { id: string; title: string; lines: number }) {
-  return (
-    <section id={id} aria-labelledby={`${id}-heading`}>
-      <Heading level={3} id={`${id}-heading`}>
-        {title}
-      </Heading>
-      {Array.from({ length: lines }, (_, line) => (
-        <Paragraph key={line}>
-          スクロールしてください。Scroll on, and keep scrolling: the bar above only becomes
-          interesting once the page has gone far enough past it for the pin to fire.
-        </Paragraph>
-      ))}
-    </section>
-  );
-}
-
-export default function Demo() {
-  const paneRef = useRef<HTMLDivElement>(null);
-  const [pinned, setPinned] = useState(false);
-  const [paneP, setPanePinned] = useState(false);
-  const [footerPinned, setFooterPinned] = useState(false);
-
-  return (
-    <PageContainer
-      title="Affix"
-      subtitle="antd Affix · the measured placeholder, the reported boolean, the scrolling target"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle>1 · The condensing bar, against the page</CardTitle>
-            <CardDescription>
-              Everything that changes below is driven by `onChange` alone: the title loses its
-              qualifier, the primary action drops a size tier, and the state badge flips. Nothing
-              here is a second measurement, and `position: sticky` can drive none of it.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Affix offsetBlockStart={8} onChange={setPinned}>
-              <Card>
-                <CardContent>
-                  <Flex align="center" justify="between" gap="sm" wrap>
-                    <Text weight="medium">
-                      {pinned ? "請求書 · Invoices" : "請求書 · Invoices, 2026 年度 (all regions)"}
-                    </Text>
-                    <Flex align="center" gap="sm">
-                      <Badge variant={pinned ? "default" : "secondary"}>
-                        {pinned ? "affixed" : "in flow"}
-                      </Badge>
-                      <Button size={pinned ? "sm" : "md"}>
-                        <Check aria-hidden="true" />
-                        承認 · Approve
-                      </Button>
-                    </Flex>
-                  </Flex>
-                </CardContent>
-              </Card>
-            </Affix>
-            <Filler id="affix-page-body" title="A long page to scroll" lines={14} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>2 · Inside a scrolling target, not the page</CardTitle>
-            <CardDescription>
-              `target` is Ant Design&apos;s, and it is the answer to a page whose scroll belongs to
-              a pane: the bar pins against the pane&apos;s edge and stops there, not at the top of
-              the window. The label carries a 71-character unbreakable token beside CJK, so the
-              measured height is taken at the width the bar is really laid out at.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ScrollArea viewportRef={paneRef} className="h-80" label="Filter pane">
-              <Affix target={() => paneRef.current} onChange={setPanePinned}>
-                <Card>
-                  <CardContent>
-                    <Flex align="center" gap="sm" wrap>
-                      <Filter aria-hidden="true" />
-                      {/* `truncate`, not a wrap: a 71-character identifier with nowhere to break
-                          would otherwise spill 255px past its box at 375px (measured by
-                          check:frame-overflow, which is what caught it). A toolbar label is one
-                          line; the full string stays in the DOM and in the accessible name. */}
-                      <Text weight="medium" truncate className="min-w-0">
-                        絞り込み · {UNBREAKABLE}
-                      </Text>
-                      <Badge variant={paneP ? "default" : "secondary"}>
-                        {paneP ? "affixed" : "in flow"}
-                      </Badge>
-                    </Flex>
-                  </CardContent>
-                </Card>
-              </Affix>
-              <Filler id="affix-pane-body" title="Pane content" lines={12} />
-            </ScrollArea>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>3 · offsetBlockEnd · the sticky form footer</CardTitle>
-            <CardDescription>
-              Passing the block-END offset (and no block-start one) is what selects bottom pinning,
-              exactly as in Ant Design. It releases the moment the real end of the form reaches it,
-              which is the behaviour a `position: sticky` footer cannot express without a second
-              element.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Filler id="affix-form-body" title="Form fields" lines={10} />
-            <Affix offsetBlockEnd={8} onChange={setFooterPinned}>
-              <Card>
-                <CardContent>
-                  <Flex align="center" justify="between" gap="sm" wrap>
-                    <Text tone="muted">
-                      {footerPinned ? "未保存の変更があります" : "すべて保存済み"}
-                    </Text>
-                    <Flex align="center" gap="sm">
-                      <Badge variant={footerPinned ? "default" : "secondary"}>
-                        {footerPinned ? "affixed" : "in flow"}
-                      </Badge>
-                      <Button variant="outline">キャンセル</Button>
-                      <Button>保存</Button>
-                    </Flex>
-                  </Flex>
-                </CardContent>
-              </Card>
-            </Affix>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>4 · What the component is actually reporting</CardTitle>
-            <CardDescription>
-              Three independent Affixes, three independent booleans. Each one fires on its own pin
-              transition and on nothing else, never once per scroll frame.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Descriptions
-              items={[
-                {
-                  label: "1 · page bar",
-                  children: (
-                    <Badge variant={pinned ? "default" : "secondary"}>{String(pinned)}</Badge>
-                  ),
-                },
-                {
-                  label: "2 · pane bar",
-                  children: (
-                    <Badge variant={paneP ? "default" : "secondary"}>{String(paneP)}</Badge>
-                  ),
-                },
-                {
-                  label: "3 · form footer",
-                  children: (
-                    <Badge variant={footerPinned ? "default" : "secondary"}>
-                      {String(footerPinned)}
-                    </Badge>
-                  ),
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/layout/app-launcher.tsx

@@ -1,211 +0,0 @@
-import { useState } from "react";
-import { BarChart3, LifeBuoy, MessagesSquare, Receipt, Users } from "lucide-react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  AppLauncher,
-  type AppLauncherLabels,
-  Flex,
-  PageContainer,
-  ResponsiveGrid,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { useTranslation } from "@godxjp/ui/i18n";
-
-const apps = [
-  { id: "console", name: "Console", href: "/console", icon: <BarChart3 />, current: true },
-  { id: "billing", name: "Billing", href: "/billing", icon: <Receipt /> },
-  { id: "people", name: "People", href: "/people", icon: <Users /> },
-  { id: "chat", name: "Chat", href: "/chat", icon: <MessagesSquare /> },
-];
-
-const groups = [
-  {
-    label: "More from Acme",
-    apps: [
-      {
-        id: "support",
-        name: "Support",
-        href: "https://support.example.test",
-        icon: <LifeBuoy />,
-        // An external destination renders a plain anchor and bypasses `linkComponent` — a
-        // client-side router link to another origin is a router asked to route somewhere it
-        // does not own.
-        external: true,
-      },
-    ],
-  },
-];
-
-const labels: AppLauncherLabels = {
-  trigger: "Acme のアプリ",
-  title: "アプリを切り替える",
-  empty: "利用できるアプリがありません。",
-  loading: "アプリを読み込み中",
-  retry: "再試行",
-  externalHint: "（新しいタブで開きます）",
-};
-
-/**
- * AppLauncher — the nine-dot platform app grid.
- *
- * WHERE IT SITS AMONG THINGS THAT LOOK LIKE IT:
- *
- * - `ServiceLauncherCard` (data-display) is also a launcher tile, but a PAGE-SIZED one — status,
- *   hostname, plan, an action button, a reason it is locked — for a service-catalogue page where
- *   choosing is a considered act. This tile is bar-sized: mark plus name, the whole tile one link,
- *   because changing app is a reflex. A grid of `ServiceLauncherCard`s inside a popover is the
- *   wrong component, not a smaller version of this one.
- * - `AppShell navRail` says the SAME platform scope as a docked column. Pick ONE. The launcher for
- *   a platform with MANY apps where switching is occasional (the Google Workspace shape); the rail
- *   for a single product where switching workspace is constant enough to deserve permanent screen
- *   width (the Slack shape). Shipping both puts one scope in two places.
- */
-export default function Demo() {
-  const { t } = useTranslation();
-  const [error, setError] = useState<string | undefined>("アプリ一覧を取得できませんでした。");
-
-  return (
-    <PageContainer title="AppLauncher" subtitle="topbar のセル · popover/sheet · グループ · 状態">
-      <ResponsiveGrid columns={{ sm: 1, lg: 2 }}>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>バーの中のセル</CardTitle>
-            <CardDescription>
-              trigger は `TopbarItem` なので、高さはバーそのもの（`align-self: stretch`）。 `Button
-              variant=&quot;ghost&quot;` を置くと、背の高い帯の中に浮いた丸薬になります。 panel は
-              `responsive=&quot;auto&quot;` で、共有トークン
-              `--sheet-responsive-breakpoint-width`（48rem）を境に popover と bottom sheet
-              が入れ替わります。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Topbar
-                start={<Text weight="medium">Acme Console</Text>}
-                end={
-                  <AppLauncher
-                    apps={apps}
-                    groups={groups}
-                    labels={labels}
-                    footer={
-                      <>
-                        <a href="#app-launcher-request-access">
-                          {t("appLauncherDocs.requestAccess")}
-                        </a>
-                        <a href="#app-launcher-all-apps">{t("appLauncherDocs.allApps")}</a>
-                      </>
-                    }
-                  />
-                }
-              />
-              <Text size="sm" tone="muted">
-                current のアプリだけが `aria-current=&quot;page&quot;` を持ちます。
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>列数と非同期状態</CardTitle>
-            <CardDescription>
-              既定は3列（Google と同じ形）。`columns` は1インスタンスの上書きです。 loading と error
-              は grid の代わりに同じ所有 surface へ表示されます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Topbar
-                start={<Text weight="medium">4 列</Text>}
-                end={
-                  <AppLauncher
-                    apps={apps}
-                    groups={groups}
-                    labels={labels}
-                    columns={4}
-                    responsive="popover"
-                  />
-                }
-              />
-              <Topbar
-                start={<Text weight="medium">loading</Text>}
-                end={<AppLauncher apps={apps} labels={labels} loading responsive="popover" />}
-              />
-              <Topbar
-                start={<Text weight="medium">empty</Text>}
-                end={<AppLauncher apps={[]} labels={labels} responsive="sheet" />}
-              />
-              <Topbar
-                start={<Text weight="medium">error</Text>}
-                end={
-                  <AppLauncher
-                    apps={apps}
-                    labels={labels}
-                    error={error}
-                    onRetry={() => setError(undefined)}
-                    responsive="popover"
-                  />
-                }
-              />
-              {!error ? (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setError("再試行に失敗しました。")}
-                >
-                  エラーを復元
-                </Button>
-              ) : null}
-            </Flex>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>バー以外の chrome · icon とパネルの向き</CardTitle>
-            <CardDescription>
-              `appearance=&quot;icon&quot;` は正方形の ghost Button。バーではない chrome（nav rail、
-              カードのヘッダ、ツールバー）のための箱で、glyph は同じです。 パネルは既定で chrome
-              から外へ開きます（bar は下＋end、それ以外は inline-end＋start）。 位置を変えられる
-              chrome だけが向きを知っているので、`side` / `align` で明示できます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="md">
-              <AppLauncher apps={apps} groups={groups} labels={labels} appearance="icon" />
-              <AppLauncher
-                apps={apps}
-                groups={groups}
-                labels={labels}
-                appearance="icon"
-                side="bottom"
-                align="start"
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Launchpad · 画面いっぱい</CardTitle>
-            <CardDescription>
-              `responsive=&quot;fullscreen&quot;` は plaform の start bar のための形。背後のページを
-              ぼかし、その地の上にタイルが並びます（macOS Launchpad / Windows Start）。 幅に関係なく
-              1つの surface に固定。列数だけが surface に合わせて 3 · 4 · 5 · 6 と上がります。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AppLauncher
-              apps={apps}
-              groups={groups}
-              labels={labels}
-              appearance="icon"
-              responsive="fullscreen"
-            />
-          </CardContent>
-        </Card>
-      </ResponsiveGrid>
-    </PageContainer>
-  );
-}