@godxjp/ui 19.2.0 → 19.4.0

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

@@ -38,11 +38,12 @@ import {
 import { Button, Text } from "@godxjp/ui/general";
 import {
   Badge,
-  type BadgeProps,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
+  ListRow,
   Progress,
   StatCard,
   Table,
@@ -52,6 +53,7 @@ import {
   TableHeader,
   TableRow,
   Timeline,
+  type BadgeProps,
   type TimelineItem,
 } from "@godxjp/ui/data-display";
 
@@ -228,30 +230,37 @@ 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>
+                      <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>
@@ -259,11 +268,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 +285,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 +311,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,11 +39,12 @@ import { Button, Text } from "@godxjp/ui/general";
 import { Alert, AlertDescription, AlertTitle } from "@godxjp/ui/feedback";
 import {
   Badge,
-  type BadgeProps,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
+  Descriptions,
   StatCard,
   Table,
   TableBody,
@@ -51,12 +52,14 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  type BadgeProps,
 } from "@godxjp/ui/data-display";
 import {
   AppShell,
   Flex,
   PageContainer,
   ResponsiveGrid,
+  Separator,
   Sidebar,
   type SidebarSectionProp,
 } from "@godxjp/ui/layout";
@@ -149,26 +152,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 ? (
@@ -225,8 +230,9 @@ function PunchCard() {
           </Flex>
 
           {/* 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">
+          <Separator />
+          <Flex direction="row" wrap gap="xs">
+            <Text size="2xs" tone="muted" className="self-center">
               状態:
             </Text>
             {(["off", "working", "break", "closed"] as PunchState[]).map((s) => (
@@ -334,7 +340,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 +359,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 +391,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>
@@ -412,28 +418,19 @@ export default function EmployeeMeShowcase() {
                   本日のサマリー · Hôm nay
                 </CardTitle>
               </CardHeader>
-              <CardContent flush>
-                <dl className="divide-border divide-y">
+              <CardContent>
+                <Descriptions columns={1} layout="horizontal" labelAlign="start">
                   {SUMMARY.map((s) => (
-                    <Flex
-                      key={s.label}
-                      align="center"
-                      justify="between"
-                      gap="md"
-                      className="px-4 py-2.5"
-                    >
-                      <Text as="dt" size="sm" tone="muted" className="whitespace-nowrap">
-                        {s.label}
-                      </Text>
-                      <Text as="dd" size="sm" weight="medium" align="end" tabular>
+                    <Descriptions.Item key={s.label} label={s.label}>
+                      <Text size="sm" weight="medium" tabular>
                         {s.value}
                       </Text>
-                    </Flex>
+                    </Descriptions.Item>
                   ))}
-                </dl>
+                </Descriptions>
               </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>
 

package/docs/showcase/case4-login.tsx

@@ -7,9 +7,10 @@
  * not a transcription of the prototype DOM.
  *
  * Composition map (prototype block → @godxjp/ui primitive):
- *   no shell ............... a bare centered page (login has no AppShell)
- *   comfortable density .... `.ui-density-comfortable` wrapper → 44px touch floor
- *   locale + theme toggle .. Select (locale) + ToggleGroup (theme) top-right
+ *   page shell ............. AuthShell (the unauthenticated root shell)
+ *   comfortable density .... AuthShell's own control tier → 44px touch floor
+ *   locale + theme toggle .. AuthShell `actions` (banner, inline end)
+ *   two-column measure ..... AuthShell `measure="wide"` → 64rem content slot
  *   split brand panel ...... Card composition, hidden < lg (mobile-first)
  *   auth card .............. Card (shadow-lg — the one resting shadow login allows)
  *   SSO buttons ............ Button(outline) full-width + brand SVG slot
@@ -47,8 +48,9 @@ import {
   CardHeader,
   CardTitle,
   CardDescription,
+  Descriptions,
 } from "@godxjp/ui/data-display";
-import { Flex, ResponsiveGrid, Separator } from "@godxjp/ui/layout";
+import { AuthShell, Flex, ResponsiveGrid, Separator } from "@godxjp/ui/layout";
 
 // ── The single allowed multi-color brand mark (Google "G") ─────────────────────
 // Icons normally inherit currentColor; a third-party brand mark is the documented
@@ -114,13 +116,19 @@ export default function LoginShowcase() {
   const [theme, setTheme] = React.useState("light");
 
   return (
-    <div className="ui-density-comfortable bg-muted/40 text-foreground min-h-screen">
-      {/* Locale + theme toggle, pinned top-right. Stacks under brand on narrow. */}
-      <Flex align="center" justify="between" gap="md" className="px-4 py-3 sm:px-6">
+    <AuthShell
+      /* The 64rem content slot the split (brand panel + card) login needs. */
+      measure="wide"
+      className="text-foreground"
+      /* Brand mark in the banner below lg; from lg the split panel carries it. */
+      brand={
         <div className="lg:hidden">
           <BrandLockup />
         </div>
-        <Flex align="center" gap="sm" className="ms-auto">
+      }
+      /* Page-level controls, pinned to the banner's inline end. */
+      actions={
+        <>
           <Select value={locale} onValueChange={setLocale}>
             <SelectTrigger size="sm" className="w-32" aria-label="言語を選択">
               <Languages aria-hidden="true" className="text-muted-foreground" />
@@ -152,20 +160,16 @@ export default function LoginShowcase() {
               <Monitor aria-hidden="true" />
             </ToggleGroupItem>
           </ToggleGroup>
-        </Flex>
-      </Flex>
-
+        </>
+      }
+    >
       {/* Centered auth area. Split brand panel + card sit side-by-side from lg. */}
-      <div className="mx-auto flex min-h-[calc(100vh-64px)] w-full max-w-5xl items-center px-4 py-8 sm:px-6">
-        <ResponsiveGrid
-          columns={{ sm: 1, lg: 2, md: 1 }}
-          gap="xl"
-          className="mx-auto w-full items-stretch"
-        >
-          {/* Split brand panel — hidden on mobile (mobile-first), shown from lg. */}
-          <aside className="hidden lg:flex">
-            <Card className="bg-primary/5 w-full">
-              <CardContent solo className="flex h-full flex-col justify-between gap-8">
+      <ResponsiveGrid columns={{ sm: 1, lg: 2, md: 1 }} gap="xl" className="w-full items-stretch">
+        {/* Split brand panel — hidden on mobile (mobile-first), shown from lg. */}
+        <aside className="hidden lg:block">
+          <Card className="bg-primary/5 h-full w-full">
+            <CardContent solo className="h-full">
+              <Flex direction="col" justify="between" gap="xl">
                 <BrandLockup size="lg" />
                 <Flex direction="col" gap="md">
                   <Heading level={2} className="leading-snug">
@@ -176,49 +180,43 @@ export default function LoginShowcase() {
                     多拠点・多テナントに対応し、現場と管理をつなぎます。
                   </Text>
                 </Flex>
-                <dl className="border-border grid grid-cols-3 gap-4 border-t pt-6">
-                  <div>
-                    <Text as="dt" size="2xs" tone="muted">
-                      導入企業
-                    </Text>
-                    <Text as="dd" size="lg" weight="bold" tabular>
+                <Separator />
+                <Descriptions columns={3}>
+                  <Descriptions.Item label="導入企業">
+                    <Text size="lg" weight="bold" tabular>
                       1,240
                     </Text>
-                  </div>
-                  <div>
-                    <Text as="dt" size="2xs" tone="muted">
-                      稼働拠点
-                    </Text>
-                    <Text as="dd" size="lg" weight="bold" tabular>
+                  </Descriptions.Item>
+                  <Descriptions.Item label="稼働拠点">
+                    <Text size="lg" weight="bold" tabular>
                       8,600
                     </Text>
-                  </div>
-                  <div>
-                    <Text as="dt" size="2xs" tone="muted">
-                      月間打刻
-                    </Text>
-                    <Text as="dd" size="lg" weight="bold" tabular>
+                  </Descriptions.Item>
+                  <Descriptions.Item label="月間打刻">
+                    <Text size="lg" weight="bold" tabular>
                       21M
                     </Text>
-                  </div>
-                </dl>
-              </CardContent>
-            </Card>
-          </aside>
-
-          {/* Auth card — the one surface allowed a resting shadow (shadow-lg). */}
-          <Card className="mx-auto w-full max-w-sm self-center shadow-lg lg:mx-0">
-            <CardHeader className="flex flex-col gap-1.5 pb-2 text-center lg:text-start">
-              <Flex justify="center" className="lg:hidden">
-                <BrandLockup />
+                  </Descriptions.Item>
+                </Descriptions>
               </Flex>
-              <CardTitle className="text-lg font-semibold">ログイン</CardTitle>
-              <CardDescription className="text-muted-foreground text-xs">
-                勤怠管理プラットフォームへようこそ
-              </CardDescription>
-            </CardHeader>
+            </CardContent>
+          </Card>
+        </aside>
 
-            <CardContent solo className="flex flex-col gap-5">
+        {/* Auth card — the one surface allowed a resting shadow (shadow-lg). */}
+        <Card className="mx-auto w-full max-w-sm self-center shadow-lg">
+          <CardHeader className="text-center lg:text-start">
+            <Flex justify="center" className="lg:hidden">
+              <BrandLockup />
+            </Flex>
+            <CardTitle className="text-lg font-semibold">ログイン</CardTitle>
+            <CardDescription className="text-muted-foreground text-xs">
+              勤怠管理プラットフォームへようこそ
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent solo>
+            <Flex direction="col" gap="lg">
               {/* SSO buttons — outline, full-width, 44px (comfortable). */}
               <Flex direction="col" gap="sm">
                 <Button variant="outline" className="w-full justify-center">
@@ -241,67 +239,63 @@ export default function LoginShowcase() {
 
               {/* Email — uncontrolled, seeded so the filled state shows at rest. */}
               <form
-                className="flex flex-col gap-4"
                 onSubmit={(e) => {
                   e.preventDefault();
                 }}
               >
-                <FormField id="login-email" label="メールアドレス" required>
-                  <Input
-                    type="email"
-                    name="email"
-                    autoComplete="email"
-                    inputMode="email"
-                    placeholder="name@example.com"
-                    defaultValue="m.tanaka@famgia.com"
-                  />
-                </FormField>
+                <Flex direction="col" gap="md">
+                  <FormField id="login-email" label="メールアドレス" required>
+                    <Input
+                      type="email"
+                      name="email"
+                      autoComplete="email"
+                      inputMode="email"
+                      placeholder="name@example.com"
+                      defaultValue="m.tanaka@famgia.com"
+                    />
+                  </FormField>
 
-                {/* Password — labelAddon hosts the right-aligned "忘れた場合" link. */}
-                <FormField
-                  id="login-password"
-                  label="パスワード"
-                  required
-                  labelAddon={
-                    <Button
-                      type="button"
-                      variant="link"
-                      size="sm"
-                      className="ms-auto h-auto p-0 text-xs"
-                    >
-                      お忘れの場合
-                    </Button>
-                  }
-                >
-                  <PasswordInput
-                    name="password"
-                    autoComplete="current-password"
-                    placeholder="パスワードを入力"
-                    defaultValue="example-pass"
-                  />
-                </FormField>
+                  {/* Password — labelAddon hosts the right-aligned "忘れた場合" link. */}
+                  <FormField
+                    id="login-password"
+                    label="パスワード"
+                    required
+                    labelAddon={
+                      <Button type="button" variant="link" size="sm" className="ms-auto text-xs">
+                        お忘れの場合
+                      </Button>
+                    }
+                  >
+                    <PasswordInput
+                      name="password"
+                      autoComplete="current-password"
+                      placeholder="パスワードを入力"
+                      defaultValue="example-pass"
+                    />
+                  </FormField>
 
-                {/* The single --primary action of the view. */}
-                <Button type="submit" className="w-full justify-center">
-                  ログイン
-                </Button>
+                  {/* The single --primary action of the view. */}
+                  <Button type="submit" className="w-full justify-center">
+                    ログイン
+                  </Button>
+                </Flex>
               </form>
 
               <Text as="p" size="2xs" tone="muted" align="center" className="leading-relaxed">
                 ログインすると{" "}
-                <Button variant="link" size="sm" className="h-auto p-0 text-[var(--font-size-2xs)]">
+                <Button variant="link" size="sm" className="text-[var(--font-size-2xs)]">
                   利用規約
                 </Button>{" "}
                 ·{" "}
-                <Button variant="link" size="sm" className="h-auto p-0 text-[var(--font-size-2xs)]">
+                <Button variant="link" size="sm" className="text-[var(--font-size-2xs)]">
                   プライバシーポリシー
                 </Button>{" "}
                 に同意したものとみなされます。
               </Text>
-            </CardContent>
-          </Card>
-        </ResponsiveGrid>
-      </div>
-    </div>
+            </Flex>
+          </CardContent>
+        </Card>
+      </ResponsiveGrid>
+    </AuthShell>
   );
 }