@godxjp/ui 19.2.0 → 19.4.0

package/docs/data-entry/form-field/index.tsx

@@ -215,34 +215,38 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="max-w-3xl">
-              <Form layout="horizontal" labelWidth="12rem" controlWidth="28rem">
-                <FormField
-                  id="matrix-ja"
-                  label="請求書の送付先メールアドレス"
-                  required
-                  helper="確認メールを送信します"
-                >
-                  <Input id="matrix-ja" defaultValue="billing@example.jp" />
-                </FormField>
-                <FormField
-                  id="matrix-vi"
-                  label="Địa chỉ email nhận hóa đơn và thông báo"
-                  controlWidth="20rem"
-                >
-                  <Input id="matrix-vi" defaultValue="ketoan@example.vn" />
-                </FormField>
-              </Form>
-            </div>
-            <div className="mt-6 max-w-80 border p-3" dir="rtl" lang="ar">
-              <FormField
-                id="matrix-rtl"
-                label="البريد الإلكتروني لاستلام الفاتورة"
-                helper="سيتم إرسال رسالة تأكيد"
-              >
-                <Input id="matrix-rtl" type="email" placeholder="name@example.com" />
-              </FormField>
-            </div>
+            <Flex direction="col" gap="lg">
+              <div className="max-w-3xl">
+                <Form layout="horizontal" labelWidth="12rem" controlWidth="28rem">
+                  <FormField
+                    id="matrix-ja"
+                    label="請求書の送付先メールアドレス"
+                    required
+                    helper="確認メールを送信します"
+                  >
+                    <Input id="matrix-ja" defaultValue="billing@example.jp" />
+                  </FormField>
+                  <FormField
+                    id="matrix-vi"
+                    label="Địa chỉ email nhận hóa đơn và thông báo"
+                    controlWidth="20rem"
+                  >
+                    <Input id="matrix-vi" defaultValue="ketoan@example.vn" />
+                  </FormField>
+                </Form>
+              </div>
+              <Card className="max-w-80" dir="rtl" lang="ar">
+                <CardContent>
+                  <FormField
+                    id="matrix-rtl"
+                    label="البريد الإلكتروني لاستلام الفاتورة"
+                    helper="سيتم إرسال رسالة تأكيد"
+                  >
+                    <Input id="matrix-rtl" type="email" placeholder="name@example.com" />
+                  </FormField>
+                </CardContent>
+              </Card>
+            </Flex>
           </CardContent>
         </Card>
 
@@ -308,7 +312,7 @@ export default function Demo() {
                 <SheetHeader>
                   <SheetTitle>請求先設定</SheetTitle>
                 </SheetHeader>
-                <Form className="mt-4">
+                <Form>
                   <FormField id="sheet-name" label="宛名" required>
                     <Input id="sheet-name" />
                   </FormField>

package/docs/data-entry/form-root.tsx

@@ -92,7 +92,7 @@ export default function Demo() {
           </FormRoot>
         </CardContent>
       </Card>
-      <p className="text-muted-foreground mt-4 text-sm">
+      <p className="text-muted-foreground text-sm">
         warning state、form-level error-summary から field への focus link、touched-only timing は
         public wrapper API では未提供。React Hook Form の設定または consumer composition として
         UNTESTED。

package/docs/data-entry/input-otp.tsx

@@ -140,7 +140,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* align — the centred challenge, without a consumer wrapper div (gh#12) */}
+        {/* Align — the centred challenge, without a consumer wrapper div */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>中央寄せ（align=&quot;center&quot;）</CardTitle>

package/docs/data-entry/password-input.tsx

@@ -95,11 +95,7 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
-        <PasswordInput
-          size="sm"
-          placeholder="Compact tier (sm)"
-          aria-label="Password (sm)"
-        />
+        <PasswordInput size="sm" placeholder="Compact tier (sm)" aria-label="Password (sm)" />
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/select.tsx

@@ -262,18 +262,18 @@ export default function Demo() {
                 placeholder="担当者を選択"
                 options={people}
                 renderOption={(option) => (
-                  <div className="flex w-full items-center gap-2">
+                  <Flex align="center" gap="sm" className="w-full">
                     {avatarFor(option.label)}
-                    <div className="flex min-w-0 flex-col">
+                    <Flex direction="col" gap="xs" className="min-w-0">
                       <span className="truncate text-sm font-medium">{option.label}</span>
                       <span className="text-muted-foreground truncate text-xs">
                         {option.sublabel}
                       </span>
-                    </div>
+                    </Flex>
                     <Badge tone="success" className="ms-auto">
                       VIP
                     </Badge>
-                  </div>
+                  </Flex>
                 )}
               />
             </FormField>
@@ -300,13 +300,13 @@ export default function Demo() {
                 placeholder="担当者を選択"
                 options={people}
                 labelRender={({ label }) => (
-                  <span className="flex items-center gap-2">
+                  <Flex align="center" gap="sm">
                     {avatarFor(String(label))}
                     <span className="truncate">{label}</span>
-                    <Badge tone="info" icon={null} className="ms-1">
+                    <Badge tone="info" icon={null}>
                       担当
                     </Badge>
-                  </span>
+                  </Flex>
                 )}
               />
             </FormField>

package/docs/data-entry/textarea.tsx

@@ -18,7 +18,7 @@ const SEED_MESSAGES: Message[] = [
 ];
 
 /**
- * The godx-chatter composer (gh#310). One line at rest, grows line by line, scrolls itself past
+ * The godx-chatter composer. One line at rest, grows line by line, scrolls itself past
  * eight rows, and collapses back to one line the moment the post is sent — the send button just
  * resets the controlled value, and `autoGrow` follows it without a single line of layout code.
  */
@@ -58,7 +58,7 @@ function Composer() {
             value={draft}
             onChange={(event) => setDraft(event.target.value)}
           />
-          <Flex direction="row" justify="end" gap="sm" className="px-2 pb-2">
+          <Flex direction="row" justify="end" gap="sm">
             <Button size="sm" onClick={send}>
               送信
             </Button>
@@ -109,7 +109,7 @@ export default function Demo() {
                     aria-label="サーフェス内のテキストエリア"
                     placeholder="メッセージを入力..."
                   />
-                  <Flex direction="row" justify="end" className="px-2 pb-2">
+                  <Flex direction="row" justify="end">
                     <Button size="sm">送信</Button>
                   </Flex>
                 </CardContent>

package/docs/data-entry/toggle-count.tsx

@@ -14,7 +14,7 @@ import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
- * Toggle `count` — the counted, PRESSED chip (gh#312).
+ * Toggle `count` — the counted, PRESSED chip.
  *
  * `Button` owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`) and `Toggle`
  * owns the pressed state, so a faceted filter chip ("未対応 42", selected or not) and a reaction

package/docs/feedback/alert.tsx

@@ -139,7 +139,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* Banner — the SAME component at the page measure (gh#255). variant="banner" swaps only
+        {/* Banner — the SAME component at the page measure. variant="banner" swaps only
             the box: square, edge-to-edge, ruled on the block-end edge, measured by the --banner-*
             tokens. Every tone, the icon, the actions grid and the dismiss ✕ are inherited from the
             inline alert above, so there is nothing new to learn and nothing duplicated.

package/docs/feedback/banner.tsx

@@ -5,7 +5,7 @@ import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
- * Banner · full-bleed page/shell attention strip (godxjp-ui#255) — the Alert
+ * Banner · full-bleed page/shell attention strip — the Alert
  * primitive with the structural axis fixed to variant="banner". Persistent,
  * page/shell-scoped, at most one per surface. tone owns colour + icon +
  * live-region politeness; onDismiss renders the built-in dismiss (last in focus

package/docs/feedback/sheet.tsx

@@ -116,68 +116,70 @@ export default function Demo() {
                   subtitle="条件を組み合わせて仕訳を絞り込みます。"
                   extra={<Badge tone="info">3 条件</Badge>}
                 />
-                <SheetBody className="flex flex-col gap-4">
-                  <FormField id="filter-account" label="勘定科目">
-                    <Select value={account} onValueChange={setAccount}>
-                      <SelectTrigger id="filter-account" aria-label="勘定科目">
-                        <SelectValue placeholder="すべての勘定科目" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="all">すべての勘定科目</SelectItem>
-                        <SelectItem value="cash">現金</SelectItem>
-                        <SelectItem value="sales">売上高</SelectItem>
-                        <SelectItem value="expense">旅費交通費</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </FormField>
-                  <FormField id="filter-status" label="ステータス">
-                    <Select value={status} onValueChange={setStatus}>
-                      <SelectTrigger id="filter-status" aria-label="ステータス">
-                        <SelectValue placeholder="すべてのステータス" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="all">すべてのステータス</SelectItem>
-                        <SelectItem value="draft">下書き</SelectItem>
-                        <SelectItem value="approved">承認済み</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </FormField>
-                  <FormField id="filter-source" label="ソース">
-                    <Select value={source} onValueChange={setSource}>
-                      <SelectTrigger id="filter-source" aria-label="ソース">
-                        <SelectValue placeholder="すべてのソース" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="all">すべてのソース</SelectItem>
-                        <SelectItem value="manual">手入力</SelectItem>
-                        <SelectItem value="import">インポート</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </FormField>
-                  <FormField id="filter-amount-min" label="金額">
-                    <Flex direction="row" gap="sm" align="center">
-                      <Input
-                        id="filter-amount-min"
-                        className="min-w-0 flex-1"
-                        inputMode="numeric"
-                        placeholder="最小"
-                        value={minAmount}
-                        onChange={(e) => setMinAmount(e.target.value)}
-                      />
-                      <Text tone="muted" aria-hidden="true">
-                        –
-                      </Text>
-                      <Input
-                        id="filter-amount-max"
-                        aria-label="最大金額"
-                        className="min-w-0 flex-1"
-                        inputMode="numeric"
-                        placeholder="最大"
-                        value={maxAmount}
-                        onChange={(e) => setMaxAmount(e.target.value)}
-                      />
-                    </Flex>
-                  </FormField>
+                <SheetBody>
+                  <Flex direction="col" gap="md">
+                    <FormField id="filter-account" label="勘定科目">
+                      <Select value={account} onValueChange={setAccount}>
+                        <SelectTrigger id="filter-account" aria-label="勘定科目">
+                          <SelectValue placeholder="すべての勘定科目" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="all">すべての勘定科目</SelectItem>
+                          <SelectItem value="cash">現金</SelectItem>
+                          <SelectItem value="sales">売上高</SelectItem>
+                          <SelectItem value="expense">旅費交通費</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormField>
+                    <FormField id="filter-status" label="ステータス">
+                      <Select value={status} onValueChange={setStatus}>
+                        <SelectTrigger id="filter-status" aria-label="ステータス">
+                          <SelectValue placeholder="すべてのステータス" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="all">すべてのステータス</SelectItem>
+                          <SelectItem value="draft">下書き</SelectItem>
+                          <SelectItem value="approved">承認済み</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormField>
+                    <FormField id="filter-source" label="ソース">
+                      <Select value={source} onValueChange={setSource}>
+                        <SelectTrigger id="filter-source" aria-label="ソース">
+                          <SelectValue placeholder="すべてのソース" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="all">すべてのソース</SelectItem>
+                          <SelectItem value="manual">手入力</SelectItem>
+                          <SelectItem value="import">インポート</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormField>
+                    <FormField id="filter-amount-min" label="金額">
+                      <Flex direction="row" gap="sm" align="center">
+                        <Input
+                          id="filter-amount-min"
+                          className="min-w-0 flex-1"
+                          inputMode="numeric"
+                          placeholder="最小"
+                          value={minAmount}
+                          onChange={(e) => setMinAmount(e.target.value)}
+                        />
+                        <Text tone="muted" aria-hidden="true">
+                          –
+                        </Text>
+                        <Input
+                          id="filter-amount-max"
+                          aria-label="最大金額"
+                          className="min-w-0 flex-1"
+                          inputMode="numeric"
+                          placeholder="最大"
+                          value={maxAmount}
+                          onChange={(e) => setMaxAmount(e.target.value)}
+                        />
+                      </Flex>
+                    </FormField>
+                  </Flex>
                 </SheetBody>
                 <SheetFooter>
                   <Button
@@ -220,21 +222,23 @@ export default function Demo() {
                   <SheetTitle>取引先編集 · 株式会社サンプル</SheetTitle>
                   <SheetDescription>取引先の基本情報を編集します。</SheetDescription>
                 </SheetHeader>
-                <SheetBody className="flex flex-col gap-4">
-                  <FormField id="edit-company" label="会社名" required>
-                    <Input
-                      id="edit-company"
-                      value={companyName}
-                      onChange={(e) => setCompanyName(e.target.value)}
-                    />
-                  </FormField>
-                  <FormField id="edit-registration" label="登録番号" helper="T + 13桁">
-                    <Input
-                      id="edit-registration"
-                      value={registration}
-                      onChange={(e) => setRegistration(e.target.value)}
-                    />
-                  </FormField>
+                <SheetBody>
+                  <Flex direction="col" gap="md">
+                    <FormField id="edit-company" label="会社名" required>
+                      <Input
+                        id="edit-company"
+                        value={companyName}
+                        onChange={(e) => setCompanyName(e.target.value)}
+                      />
+                    </FormField>
+                    <FormField id="edit-registration" label="登録番号" helper="T + 13桁">
+                      <Input
+                        id="edit-registration"
+                        value={registration}
+                        onChange={(e) => setRegistration(e.target.value)}
+                      />
+                    </FormField>
+                  </Flex>
                 </SheetBody>
                 <SheetFooter>
                   <Button variant="outline" onClick={() => setEditOpen(false)}>
@@ -269,14 +273,16 @@ export default function Demo() {
                   <SheetTitle>仕訳編集 · #2024-0412</SheetTitle>
                   <SheetDescription>摘要を編集します。削除は元に戻せません。</SheetDescription>
                 </SheetHeader>
-                <SheetBody className="flex flex-col gap-4">
-                  <FormField id="record-memo" label="摘要">
-                    <Input
-                      id="record-memo"
-                      value={memo}
-                      onChange={(e) => setMemo(e.target.value)}
-                    />
-                  </FormField>
+                <SheetBody>
+                  <Flex direction="col" gap="md">
+                    <FormField id="record-memo" label="摘要">
+                      <Input
+                        id="record-memo"
+                        value={memo}
+                        onChange={(e) => setMemo(e.target.value)}
+                      />
+                    </FormField>
+                  </Flex>
                 </SheetBody>
                 <SheetFooter>
                   <Button
@@ -328,15 +334,17 @@ export default function Demo() {
                     subtitle="2026-07-30 発行 · 株式会社サンプル"
                     extra={<Badge tone="success">支払済み</Badge>}
                   />
-                  <SheetBody className="flex flex-col gap-4">
-                    <Text size="sm">
-                      レコードのdetail surfaceはdesktopでは右side panel、mobileではbottom
-                      sheetとして表示されます。
-                    </Text>
-                    <Text size="sm" tone="muted">
-                      幅は side panel のときだけ適用され、bottom sheet
-                      では全幅になります（widthはbottomでは無視されます）。
-                    </Text>
+                  <SheetBody>
+                    <Flex direction="col" gap="md">
+                      <Text size="sm">
+                        レコードのdetail surfaceはdesktopでは右side panel、mobileではbottom
+                        sheetとして表示されます。
+                      </Text>
+                      <Text size="sm" tone="muted">
+                        幅は side panel のときだけ適用され、bottom sheet
+                        では全幅になります（widthはbottomでは無視されます）。
+                      </Text>
+                    </Flex>
                   </SheetBody>
                   <SheetFooter>
                     <Button variant="outline" onClick={() => setDetailOpen(false)}>
@@ -385,14 +393,16 @@ export default function Demo() {
                     subtitle={`見出し帯は tone="${headerTone}" で描画しています。`}
                     extra={<Badge tone={headerTone}>{headerTone}</Badge>}
                   />
-                  <SheetBody className="flex flex-col gap-4">
-                    <Text size="sm">
-                      帯の色だけが tone
-                      に追従し、見出しと本文の文字色は変わりません。帯は本文と同じ左右インセットで全幅に広がります。
-                    </Text>
-                    <Text size="sm" tone="muted">
-                      extra スロットは帯の右端に固定され、閉じるボタンとは重なりません。
-                    </Text>
+                  <SheetBody>
+                    <Flex direction="col" gap="md">
+                      <Text size="sm">
+                        帯の色だけが tone
+                        に追従し、見出しと本文の文字色は変わりません。帯は本文と同じ左右インセットで全幅に広がります。
+                      </Text>
+                      <Text size="sm" tone="muted">
+                        extra スロットは帯の右端に固定され、閉じるボタンとは重なりません。
+                      </Text>
+                    </Flex>
                   </SheetBody>
                   <SheetFooter>
                     <Button variant="outline" onClick={() => setToneOpen(false)}>

package/docs/feedback/skeleton.tsx

@@ -37,7 +37,7 @@ export default function Demo() {
               <Skeleton className="h-5 w-48" />
               <Skeleton className="h-4 w-72" />
               <Skeleton className="h-4 w-60" />
-              <Flex direction="row" gap="sm" align="center" className="mt-2">
+              <Flex direction="row" gap="sm" align="center">
                 <Skeleton className="size-10 rounded-full" />
                 <Flex direction="col" gap="xs">
                   <Skeleton className="h-4 w-32" />
@@ -69,7 +69,7 @@ export default function Demo() {
               its own structure.
             </CardDescription>
           </CardHeader>
-          <CardContent className="p-0">
+          <CardContent flush>
             <SkeletonTable rows={6} columns={6} />
           </CardContent>
         </Card>

package/docs/foundation/colors.tsx

@@ -66,6 +66,7 @@ type Swatch = { cls: string; token: string; role: string };
 function SwatchTile({ swatch, text }: { swatch: Swatch; text?: boolean }) {
   return (
     <Flex direction="col" gap="xs">
+      {/* ui-audit-disable-next-line no-hand-rolled-surface no-utility-layout no-utility-spacing — a swatch showing the token itself; the fill IS the subject */}
       <div className={`border-border flex h-14 items-end rounded-md border p-2 ${swatch.cls}`}>
         {text ? (
           <Text size="xs" mono className="leading-none">
@@ -102,14 +103,15 @@ function SwatchGroup({ items, text, dark }: { items: Swatch[]; text?: boolean; d
   if (!dark) return grid;
   return (
     <Flex direction="col" gap="md">
-      <div>
-        <Text as="div" size="xs" tone="muted" weight="medium" className="mb-2">
+      <Flex direction="col" gap="sm">
+        <Text as="div" size="xs" tone="muted" weight="medium">
           Light
         </Text>
         {grid}
-      </div>
-      <div className="bg-background text-foreground dark rounded-md p-3">
-        <Text as="div" size="xs" tone="muted" weight="medium" className="mb-2">
+      </Flex>
+      {/* ui-audit-disable-next-line no-utility-spacing — a swatch showing the token itself; the fill IS the subject */}
+      <Flex direction="col" gap="sm" className="bg-background text-foreground dark rounded-md p-3">
+        <Text as="div" size="xs" tone="muted" weight="medium">
           Dark (.dark)
         </Text>
         <ResponsiveGrid columns={{ sm: 2, md: 3, lg: 4 }}>
@@ -117,7 +119,7 @@ function SwatchGroup({ items, text, dark }: { items: Swatch[]; text?: boolean; d
             <SwatchTile key={s.token} swatch={s} text={text} />
           ))}
         </ResponsiveGrid>
-      </div>
+      </Flex>
     </Flex>
   );
 }