@godxjp/ui 19.2.0 → 19.3.1

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>
@@ -281,13 +283,15 @@ 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>
           ))}
@@ -310,8 +314,8 @@ function Steps() {
         <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,10 +326,10 @@ 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>
@@ -351,15 +355,17 @@ 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>
           ))}
@@ -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`}>

package/docs/showcase/case1-warehouse-dashboard.tsx

@@ -38,8 +38,8 @@ import {
 import { Button, Text } from "@godxjp/ui/general";
 import {
   Badge,
-  type BadgeProps,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
@@ -52,6 +52,7 @@ import {
   TableHeader,
   TableRow,
   Timeline,
+  type BadgeProps,
   type TimelineItem,
 } from "@godxjp/ui/data-display";
 
@@ -228,29 +229,38 @@ export default function WarehouseDashboardShowcase() {
           {/* Queue + Activity */}
           <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 xử lý</CardTitle>
-                <Text size="xs" tone="muted">
-                  {QUEUE.length} hàng đợi
-                </Text>
+                <CardAction>
+                  <Text size="xs" tone="muted">
+                    {QUEUE.length} hàng đợi
+                  </Text>
+                </CardAction>
               </CardHeader>
               <CardContent flush>
                 <ul className="divide-border divide-y">
                   {QUEUE.map((q) => {
                     return (
-                      <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="2xs" 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="2xs" tone="muted" truncate>
+                              {q.meta}
+                            </Text>
+                          </div>
+                          <Button variant="outline" size="sm">
+                            {q.action}
+                          </Button>
+                        </Flex>
                       </li>
                     );
                   })}
@@ -259,11 +269,13 @@ export default function WarehouseDashboardShowcase() {
             </Card>
 
             <Card className="self-start">
-              <CardHeader className="flex flex-row items-center justify-between">
+              <CardHeader>
                 <CardTitle level={2}>Hoạt động gần đây</CardTitle>
-                <Text size="xs" tone="muted">
-                  24h qua
-                </Text>
+                <CardAction>
+                  <Text size="xs" tone="muted">
+                    24h qua
+                  </Text>
+                </CardAction>
               </CardHeader>
               <CardContent>
                 <Timeline items={ACTIVITY} />
@@ -274,11 +286,13 @@ export default function WarehouseDashboardShowcase() {
           {/* Capacity + Recent shipments */}
           <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}>Dung lượng giá hàng</CardTitle>
-                <Button variant="ghost" size="sm">
-                  Xem tất cả
-                </Button>
+                <CardAction>
+                  <Button variant="ghost" size="sm">
+                    Xem tất cả
+                  </Button>
+                </CardAction>
               </CardHeader>
               <CardContent>
                 <Flex direction="col" gap="md">
@@ -298,11 +312,13 @@ export default function WarehouseDashboardShowcase() {
             </Card>
 
             <Card className="self-start">
-              <CardHeader className="flex flex-row items-center justify-between">
+              <CardHeader>
                 <CardTitle level={2}>Chuyến gần nhất</CardTitle>
-                <Button variant="ghost" size="sm">
-                  Tất cả
-                </Button>
+                <CardAction>
+                  <Button variant="ghost" size="sm">
+                    Tất cả
+                  </Button>
+                </CardAction>
               </CardHeader>
               <CardContent flush>
                 <Table>

package/docs/showcase/case2-employee-me.tsx

@@ -39,8 +39,8 @@ import { Button, Text } from "@godxjp/ui/general";
 import { Alert, AlertDescription, AlertTitle } from "@godxjp/ui/feedback";
 import {
   Badge,
-  type BadgeProps,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
@@ -51,6 +51,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  type BadgeProps,
 } from "@godxjp/ui/data-display";
 import {
   AppShell,
@@ -149,26 +150,28 @@ function PunchCard() {
 
   return (
     <Card density="cozy" className="self-start" accent={state === "break" ? "warning" : undefined}>
-      <CardHeader className="flex flex-row items-center justify-between gap-3">
+      <CardHeader>
         <CardTitle level={2} className="whitespace-nowrap">
           打刻 · Chấm công
         </CardTitle>
-        <Badge tone={status.tone} variant="outline" className="whitespace-nowrap">
-          {status.label}
-        </Badge>
+        <CardAction>
+          <Badge tone={status.tone} variant="outline" className="whitespace-nowrap">
+            {status.label}
+          </Badge>
+        </CardAction>
       </CardHeader>
       <CardContent>
         <Flex direction="col" gap="md">
           {/* Big tabular clock — the signature employee block. */}
-          <div>
+          <Flex direction="col" gap="xs">
             {/* Hero numeral at the system's max step (2xl) — the golden scale tops here by design. */}
             <Text as="div" size="2xl" weight="bold" tabular className="leading-none">
               {clock}
             </Text>
-            <Text as="div" size="sm" tone="muted" className="mt-1">
+            <Text as="div" size="sm" tone="muted">
               {status.meta}
             </Text>
-          </div>
+          </Flex>
 
           {/* Checkout-locked notice (attention, not destructive — it's a fixable hold). */}
           {checkoutLocked ? (
@@ -226,7 +229,7 @@ function PunchCard() {
 
           {/* Demo state stepper — lets a reader walk every FSM state at rest. */}
           <Flex direction="row" wrap gap="xs" className="border-t pt-3">
-            <Text size="2xs" tone="muted" className="me-1 self-center">
+            <Text size="2xs" tone="muted" className="self-center">
               状態:
             </Text>
             {(["off", "working", "break", "closed"] as PunchState[]).map((s) => (
@@ -334,7 +337,7 @@ export default function EmployeeMeShowcase() {
       <PageContainer title="ダッシュボード" subtitle="田中 美咲 · 渋谷店 · 5月度" density="default">
         <Flex direction="col" gap="lg">
           {/* Punch (left) + month KPI 2×2 (right) — stack <lg, side-by-side ≥lg */}
-          <div className="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:items-start">
+          <ResponsiveGrid columns={{ sm: 1, lg: 3 }} gap="md">
             <div className="lg:col-span-1">
               <PunchCard />
             </div>
@@ -353,18 +356,20 @@ export default function EmployeeMeShowcase() {
                 ))}
               </ResponsiveGrid>
             </div>
-          </div>
+          </ResponsiveGrid>
 
           {/* 7-day attendance (left, wide) + today summary (right) */}
-          <div className="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:items-start">
+          <ResponsiveGrid columns={{ sm: 1, lg: 3 }} gap="md">
             <Card className="self-start lg:col-span-2">
-              <CardHeader className="flex flex-row items-center justify-between gap-3">
+              <CardHeader>
                 <CardTitle level={2} className="whitespace-nowrap">
                   最近7日 · 7 ngày gần nhất
                 </CardTitle>
-                <Text size="xs" tone="muted" className="whitespace-nowrap">
-                  勤務 47.4h · 残業 1.5h
-                </Text>
+                <CardAction>
+                  <Text size="xs" tone="muted" className="whitespace-nowrap">
+                    勤務 47.4h · 残業 1.5h
+                  </Text>
+                </CardAction>
               </CardHeader>
               <CardContent flush>
                 <Table>
@@ -383,9 +388,7 @@ export default function EmployeeMeShowcase() {
                         <TableRow key={d.date}>
                           <TableCell className="whitespace-nowrap tabular-nums">
                             {d.date}
-                            <Text tone="muted" className="ms-1.5">
-                              ({d.weekday})
-                            </Text>
+                            <Text tone="muted">({d.weekday})</Text>
                           </TableCell>
                           <TableCell className="text-end tabular-nums">{d.work}</TableCell>
                           <TableCell className="text-end tabular-nums">{d.ot}</TableCell>
@@ -433,7 +436,7 @@ export default function EmployeeMeShowcase() {
                 </dl>
               </CardContent>
             </Card>
-          </div>
+          </ResponsiveGrid>
         </Flex>
       </PageContainer>
     </AppShell>

package/docs/showcase/case3-approval-workflow.tsx

@@ -352,38 +352,40 @@ export default function Demo() {
           {/* ── 4-column filter bar ───────────────────────────────────────── */}
           <Card className="self-start">
             <CardContent>
-              <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
-                <FormField id="f-type" label="区分">
-                  <Select
-                    options={TYPE_OPTIONS}
-                    value={type}
-                    onValueChange={setType}
-                    placeholder="すべて"
-                  />
-                </FormField>
-                <FormField id="f-status" label="状態">
-                  <Select
-                    options={STATUS_OPTIONS}
-                    value={status}
-                    onValueChange={setStatus}
-                    placeholder="すべて"
-                  />
-                </FormField>
-                <FormField id="f-from" label="期間 (開始)">
-                  <DatePicker value={from} onValueChange={setFrom} placeholder="YYYY-MM-DD" />
-                </FormField>
-                <FormField id="f-to" label="期間 (終了)">
-                  <DatePicker value={to} onValueChange={setTo} placeholder="YYYY-MM-DD" />
-                </FormField>
-              </ResponsiveGrid>
-              {hasActiveFilters && (
-                <Flex direction="row" justify="end" className="mt-3">
-                  <Button variant="ghost" size="sm" onClick={clearFilters}>
-                    <X aria-hidden="true" />
-                    条件をクリア
-                  </Button>
-                </Flex>
-              )}
+              <Flex direction="col" gap="md">
+                <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
+                  <FormField id="f-type" label="区分">
+                    <Select
+                      options={TYPE_OPTIONS}
+                      value={type}
+                      onValueChange={setType}
+                      placeholder="すべて"
+                    />
+                  </FormField>
+                  <FormField id="f-status" label="状態">
+                    <Select
+                      options={STATUS_OPTIONS}
+                      value={status}
+                      onValueChange={setStatus}
+                      placeholder="すべて"
+                    />
+                  </FormField>
+                  <FormField id="f-from" label="期間 (開始)">
+                    <DatePicker value={from} onValueChange={setFrom} placeholder="YYYY-MM-DD" />
+                  </FormField>
+                  <FormField id="f-to" label="期間 (終了)">
+                    <DatePicker value={to} onValueChange={setTo} placeholder="YYYY-MM-DD" />
+                  </FormField>
+                </ResponsiveGrid>
+                {hasActiveFilters && (
+                  <Flex direction="row" justify="end">
+                    <Button variant="ghost" size="sm" onClick={clearFilters}>
+                      <X aria-hidden="true" />
+                      条件をクリア
+                    </Button>
+                  </Flex>
+                )}
+              </Flex>
             </CardContent>
           </Card>