@godxjp/ui 19.2.0 → 19.3.1

package/docs/navigation/navigation-menu.tsx

@@ -8,7 +8,7 @@ import {
   NavigationMenuTrigger,
   NavigationMenuViewport,
 } from "@godxjp/ui/navigation";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 import { Text } from "@godxjp/ui/general";
 
 /**
@@ -38,60 +38,56 @@ export default function Demo() {
                   <NavigationMenuTrigger>会計</NavigationMenuTrigger>
                   <NavigationMenuContent>
                     {/* ui-audit-disable-next-line no-arbitrary-size — NavigationMenu flyout panel width (demo layout) */}
-                    <ul className="grid gap-2 p-4 md:w-[400px] md:grid-cols-2">
-                      <li>
-                        <NavigationMenuLink
-                          href="#"
-                          className="hover:bg-accent block rounded-md p-3"
-                        >
-                          <Text as="div" weight="medium">
-                            仕訳入力
-                          </Text>
-                          <Text as="p" size="xs" tone="muted" className="mt-1">
-                            借方・貸方を直接入力して仕訳を作成します。
-                          </Text>
-                        </NavigationMenuLink>
-                      </li>
-                      <li>
-                        <NavigationMenuLink
-                          href="#"
-                          className="hover:bg-accent block rounded-md p-3"
-                        >
-                          <Text as="div" weight="medium">
-                            仕訳帳
-                          </Text>
-                          <Text as="p" size="xs" tone="muted" className="mt-1">
-                            全仕訳の一覧・検索・フィルタリング。
-                          </Text>
-                        </NavigationMenuLink>
-                      </li>
-                      <li>
-                        <NavigationMenuLink
-                          href="#"
-                          className="hover:bg-accent block rounded-md p-3"
-                        >
-                          <Text as="div" weight="medium">
-                            総勘定元帳
-                          </Text>
-                          <Text as="p" size="xs" tone="muted" className="mt-1">
-                            勘定科目ごとの残高・取引履歴。
-                          </Text>
-                        </NavigationMenuLink>
-                      </li>
-                      <li>
-                        <NavigationMenuLink
-                          href="#"
-                          className="hover:bg-accent block rounded-md p-3"
-                        >
-                          <Text as="div" weight="medium">
-                            試算表
-                          </Text>
-                          <Text as="p" size="xs" tone="muted" className="mt-1">
-                            期間指定で借方・貸方の合計を確認。
-                          </Text>
-                        </NavigationMenuLink>
-                      </li>
-                    </ul>
+                    <ResponsiveGrid columns={{ sm: 1, md: 2 }} gap="sm" className="md:w-[400px]">
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              仕訳入力
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              借方・貸方を直接入力して仕訳を作成します。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              仕訳帳
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              全仕訳の一覧・検索・フィルタリング。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              総勘定元帳
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              勘定科目ごとの残高・取引履歴。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              試算表
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              期間指定で借方・貸方の合計を確認。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                    </ResponsiveGrid>
                   </NavigationMenuContent>
                 </NavigationMenuItem>
 
@@ -99,47 +95,44 @@ export default function Demo() {
                   <NavigationMenuTrigger>レポート</NavigationMenuTrigger>
                   <NavigationMenuContent>
                     {/* ui-audit-disable-next-line no-arbitrary-size — NavigationMenu flyout panel width (demo layout) */}
-                    <ul className="grid gap-2 p-4 md:w-[360px]">
-                      <li>
-                        <NavigationMenuLink
-                          href="#"
-                          className="hover:bg-accent block rounded-md p-3"
-                        >
-                          <Text as="div" weight="medium">
-                            貸借対照表
-                          </Text>
-                          <Text as="p" size="xs" tone="muted" className="mt-1">
-                            特定日時点の資産・負債・純資産。
-                          </Text>
-                        </NavigationMenuLink>
-                      </li>
-                      <li>
-                        <NavigationMenuLink
-                          href="#"
-                          className="hover:bg-accent block rounded-md p-3"
-                        >
-                          <Text as="div" weight="medium">
-                            損益計算書
-                          </Text>
-                          <Text as="p" size="xs" tone="muted" className="mt-1">
-                            期間中の収益・費用・利益の要約。
-                          </Text>
-                        </NavigationMenuLink>
-                      </li>
-                      <li>
-                        <NavigationMenuLink
-                          href="#"
-                          className="hover:bg-accent block rounded-md p-3"
-                        >
-                          <Text as="div" weight="medium">
-                            キャッシュフロー計算書
-                          </Text>
-                          <Text as="p" size="xs" tone="muted" className="mt-1">
-                            営業・投資・財務活動別の資金移動。
-                          </Text>
-                        </NavigationMenuLink>
-                      </li>
-                    </ul>
+                    <ResponsiveGrid columns={1} gap="sm" className="md:w-[360px]">
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              貸借対照表
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              特定日時点の資産・負債・純資産。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              損益計算書
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              期間中の収益・費用・利益の要約。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              キャッシュフロー計算書
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              営業・投資・財務活動別の資金移動。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                    </ResponsiveGrid>
                   </NavigationMenuContent>
                 </NavigationMenuItem>
 

package/docs/navigation/steps.tsx

@@ -187,16 +187,18 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="max-w-80 border p-2">
-              <Steps
-                value={1}
-                items={[
-                  { title: "会社情報の入力", description: "法人番号と所在地" },
-                  { title: "本人確認書類のアップロード", description: "代表者の確認" },
-                  { title: "申請内容の最終確認", description: "送信前の確認" },
-                ]}
-              />
-            </div>
+            <Card className="max-w-80">
+              <CardContent>
+                <Steps
+                  value={1}
+                  items={[
+                    { title: "会社情報の入力", description: "法人番号と所在地" },
+                    { title: "本人確認書類のアップロード", description: "代表者の確認" },
+                    { title: "申請内容の最終確認", description: "送信前の確認" },
+                  ]}
+                />
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
 

package/docs/navigation/tabs.tsx

@@ -111,25 +111,31 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="max-w-80 border p-2">
-              <Tabs
-                defaultValue="methods"
-                variant="line"
-                items={[
-                  {
-                    value: "methods",
-                    label: "サインイン方法とパスワード",
-                    content: <Text>方法</Text>,
-                  },
-                  {
-                    value: "two-factor",
-                    label: "二要素認証の設定",
-                    content: <Text>二要素認証</Text>,
-                  },
-                  { value: "recovery", label: "アカウントの復旧方法", content: <Text>復旧</Text> },
-                ]}
-              />
-            </div>
+            <Card className="max-w-80">
+              <CardContent>
+                <Tabs
+                  defaultValue="methods"
+                  variant="line"
+                  items={[
+                    {
+                      value: "methods",
+                      label: "サインイン方法とパスワード",
+                      content: <Text>方法</Text>,
+                    },
+                    {
+                      value: "two-factor",
+                      label: "二要素認証の設定",
+                      content: <Text>二要素認証</Text>,
+                    },
+                    {
+                      value: "recovery",
+                      label: "アカウントの復旧方法",
+                      content: <Text>復旧</Text>,
+                    },
+                  ]}
+                />
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
 
@@ -196,7 +202,7 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Tabs defaultValue="overview" orientation="vertical" className="gap-6">
+            <Tabs defaultValue="overview" orientation="vertical" style={{ gap: "var(--space-6)" }}>
               <TabsList variant="line" className="h-auto w-40 flex-col items-stretch">
                 <TabsTrigger value="overview">概要</TabsTrigger>
                 <TabsTrigger value="ledger">元帳</TabsTrigger>

package/docs/navigation/toolbar.tsx

@@ -8,6 +8,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
+  EmptyState,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
 import {
@@ -111,7 +112,7 @@ export default function Demo() {
                 sticky
                 hasActiveFilters={hasMemberFilters}
                 onClear={clearMemberFilters}
-                className="border-border bg-card border-b px-4"
+                className="border-border bg-card border-b"
               >
                 <SearchInput
                   aria-label="メンバーを検索"
@@ -154,16 +155,13 @@ export default function Demo() {
                 wrap
                 align="center"
                 gap="xs"
-                className="border-border bg-muted/40 min-h-9 border-b px-4 py-2"
+                className="border-border bg-muted/40 min-h-9 border-b"
               >
-                <Flex
-                  direction="row"
-                  align="center"
-                  gap="xs"
-                  className="text-muted-foreground pe-1"
-                >
+                <Flex direction="row" align="center" gap="xs">
                   <Filter className="size-3.5" aria-hidden="true" />
-                  <Text size="xs">適用中</Text>
+                  <Text size="xs" tone="muted">
+                    適用中
+                  </Text>
                 </Flex>
                 {!hasMemberFilters && (
                   <Text size="xs" tone="muted">
@@ -171,7 +169,7 @@ export default function Demo() {
                   </Text>
                 )}
                 {activeChips.map((chip) => (
-                  <span key={chip.key} className="inline-flex items-center gap-1">
+                  <Flex key={chip.key} align="center" gap="xs">
                     <Badge tone={chip.tone} variant="outline">
                       {chip.label}
                     </Badge>
@@ -183,7 +181,7 @@ export default function Demo() {
                     >
                       <X aria-hidden="true" />
                     </Button>
-                  </span>
+                  </Flex>
                 ))}
                 {hasMemberFilters && (
                   <Button
@@ -205,7 +203,7 @@ export default function Demo() {
                     direction="row"
                     align="center"
                     justify="between"
-                    className="border-border/60 border-b px-4 py-2.5"
+                    className="border-border/60 border-b"
                   >
                     <Text size="sm">
                       {memberQuery.trim() || "田中"} {i + 1} 番
@@ -269,9 +267,11 @@ export default function Demo() {
               </Toolbar>
 
               {/* Simulated table body */}
-              <Text as="div" tone="muted" className="rounded-md border p-4 text-center">
-                DataTable がここに入ります · Toolbar は Card の外側 (上) に置く
-              </Text>
+              <EmptyState
+                variant="section"
+                titleAs="p"
+                title="DataTable がここに入ります · Toolbar は Card の外側 (上) に置く"
+              />
             </Flex>
           </CardContent>
         </Card>

package/docs/providers/format-date.tsx

@@ -51,10 +51,10 @@ export default function Demo() {
             <CardContent>
               <Text as="p" tone="muted">
                 このデモは{" "}
-                <code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">
+                <Text as="code" mono size="xs">
                   defaultLocale=&quot;ja&quot; defaultTimezone=&quot;Asia/Tokyo&quot;
                   defaultDateFormat=&quot;iso&quot; defaultTimeFormat=&quot;24h&quot;
-                </code>{" "}
+                </Text>{" "}
                 の AppProvider でラップされている。
               </Text>
             </CardContent>

package/docs/showcase/acme-portal.tsx

@@ -45,8 +45,8 @@ import {
   Avatar,
   AvatarFallback,
   Badge,
-  type BadgeProps,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
@@ -58,6 +58,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  type BadgeProps,
 } from "@godxjp/ui/data-display";
 import { SearchInput } from "@godxjp/ui/data-entry";
 import {
@@ -341,28 +342,37 @@ export default function AcmePortalShowcase() {
             {/* Queue + Journey */}
             <ResponsiveGrid columns={{ sm: 1, md: 1, lg: 2 }}>
               <Card className="self-start">
-                <CardHeader className="flex flex-row items-center justify-between">
+                <CardHeader>
                   <CardTitle level={2}>Cần bạn xử lý</CardTitle>
-                  <Text size="xs" tone="muted">
-                    {QUEUE.length} việc
-                  </Text>
+                  <CardAction>
+                    <Text size="xs" tone="muted">
+                      {QUEUE.length} việc
+                    </Text>
+                  </CardAction>
                 </CardHeader>
                 <CardContent flush>
                   <ul className="divide-border divide-y">
                     {QUEUE.map((q) => (
-                      <li key={q.title} className="flex items-center gap-3 px-4 py-3">
-                        <Badge tone={q.tone} variant="outline" icon={q.icon} aria-label={q.title} />
-                        <div className="min-w-0 flex-1">
-                          <Text as="div" size="sm" weight="medium" truncate>
-                            {q.title}
-                          </Text>
-                          <Text as="div" size="xs" tone="muted" truncate>
-                            {q.meta}
-                          </Text>
-                        </div>
-                        <Button variant="outline" size="sm">
-                          {q.action}
-                        </Button>
+                      <li key={q.title} className="px-4 py-3">
+                        <Flex align="center" gap="md">
+                          <Badge
+                            tone={q.tone}
+                            variant="outline"
+                            icon={q.icon}
+                            aria-label={q.title}
+                          />
+                          <div className="min-w-0 flex-1">
+                            <Text as="div" size="sm" weight="medium" truncate>
+                              {q.title}
+                            </Text>
+                            <Text as="div" size="xs" tone="muted" truncate>
+                              {q.meta}
+                            </Text>
+                          </div>
+                          <Button variant="outline" size="sm">
+                            {q.action}
+                          </Button>
+                        </Flex>
                       </li>
                     ))}
                   </ul>
@@ -370,11 +380,13 @@ export default function AcmePortalShowcase() {
               </Card>
 
               <Card className="self-start">
-                <CardHeader className="flex flex-row items-center justify-between">
+                <CardHeader>
                   <CardTitle level={2}>Hành trình đơn TXM-100241</CardTitle>
-                  <Badge tone="info" variant="outline">
-                    <Plane aria-hidden="true" /> Đang vận chuyển
-                  </Badge>
+                  <CardAction>
+                    <Badge tone="info" variant="outline">
+                      <Plane aria-hidden="true" /> Đang vận chuyển
+                    </Badge>
+                  </CardAction>
                 </CardHeader>
                 <CardContent>
                   <Flex direction="col" gap="md">
@@ -393,12 +405,14 @@ export default function AcmePortalShowcase() {
 
             {/* Orders table — the centerpiece */}
             <Card>
-              <CardHeader className="flex flex-row items-center justify-between">
+              <CardHeader>
                 <CardTitle level={2}>Đơn mua hộ gần đây</CardTitle>
-                <Button variant="ghost" size="sm">
-                  <Wallet aria-hidden="true" />
-                  Xem tất cả
-                </Button>
+                <CardAction>
+                  <Button variant="ghost" size="sm">
+                    <Wallet aria-hidden="true" />
+                    Xem tất cả
+                  </Button>
+                </CardAction>
               </CardHeader>
               <CardContent flush>
                 <Table>