@godxjp/ui 19.2.0 → 19.3.1

package/docs/showcase/case4-login.tsx

@@ -156,7 +156,11 @@ export default function LoginShowcase() {
       </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">
+      <Flex
+        align="center"
+        gap="xs"
+        className="mx-auto min-h-[calc(100vh-64px)] w-full max-w-5xl px-4 py-8 sm:px-6"
+      >
         <ResponsiveGrid
           columns={{ sm: 1, lg: 2, md: 1 }}
           gap="xl"
@@ -165,50 +169,54 @@ export default function LoginShowcase() {
           {/* 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">
-                <BrandLockup size="lg" />
-                <Flex direction="col" gap="md">
-                  <Heading level={2} className="leading-snug">
-                    打刻から承認まで、ひとつの勤怠基盤で。
-                  </Heading>
-                  <Text as="p" tone="muted" className="leading-relaxed">
-                    出勤・休憩・残業の打刻、シフト調整、欠勤・遅刻の承認を一元化します。
-                    多拠点・多テナントに対応し、現場と管理をつなぎます。
-                  </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>
-                      1,240
-                    </Text>
-                  </div>
-                  <div>
-                    <Text as="dt" size="2xs" tone="muted">
-                      稼働拠点
-                    </Text>
-                    <Text as="dd" size="lg" weight="bold" tabular>
-                      8,600
-                    </Text>
-                  </div>
-                  <div>
-                    <Text as="dt" size="2xs" tone="muted">
-                      月間打刻
+              <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">
+                      打刻から承認まで、ひとつの勤怠基盤で。
+                    </Heading>
+                    <Text as="p" tone="muted" className="leading-relaxed">
+                      出勤・休憩・残業の打刻、シフト調整、欠勤・遅刻の承認を一元化します。
+                      多拠点・多テナントに対応し、現場と管理をつなぎます。
                     </Text>
-                    <Text as="dd" size="lg" weight="bold" tabular>
-                      21M
-                    </Text>
-                  </div>
-                </dl>
+                  </Flex>
+                  <dl className="border-border border-t pt-6">
+                    <ResponsiveGrid columns={3} gap="md">
+                      <div>
+                        <Text as="dt" size="2xs" tone="muted">
+                          導入企業
+                        </Text>
+                        <Text as="dd" 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>
+                          8,600
+                        </Text>
+                      </div>
+                      <div>
+                        <Text as="dt" size="2xs" tone="muted">
+                          月間打刻
+                        </Text>
+                        <Text as="dd" size="lg" weight="bold" tabular>
+                          21M
+                        </Text>
+                      </div>
+                    </ResponsiveGrid>
+                  </dl>
+                </Flex>
               </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">
+            <CardHeader className="text-center lg:text-start">
               <Flex justify="center" className="lg:hidden">
                 <BrandLockup />
               </Flex>
@@ -218,90 +226,88 @@ export default function LoginShowcase() {
               </CardDescription>
             </CardHeader>
 
-            <CardContent solo className="flex flex-col gap-5">
-              {/* SSO buttons — outline, full-width, 44px (comfortable). */}
-              <Flex direction="col" gap="sm">
-                <Button variant="outline" className="w-full justify-center">
-                  <GoogleMark />
-                  Google で続ける
-                </Button>
-                <Button variant="outline" className="w-full justify-center">
-                  シングルサインオン (SSO)
-                </Button>
-              </Flex>
+            <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">
+                    <GoogleMark />
+                    Google で続ける
+                  </Button>
+                  <Button variant="outline" className="w-full justify-center">
+                    シングルサインオン (SSO)
+                  </Button>
+                </Flex>
 
-              {/* Divider "または" — Separator pair + centered label. */}
-              <Flex align="center" gap="md">
-                <Separator className="flex-1" />
-                <Text size="xs" tone="muted">
-                  または
-                </Text>
-                <Separator className="flex-1" />
-              </Flex>
+                {/* Divider "または" — Separator pair + centered label. */}
+                <Flex align="center" gap="md">
+                  <Separator className="flex-1" />
+                  <Text size="xs" tone="muted">
+                    または
+                  </Text>
+                  <Separator className="flex-1" />
+                </Flex>
 
-              {/* 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>
+                {/* Email — uncontrolled, seeded so the filled state shows at rest. */}
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                  }}
+                >
+                  <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"
+                    {/* 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>
+                      }
                     >
-                      お忘れの場合
-                    </Button>
-                  }
-                >
-                  <PasswordInput
-                    name="password"
-                    autoComplete="current-password"
-                    placeholder="パスワードを入力"
-                    defaultValue="example-pass"
-                  />
-                </FormField>
+                      <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>
-              </form>
+                    {/* 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>{" "}
-                ·{" "}
-                <Button variant="link" size="sm" className="h-auto p-0 text-[var(--font-size-2xs)]">
-                  プライバシーポリシー
-                </Button>{" "}
-                に同意したものとみなされます。
-              </Text>
+                <Text as="p" size="2xs" tone="muted" align="center" className="leading-relaxed">
+                  ログインすると{" "}
+                  <Button variant="link" size="sm" className="text-[var(--font-size-2xs)]">
+                    利用規約
+                  </Button>{" "}
+                  ·{" "}
+                  <Button variant="link" size="sm" className="text-[var(--font-size-2xs)]">
+                    プライバシーポリシー
+                  </Button>{" "}
+                  に同意したものとみなされます。
+                </Text>
+              </Flex>
             </CardContent>
           </Card>
         </ResponsiveGrid>
-      </div>
+      </Flex>
     </div>
   );
 }

package/docs/showcase/case5-shift-calendar.tsx

@@ -354,7 +354,7 @@ export default function ShiftCalendarShowcase() {
                     2026年5月
                   </Button>
                 </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="start">
+                <PopoverContent className="w-auto" style={{ padding: 0 }} align="start">
                   <Calendar
                     mode="single"
                     selected={jumpMonth}
@@ -572,13 +572,13 @@ function MonthGrid({ onPick }: { onPick: (d: DayCell) => void }) {
                         </Badge>
                       ) : null}
                     </Flex>
-                    <Flex direction="col" className="gap-0.5">
+                    <Flex direction="col" gap="xs">
                       {cell.holiday ? <ShiftPill kind="holiday" staff={cell.holiday} /> : null}
                       {shown.map((s, i) => (
                         <ShiftPill key={`${s.kind}-${i}`} kind={s.kind} staff={s.staff} />
                       ))}
                       {overflow > 0 ? (
-                        <Text as="span" size="2xs" tone="muted" tabular className="px-1">
+                        <Text as="span" size="2xs" tone="muted" tabular>
                           ＋{overflow} 件
                         </Text>
                       ) : null}