@godxjp/ui 31.31.8 → 32.0.0

package/docs/navigation/filter-bar.tsx

@@ -1,247 +0,0 @@
-import { useState } from "react";
-import { Plus } from "lucide-react";
-
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  SearchInput,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { FilterBar, FilterBarGroup } from "@godxjp/ui/navigation";
-
-const STATUSES = [
-  { value: "all", label: "All statuses" },
-  { value: "active", label: "Active" },
-  { value: "paused", label: "Paused" },
-];
-
-const MODEL_STATUSES = [
-  { value: "active", label: "有効" },
-  { value: "invited", label: "招待中" },
-  { value: "suspended", label: "停止" },
-];
-
-const MODEL_ROLES = [
-  { value: "member", label: "Thành viên" },
-  { value: "manager", label: "Quản lý" },
-];
-
-/** FilterBar — domain-neutral list filtering with consumer-owned state and clear behavior. */
-export default function Demo() {
-  const [query, setQuery] = useState("");
-  const [status, setStatus] = useState("all");
-  const [department, setDepartment] = useState("all");
-  const [approval, setApproval] = useState("all");
-  const [period, setPeriod] = useState("all");
-  const hasActiveFilters = query !== "" || status !== "all";
-
-  // Typed model — ALL state is consumer data; the bar only renders it.
-  const [modelQuery, setModelQuery] = useState("田中");
-  const [modelStatus, setModelStatus] = useState("active");
-  const [modelRole, setModelRole] = useState("");
-  const modelChips = [
-    ...(modelQuery !== "" ? [{ value: "q", label: `検索: ${modelQuery}` }] : []),
-    ...(modelStatus !== ""
-      ? [
-          {
-            value: "status",
-            label: `状態: ${MODEL_STATUSES.find((s) => s.value === modelStatus)?.label ?? modelStatus}`,
-          },
-        ]
-      : []),
-    ...(modelRole !== ""
-      ? [
-          {
-            value: "role",
-            label: `Vai trò: ${MODEL_ROLES.find((r) => r.value === modelRole)?.label ?? modelRole}`,
-          },
-        ]
-      : []),
-  ];
-  const removeModelChip = (value: string) => {
-    if (value === "q") setModelQuery("");
-    if (value === "status") setModelStatus("");
-    if (value === "role") setModelRole("");
-  };
-  const clearModelFilters = () => {
-    setModelQuery("");
-    setModelStatus("");
-    setModelRole("");
-  };
-  const modelResultCount = modelChips.length === 0 ? 128 : 42 - modelChips.length * 11;
-
-  return (
-    <PageContainer
-      title="FilterBar"
-      subtitle="Search, labelled filters, active state, consumer-owned reset, and both responsive overflow strategies"
-    >
-      <Flex direction="col" gap="lg">
-        {/* Typed model — search/filters/chips/reset/result-count/actions as DATA.
-            The bar owns layout, token widths, chip lifecycle and keyboard order; the page owns
-            every piece of state. Remove a chip, reset, or pick a filter and watch the chips row
-            and the localized result count follow. */}
-        <Flex direction="col" gap="xs">
-          <Text size="xs" tone="muted">
-            typed model · search + filters + chips + reset + result count + actions, all
-            consumer-controlled data
-          </Text>
-          <FilterBar
-            search={{
-              value: modelQuery,
-              onValueChange: setModelQuery,
-              placeholder: "氏名・メールで検索",
-              ariaLabel: "メンバーを検索",
-            }}
-            filters={[
-              {
-                value: "status",
-                label: "ステータス",
-                options: MODEL_STATUSES,
-                selected: modelStatus,
-                onSelectedChange: setModelStatus,
-                placeholder: "すべて",
-              },
-              {
-                value: "role",
-                label: "Vai trò",
-                options: MODEL_ROLES,
-                selected: modelRole,
-                onSelectedChange: setModelRole,
-                placeholder: "Tất cả",
-              },
-            ]}
-            chips={modelChips}
-            onChipRemove={removeModelChip}
-            onClear={clearModelFilters}
-            hasActiveFilters={modelChips.length > 0}
-            resultCount={modelResultCount}
-            actions={
-              <Button size="sm">
-                <Plus aria-hidden="true" />
-                メンバーを追加
-              </Button>
-            }
-          />
-        </Flex>
-
-        {/* error — the ONE sentence that says why a filter set was refused, and the reason this
-            page has an example at all: `.ui-filter-bar-error` was painted with the destructive
-            FILL tier (2.95:1 on dark, gh#612) and NO route rendered it, so no sweep could ever
-            have caught that. Static, not behind a submit: a surface that needs an interaction is
-            a surface `check:contrast` does not measure. */}
-        <Flex direction="col" gap="xs">
-          <Text size="xs" tone="muted">
-            error · role=&quot;alert&quot; line under the bar, painted from the TEXT tier
-          </Text>
-          <FilterBar
-            search={{
-              value: modelQuery,
-              onValueChange: setModelQuery,
-              placeholder: "氏名・メールで検索",
-              ariaLabel: "メンバーを検索",
-            }}
-            error="期間の開始日が終了日より後です。条件を修正してください。"
-          />
-        </Flex>
-
-        {/* overflow="wrap" (default) — stacked below 640px, wrapping rows above. */}
-        <Flex direction="col" gap="xs">
-          <Text size="xs" tone="muted">
-            overflow=&quot;wrap&quot; (default) · a small filter set wraps onto extra rows
-          </Text>
-          <FilterBar
-            hasActiveFilters={hasActiveFilters}
-            onClear={() => {
-              setQuery("");
-              setStatus("all");
-            }}
-          >
-            <SearchInput
-              aria-label="Search records"
-              placeholder="Search records"
-              value={query}
-              onSearch={setQuery}
-            />
-            {/* controlId makes the visible caption the Select's real <label>. */}
-            <FilterBarGroup label="Status" controlId="fb-status">
-              <Select value={status} onValueChange={setStatus}>
-                <SelectTrigger id="fb-status">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {STATUSES.map((s) => (
-                    <SelectItem key={s.value} value={s.value}>
-                      {s.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </FilterBarGroup>
-          </FilterBar>
-        </Flex>
-
-        {/* overflow="scroll" — one bounded inline-scrolling row at >= 640px. The long JA/EN/VI
-            captions are the point: with `wrap` this same set becomes a three-row strip. */}
-        <Flex direction="col" gap="xs">
-          <Text size="xs" tone="muted">
-            overflow=&quot;scroll&quot; · many filters with long JA/EN/VI labels stay on ONE bounded
-            row (still stacked below 640px)
-          </Text>
-          <FilterBar
-            overflow="scroll"
-            hasActiveFilters={department !== "all" || approval !== "all" || period !== "all"}
-            onClear={() => {
-              setDepartment("all");
-              setApproval("all");
-              setPeriod("all");
-            }}
-          >
-            <FilterBarGroup label="部署（すべての拠点を含む）" controlId="fb-department">
-              <Select value={department} onValueChange={setDepartment}>
-                <SelectTrigger id="fb-department">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">すべての部署</SelectItem>
-                  <SelectItem value="warehouse">倉庫</SelectItem>
-                </SelectContent>
-              </Select>
-            </FilterBarGroup>
-            <FilterBarGroup
-              label="Trạng thái phê duyệt của toàn bộ phòng ban"
-              controlId="fb-approval"
-            >
-              <Select value={approval} onValueChange={setApproval}>
-                <SelectTrigger id="fb-approval">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">Tất cả trạng thái</SelectItem>
-                  <SelectItem value="pending">Chờ phê duyệt</SelectItem>
-                </SelectContent>
-              </Select>
-            </FilterBarGroup>
-            <FilterBarGroup
-              label="Reporting period including carried-over adjustments"
-              controlId="fb-period"
-            >
-              <Select value={period} onValueChange={setPeriod}>
-                <SelectTrigger id="fb-period">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">All periods</SelectItem>
-                  <SelectItem value="month">This month</SelectItem>
-                </SelectContent>
-              </Select>
-            </FilterBarGroup>
-          </FilterBar>
-        </Flex>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/navigation/mega-menu-panel.tsx

@@ -1,86 +0,0 @@
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { MegaMenu, type MegaMenuItemProp } from "@godxjp/ui/navigation";
-import { ShieldCheck, Users } from "lucide-react";
-
-/**
- * MegaMenu — ONE panel, open, and nothing else on the page.
- *
- * A separate frame from `mega-menu.tsx` on purpose. An open panel is an OVERLAY: it is
- * `position: fixed` so that `Topbar`'s `overflow: clip` slots and `Card`'s `overflow: hidden` do
- * not clip it away, which means an always-open panel paints over whatever is beneath it. On a
- * page of demo cards that is a measurement hazard — the open panel covers the next card and every
- * sweep of that card reads the panel instead. So the open state lives here, alone, where it is
- * the subject rather than the obstruction.
- *
- * This is the edge case page: a column with an icon and a description beside a bare one, a
- * disabled row, a 71-character unbreakable identifier, and CJK beside Latin in the same column.
- */
-const ITEMS: MegaMenuItemProp[] = [
-  {
-    key: "products",
-    label: "製品",
-    panel: {
-      groups: [
-        {
-          key: "core",
-          label: "コア業務",
-          icon: <Users />,
-          description: "毎日使う基幹アプリ。人事と給与はひとつの従業員台帳を共有します。",
-          links: [
-            {
-              key: "hr",
-              label: "人事管理 / HR",
-              href: "/hr",
-              icon: <Users />,
-              description: "従業員台帳、異動履歴、組織図",
-            },
-            { key: "payroll", label: "給与計算 / Payroll", href: "/payroll" },
-          ],
-        },
-        {
-          key: "addons",
-          label: "アドオン",
-          links: [
-            { key: "attendance", label: "勤怠管理", href: "/attendance" },
-            { key: "workflow", label: "ワークフロー", href: "/workflow" },
-            { key: "eol", label: "提供終了予定のモジュール", href: "/eol", disabled: true },
-          ],
-        },
-        {
-          key: "platform",
-          label: "Platform",
-          icon: <ShieldCheck />,
-          links: [
-            { key: "sso", label: "SSO / SAML", href: "/sso" },
-            {
-              key: "webhook",
-              label: "webhookEndpointConfigurationForOutboundPayrollNotificationsV2",
-              href: "/webhooks",
-              description: "エンドポイント設定",
-            },
-          ],
-        },
-      ],
-      footer: (
-        <Text tone="muted" size="sm">
-          すべての製品と価格は製品一覧ページでご覧いただけます。
-        </Text>
-      ),
-    },
-  },
-  { key: "pricing", label: "料金", href: "/pricing" },
-];
-
-export default function MegaMenuPanelDoc() {
-  return (
-    <PageContainer
-      title="MegaMenu · 開いたパネル"
-      subtitle="1 つの nav、パネルは開いたまま · アイコンと説明のある列 / 素の列 / 無効な行 / 71 文字の識別子"
-    >
-      <Flex direction="col" gap="lg">
-        <MegaMenu label="開いたパネルの例" items={ITEMS} defaultOpen="products" value="payroll" />
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/navigation/mega-menu.tsx

@@ -1,254 +0,0 @@
-import { 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";
-import { MegaMenu, type MegaMenuItemProp } from "@godxjp/ui/navigation";
-import {
-  BookOpen,
-  Building2,
-  Calculator,
-  CreditCard,
-  FileText,
-  LifeBuoy,
-  ShieldCheck,
-  Users,
-} from "lucide-react";
-
-/**
- * MegaMenu — the primary site navigation whose top-level items disclose a full-width panel.
- *
- * WAI-ARIA APG **Disclosure Navigation with Top-Level Links**, not Menubar: a bar of links to
- * PLACES is not a menu of COMMANDS, and `role="menu"` would promise assistive technology an
- * application menu. That is also why this is not `DropdownMenu` plus a token — `DropdownMenu` is
- * `role="menu"` by construction.
- *
- * The cards below are deliberately NOT tidy. Each one is an edge a real site hits on day one and a
- * demo page usually hides: a panel with forty links beside a panel with one, a 71-character
- * unbreakable label, CJK beside Latin, a group carrying an icon and a description beside a bare
- * column, and the narrow layout where the panel has nowhere to go.
- */
-
-/** Forty links, which is the size at which a panel stops being a list and starts being a screen. */
-const FORTY = Array.from({ length: 40 }, (_, index) => ({
-  key: `report-${index + 1}`,
-  label: `レポート ${String(index + 1).padStart(2, "0")}`,
-  href: `/reports/${index + 1}`,
-}));
-
-/** The bar every other card varies. CJK labels beside Latin ones, on purpose. */
-const ITEMS: MegaMenuItemProp[] = [
-  {
-    key: "products",
-    label: "製品",
-    icon: <Building2 />,
-    panel: {
-      groups: [
-        {
-          key: "core",
-          label: "コア業務",
-          icon: <Users />,
-          description: "毎日使う基幹アプリ。人事と給与はひとつの従業員台帳を共有します。",
-          links: [
-            {
-              key: "hr",
-              label: "人事管理 / HR",
-              href: "/hr",
-              icon: <Users />,
-              description: "従業員台帳、異動履歴、組織図",
-            },
-            {
-              key: "payroll",
-              label: "給与計算 / Payroll",
-              href: "/payroll",
-              icon: <Calculator />,
-              description: "月次締め、賞与、年末調整",
-            },
-            {
-              key: "expense",
-              label: "経費精算 / Expenses",
-              href: "/expense",
-              icon: <CreditCard />,
-              description: "申請から振込まで",
-            },
-          ],
-        },
-        {
-          // A BARE column beside the decorated one above: no icon, no description, no heading
-          // beyond the label. Both shapes have to look deliberate side by side.
-          key: "addons",
-          label: "アドオン",
-          links: [
-            { key: "attendance", label: "勤怠管理", href: "/attendance" },
-            { key: "workflow", label: "ワークフロー", href: "/workflow" },
-            { key: "mynumber", label: "マイナンバー管理", href: "/mynumber" },
-            { key: "eol", label: "提供終了予定のモジュール", href: "/eol", disabled: true },
-          ],
-        },
-        {
-          key: "platform",
-          label: "Platform",
-          icon: <ShieldCheck />,
-          links: [
-            { key: "sso", label: "SSO / SAML", href: "/sso" },
-            { key: "audit", label: "Audit log", href: "/audit" },
-            {
-              // 71 characters, no space, no hyphen — a real webhook identifier pasted into a nav.
-              // It must WRAP inside its column, never widen the panel past the viewport.
-              key: "webhook",
-              label: "webhookEndpointConfigurationForOutboundPayrollNotificationsV2",
-              href: "/webhooks",
-              description: "エンドポイント設定",
-            },
-          ],
-        },
-      ],
-      footer: (
-        <Text tone="muted" size="sm">
-          すべての製品と価格は製品一覧ページでご覧いただけます。
-        </Text>
-      ),
-    },
-  },
-  {
-    key: "reports",
-    label: "レポート",
-    icon: <FileText />,
-    panel: {
-      groups: [
-        { key: "all", label: "標準レポート (40)", links: FORTY.slice(0, 20) },
-        { key: "more", label: "続き", links: FORTY.slice(20) },
-      ],
-    },
-  },
-  {
-    key: "support",
-    label: "Support",
-    icon: <LifeBuoy />,
-    panel: {
-      // ONE link. The narrowest panel a consumer will ever build, and it must not look broken
-      // beside the forty-link one above.
-      groups: [
-        {
-          key: "contact",
-          label: "お問い合わせ",
-          links: [{ key: "contact-us", label: "サポートに連絡する", href: "/support" }],
-        },
-      ],
-    },
-  },
-  { key: "docs", label: "ドキュメント", href: "/docs", icon: <BookOpen /> },
-  { key: "pricing", label: "料金", href: "/pricing" },
-];
-
-export default function MegaMenuDoc() {
-  const [route, setRoute] = useState("payroll");
-
-  return (
-    <PageContainer
-      title="MegaMenu"
-      subtitle="APG Disclosure Navigation · 全幅パネル · roving tabindex · hover intent · 狭い画面ではアコーディオン"
-    >
-      <Flex direction="col" gap="lg">
-        {/* 1 · IN A REAL BAR — the component where it actually lives. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>サイトのヘッダー · ロゴの隣に置く</CardTitle>
-            <CardDescription>
-              バーのふるまい（roving tabindex・aria-expanded・Escape で戻る）はすべて `MegaMenu`
-              が持ちます。現在のルートは `value` で渡し、`aria-current=&quot;page&quot;`
-              としてバーとパネルの両方に出ます。
-              <br />
-              `Topbar` のスロットには入れないでください。実測した理由が 2
-              つあります。`topbar-center` は約 1280px 未満で `display: none` になるのでノート PC
-              の幅でナビゲーションごと消え、`topbar-start` は `overflow: clip` かつ `flex-wrap:
-              nowrap` の 1 行なので、狭い画面で縦に開く アコーディオンが行からはみ出します（375px で
-              58 要素がビューポート外）。電話幅のサイトナビは バーの中ではなく `Sheet`
-              の中に置く、というのが実サイトの答えです。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex align="center" gap="md">
-              <Text weight="semibold">GodX</Text>
-              <MegaMenu
-                label="メインナビゲーション"
-                items={ITEMS}
-                value={route}
-                onValueChange={setRoute}
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* 2 · THE EDGES — one link beside forty, an unbreakable token, CJK beside Latin. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>端 · 1 件のパネルと 40 件のパネル</CardTitle>
-            <CardDescription>
-              「レポート」は 40 件、「Support」は 1 件。40
-              件のパネルは列に折り返して高さを抑え、それでも入り切らなければブロック方向にスクロールします。「Platform」列の
-              71 文字の webhook
-              識別子は列の中で折り返し、バーやパネルをビューポートの外へ広げません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <MegaMenu label="端の例" items={ITEMS} />
-          </CardContent>
-        </Card>
-
-        {/* 3 · HOVER INTENT — the mode antd defaults to, and the diagonal it has to survive. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>triggerAction=&quot;hover&quot; · 斜めに動くマウス</CardTitle>
-            <CardDescription>
-              Ant Design の `triggerSubMenuAction`。トリガーから離れただけでは閉じません —
-              閉じるのは nav 全体からポインタが出たときだけで、それも `closeDelay`（既定 100ms、antd
-              の `subMenuCloseDelay`
-              と同じ）の猶予があります。だから「製品」から斜め下のリンクへ一直線に動けます。クリックでも開くので、タッチ端末で行き止まりになりません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <MegaMenu label="ホバーの例" items={ITEMS} triggerAction="hover" size="sm" />
-          </CardContent>
-        </Card>
-
-        {/* 4 · NARROW — the same disclosure, in flow. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              狭い画面 · 同じ disclosure がそのままアコーディオンになる
-            </CardTitle>
-            <CardDescription>
-              全幅パネルは 375px では行き場がありません。768px
-              未満ではバーが縦に積み、パネルは自分のトリガーの真下にインフローで開きます。DOM もARIA
-              も同じ（`aria-expanded` / `aria-controls`）で、Escape もそのまま効きます。Menubar
-              ではなく Disclosure を選んだ配当がこれです。ブラウザを 768px
-              より狭くして確かめてください。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <MegaMenu label="狭い画面の例" items={ITEMS} size="lg" />
-          </CardContent>
-        </Card>
-
-        {/* 5 · WHAT IT IS NOT. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>これは DropdownMenu ではない</CardTitle>
-            <CardDescription>
-              `DropdownMenu` は `role=&quot;menu&quot;` /
-              `role=&quot;menuitem&quot;`（コマンドのメニュー）です。リンクの集まりにこれを使うと、スクリーンリーダーはアプリケーションメニューとして読み上げ、Tab
-              はウィジェット全体から出てしまいます。これがメガメニューの典型的な a11y
-              欠陥で、このコンポーネントが存在する理由です。操作（削除・名前の変更）には
-              `DropdownMenu`、場所への移動には `MegaMenu` を使ってください。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Text tone="muted" size="sm">
-              現在のルート: {route}
-            </Text>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}