@godxjp/ui 19.2.0 → 19.4.0

package/docs/navigation/tabs.tsx

@@ -67,7 +67,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* Disabled first item — fallback selection must skip it (gh#175) */}
+        {/* Disabled first item — fallback selection must skip it */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>先頭タブが disabled · フォールバック選択</CardTitle>
@@ -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,11 +45,12 @@ import {
   Avatar,
   AvatarFallback,
   Badge,
-  type BadgeProps,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
+  ListRow,
   Progress,
   StatCard,
   Table,
@@ -58,6 +59,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  type BadgeProps,
 } from "@godxjp/ui/data-display";
 import { SearchInput } from "@godxjp/ui/data-entry";
 import {
@@ -341,40 +343,49 @@ 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>
+                      <ListRow
+                        as="li"
+                        key={q.title}
+                        leading={
+                          <Badge
+                            tone={q.tone}
+                            variant="outline"
+                            icon={q.icon}
+                            aria-label={q.title}
+                          />
+                        }
+                        title={q.title}
+                        description={q.meta}
+                        trailing={
+                          <Button variant="outline" size="sm">
+                            {q.action}
+                          </Button>
+                        }
+                      />
                     ))}
                   </ul>
                 </CardContent>
               </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 +404,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>

package/docs/showcase/acme-website.tsx

@@ -121,7 +121,7 @@ function Navbar() {
         <span className="tx-brand" data-logotype="">
           TIXI<span className="tx-gold">MAX</span>
         </span>
-        <Flex direction="row" gap="xs" align="center" className="ms-2">
+        <Flex direction="row" gap="xs" align="center">
           {links.map((l, i) => (
             <Button key={l} variant="ghost" size="sm" aria-current={i === 0 ? "page" : undefined}>
               {l}
@@ -156,7 +156,7 @@ function Hero() {
     <section className="tx-navy relative overflow-hidden">
       <div className="tx-glow tx-glow-tr" />
       <div className={`${SHELL} tx-hero-grid relative`}>
-        <div>
+        <Flex direction="col" gap="xl">
           <div className="tx-eyebrow">Mua hộ &amp; vận chuyển quốc tế</div>
           <h1 className="tx-display">
             Mua sắm toàn cầu,
@@ -167,7 +167,7 @@ function Hero() {
             Đặt mua, thanh toán và vận chuyển hàng từ Nhật, Hàn, Indonesia và Mỹ về tận nhà. Minh
             bạch chi phí, theo dõi từng bước.
           </p>
-          <Flex direction="row" gap="md" className="mt-6">
+          <Flex direction="row" gap="md">
             <Button size="lg">
               Nhận báo giá miễn phí
               <ArrowRight aria-hidden="true" />
@@ -177,7 +177,7 @@ function Hero() {
               Tra cứu đơn
             </Button>
           </Flex>
-          <Flex direction="row" gap="lg" className="mt-10">
+          <Flex direction="row" gap="lg">
             {stats.map(([n, l]) => (
               <div key={l}>
                 <div className="tx-stat">{n}</div>
@@ -187,34 +187,36 @@ function Hero() {
               </div>
             ))}
           </Flex>
-        </div>
+        </Flex>
 
         <Card>
           <CardContent>
-            <div className="tx-eyebrow">Ước tính phí vận chuyển</div>
-            <Flex direction="col" gap="sm" className="mt-4">
-              {fields.map(([Icon, label, value]) => (
-                <div key={label} className="tx-field">
-                  <Icon aria-hidden="true" className="tx-gold tx-icon-18" />
-                  <div className="min-w-0 flex-1">
-                    <Text as="div" size="2xs" tone="muted">
-                      {label}
-                    </Text>
-                    <Text as="div" weight="bold">
-                      {value}
-                    </Text>
+            <Flex direction="col" gap="md">
+              <div className="tx-eyebrow">Ước tính phí vận chuyển</div>
+              <Flex direction="col" gap="sm">
+                {fields.map(([Icon, label, value]) => (
+                  <div key={label} className="tx-field">
+                    <Icon aria-hidden="true" className="tx-gold tx-icon-18" />
+                    <div className="min-w-0 flex-1">
+                      <Text as="div" size="2xs" tone="muted">
+                        {label}
+                      </Text>
+                      <Text as="div" weight="bold">
+                        {value}
+                      </Text>
+                    </div>
+                    <ChevronDown aria-hidden="true" className="tx-icon-18" />
                   </div>
-                  <ChevronDown aria-hidden="true" className="tx-icon-18" />
+                ))}
+                <div className="tx-quote-total">
+                  <Text as="span" weight="bold" className="text-primary-foreground">
+                    Tạm tính
+                  </Text>
+                  <Text as="span" weight="bold" size="2xl" className="text-primary-foreground">
+                    525.000đ
+                  </Text>
                 </div>
-              ))}
-              <div className="tx-quote-total">
-                <Text as="span" weight="bold" className="text-primary-foreground">
-                  Tạm tính
-                </Text>
-                <Text as="span" weight="bold" size="2xl" className="text-primary-foreground">
-                  525.000đ
-                </Text>
-              </div>
+              </Flex>
             </Flex>
           </CardContent>
         </Card>
@@ -235,7 +237,7 @@ function SectionHead({
   center?: boolean;
 }) {
   return (
-    <div className={center ? "mx-auto mb-10 text-center" : "mb-8"}>
+    <div className={center ? "mx-auto text-center" : undefined}>
       <div className="tx-eyebrow">{eyebrow}</div>
       <h2 className="tx-h2">{title}</h2>
       {sub ? <p className="tx-lead mx-auto">{sub}</p> : null}
@@ -270,7 +272,7 @@ function Services() {
   ];
   return (
     <section className="bg-card tx-section">
-      <div className={SHELL}>
+      <Flex direction="col" gap="xl" className={SHELL}>
         <SectionHead
           center
           eyebrow="Dịch vụ"
@@ -281,18 +283,20 @@ function Services() {
           {items.map(([icon, t, d]) => (
             <Card key={t}>
               <CardContent>
-                <Medallion icon={icon} />
-                <Text as="div" weight="bold" size="lg" className="mt-4">
-                  {t}
-                </Text>
-                <Text as="p" size="sm" tone="muted" className="mt-1">
-                  {d}
-                </Text>
+                <Flex direction="col" gap="md">
+                  <Medallion icon={icon} />
+                  <Text as="div" weight="bold" size="lg">
+                    {t}
+                  </Text>
+                  <Text as="p" size="sm" tone="muted">
+                    {d}
+                  </Text>
+                </Flex>
               </CardContent>
             </Card>
           ))}
         </ResponsiveGrid>
-      </div>
+      </Flex>
     </section>
   );
 }
@@ -306,12 +310,12 @@ function Steps() {
   ];
   return (
     <section className="bg-background tx-section">
-      <div className={SHELL}>
+      <Flex direction="col" gap="xl" className={SHELL}>
         <SectionHead eyebrow="Quy trình" title="Mua hàng quốc tế trong 4 bước" />
         <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
           {steps.map(([Icon, t, d], i) => (
-            <div key={t}>
-              <Flex direction="row" gap="sm" align="center" className="mb-3">
+            <Flex direction="col" gap="md" key={t}>
+              <Flex direction="row" gap="sm" align="center">
                 <Avatar>
                   <AvatarFallback className="bg-secondary text-primary font-bold">
                     {i + 1}
@@ -322,13 +326,13 @@ function Steps() {
               <Text as="div" weight="bold" size="lg">
                 {t}
               </Text>
-              <Text as="p" size="sm" tone="muted" className="mt-1">
+              <Text as="p" size="sm" tone="muted">
                 {d}
               </Text>
-            </div>
+            </Flex>
           ))}
         </ResponsiveGrid>
-      </div>
+      </Flex>
     </section>
   );
 }
@@ -342,7 +346,7 @@ function Routes() {
   ];
   return (
     <section className="bg-card tx-section">
-      <div className={SHELL}>
+      <Flex direction="col" gap="xl" className={SHELL}>
         <SectionHead eyebrow="Tuyến vận chuyển" title="Giá cước rõ ràng theo từng tuyến" />
         <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
           {routes.map(([c, code, mode, price]) => (
@@ -351,20 +355,22 @@ function Routes() {
                 <span className="tx-route-code">{code}</span>
               </CardCover>
               <CardContent>
-                <Text as="div" weight="bold" size="lg">
-                  {c}
-                </Text>
-                <Text as="div" size="xs" tone="muted" className="mt-1 mb-3">
-                  {mode}
-                </Text>
-                <Text as="div" weight="bold" size="2xl">
-                  {price}
-                </Text>
+                <Flex direction="col" gap="md">
+                  <Text as="div" weight="bold" size="lg">
+                    {c}
+                  </Text>
+                  <Text as="div" size="xs" tone="muted">
+                    {mode}
+                  </Text>
+                  <Text as="div" weight="bold" size="2xl">
+                    {price}
+                  </Text>
+                </Flex>
               </CardContent>
             </Card>
           ))}
         </ResponsiveGrid>
-      </div>
+      </Flex>
     </section>
   );
 }
@@ -376,7 +382,7 @@ function CtaBanner() {
       <div className={`${SHELL} relative text-center`}>
         <h2 className="tx-h2">Sẵn sàng cho đơn hàng đầu tiên?</h2>
         <p className="tx-lead mx-auto">Tạo tài khoản miễn phí và nhận báo giá trong 5 phút.</p>
-        <Flex direction="row" gap="md" className="mt-6 justify-center">
+        <Flex direction="row" gap="md" justify="center">
           <Button size="lg">
             <UserPlus aria-hidden="true" />
             Đăng ký ngay
@@ -399,18 +405,18 @@ function Footer() {
   return (
     <footer className="tx-navy tx-navy-deep">
       <div className={`${SHELL} tx-footer-grid`} style={{ paddingBlock: "3.5rem 2rem" }}>
-        <div>
+        <Flex direction="col" gap="md">
           <span className="tx-brand">
             TIXI<span className="tx-gold">MAX</span>
           </span>
-          <Text as="p" size="sm" tone="muted" className="mt-4">
+          <Text as="p" size="sm" tone="muted">
             Dịch vụ mua hộ &amp; vận chuyển quốc tế uy tín, minh bạch về tận nhà bạn.
           </Text>
-        </div>
+        </Flex>
         {cols.map(([h, items]) => (
-          <div key={h}>
+          <Flex direction="col" gap="md" key={h}>
             <div className="tx-eyebrow">{h}</div>
-            <Flex direction="col" gap="xs" className="mt-3">
+            <Flex direction="col" gap="xs">
               {items.map((i) => (
                 <Button
                   key={i}
@@ -422,7 +428,7 @@ function Footer() {
                 </Button>
               ))}
             </Flex>
-          </div>
+          </Flex>
         ))}
       </div>
       <div className={`${SHELL} tx-footer-bottom`}>