@godxjp/ui 20.0.0 → 20.1.0

package/docs/data-entry/switch.tsx

@@ -61,6 +61,47 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Ant Design axes · loading, checkedChildren</CardTitle>
+            <CardDescription>
+              loading は通信中の状態です。disabled ではなく aria-busy / aria-disabled
+              を使います。disabled はタブ順から外れるため、保存中にキーボードの
+              フォーカスが次の項目へ飛んでしまうからです。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Field
+                id="sw-loading"
+                label="公開設定 (保存中)"
+                description="通信が終わるまで操作を受け付けません"
+              >
+                <Switch id="sw-loading" loading defaultChecked />
+              </Field>
+              <Field
+                id="sw-words-off"
+                label="ラベル付き (オフ)"
+                description="トラックの中に状態の語を表示します"
+              >
+                <Switch id="sw-words-off" checkedChildren="有効" unCheckedChildren="無効" />
+              </Field>
+              <Field
+                id="sw-words-on"
+                label="ラベル付き (オン)"
+                description="語が入ってもつまみは端まで届きます"
+              >
+                <Switch
+                  id="sw-words-on"
+                  checkedChildren="有効"
+                  unCheckedChildren="無効"
+                  defaultChecked
+                />
+              </Field>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/textarea.tsx

@@ -192,6 +192,44 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              Ant Design axes · status, variant, size, count, autoSize
+            </CardTitle>
+            <CardDescription>
+              variant carries five accepted spellings for three states: outlined / filled /
+              borderless are Ant Design&apos;s, and this library&apos;s older default / ghost
+              resolve onto the first and the last. autoSize is autoGrow plus its row bounds in one
+              prop.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Textarea aria-label="エラー状態" status="error" defaultValue="不正な値" />
+              <Textarea aria-label="警告状態" status="warning" defaultValue="確認してください" />
+              <Textarea aria-label="枠線あり" variant="outlined" defaultValue="outlined" />
+              <Textarea aria-label="塗りつぶし" variant="filled" defaultValue="filled" />
+              <Textarea aria-label="枠線なし" variant="borderless" defaultValue="borderless" />
+              <Textarea aria-label="既定 (旧称)" variant="default" defaultValue="default" />
+              <Textarea aria-label="ゴースト (旧称)" variant="ghost" defaultValue="ghost" />
+              <Textarea aria-label="小さいサイズ" size="sm" placeholder="sm" />
+              <Textarea aria-label="標準サイズ" size="md" placeholder="md" />
+              <Textarea aria-label="大きいサイズ" size="lg" placeholder="lg" />
+              <Textarea
+                aria-label="文字数カウンタ"
+                count={{ max: 140 }}
+                defaultValue="東京都の請求書について"
+              />
+              <Textarea
+                aria-label="自動リサイズ"
+                autoSize={{ minRows: 2, maxRows: 6 }}
+                placeholder="2行から6行まで伸びます"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>In FormField</CardTitle>

package/docs/data-entry/time-picker.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, TimePicker } from "@godxjp/ui/data-entry";
+import { FormField, TimePicker, TimeRangePicker } from "@godxjp/ui/data-entry";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -93,6 +93,90 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>秒単位の締切</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="precision-time" label="締切時刻">
+              <TimePicker
+                id="precision-time"
+                name="precision"
+                defaultValue="17:50:15"
+                format="HH:mm:ss"
+                hourStep={2}
+                minuteStep={10}
+                secondStep={15}
+                changeOnScroll
+                needConfirm
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>12時間表示</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="twelve-time" label="開始時刻">
+              <TimePicker
+                id="twelve-time"
+                name="twelve"
+                defaultValue="13:30"
+                format="h:mm A"
+                use12Hours
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>入力状態</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="readonly-time" label="選択のみ">
+                <TimePicker
+                  id="readonly-time"
+                  inputReadOnly
+                  defaultValue="09:00"
+                  allowClear={false}
+                  size="sm"
+                  variant="filled"
+                />
+              </FormField>
+              <FormField id="invalid-time" label="入力を保持">
+                <TimePicker id="invalid-time" preserveInvalidOnBlur status="error" size="lg" />
+              </FormField>
+              <FormField id="quiet-time" label="任意時刻">
+                <TimePicker
+                  id="quiet-time"
+                  variant="borderless"
+                  status="warning"
+                  placement="top-start"
+                  showNow={false}
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>勤務時間帯</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="shift-range" label="勤務時間">
+              <TimeRangePicker
+                id="shift-range"
+                name="shift"
+                defaultValue={["09:00", "18:00"]}
+                allowEmpty={[false, true]}
+                minuteStep={15}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/time-range-picker.tsx

@@ -0,0 +1,55 @@
+import { TimeRangePicker, FormField } from "@godxjp/ui/data-entry";
+import { Card, CardContent, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+export default function Demo() {
+  return (
+    <PageContainer title="TimeRangePicker" subtitle="勤務時間と受付時間の範囲選択">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>勤務時間</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="work-period" label="勤務時間">
+              <TimeRangePicker
+                id="work-period"
+                name="work"
+                defaultValue={["09:00", "18:00"]}
+                minuteStep={15}
+                allowEmpty={[false, false]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>終了時刻は任意</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="optional-end" label="受付時間">
+              <TimeRangePicker
+                id="optional-end"
+                name="reception"
+                defaultValue={["09:00", ""]}
+                allowEmpty={[false, true]}
+                format="HH:mm:ss"
+                showSeconds
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>日をまたぐ勤務</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="overnight" label="夜勤">
+              <TimeRangePicker id="overnight" defaultValue={["22:00", "06:00"]} order={false} />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/transfer.tsx

@@ -91,6 +91,23 @@ export default function Demo() {
             />
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>検索・ページ分割・初期値</CardTitle>
+            <CardDescription>
+              表示中の有効な行だけを一括選択。移動後も別ページの選択を保持します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Transfer
+              dataSource={ALL_ACCOUNTS}
+              defaultValue={[]}
+              showSearch
+              pagination={{ pageSize: 3 }}
+              name="accounts[]"
+            />
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/upload.tsx

@@ -1,7 +1,13 @@
 import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Upload, type UploadFileItem } from "@godxjp/ui/data-entry";
+import {
+  Form,
+  Upload,
+  type UploadFileItem,
+  type UploadRequestContext,
+} from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -11,12 +17,19 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
  * Composed only from real @godxjp/ui components.
  */
 
-/** No-op uploader: resolves immediately with a fake mediaId for preview purposes. */
-async function noopUpload(_file: File, _item: UploadFileItem) {
-  return { mediaId: "preview-media-id" };
+/** Simulated transport: progress, abort, and retry remain observable in the preview. */
+async function demoUpload(file: File, _item: UploadFileItem, context: UploadRequestContext) {
+  for (let percent = 0; percent <= 100; percent += 20) {
+    await new Promise((resolve) => setTimeout(resolve, 180));
+    context.signal.throwIfAborted();
+    context.onProgress(percent);
+  }
+  if (file.name.startsWith("fail")) throw new Error("アップロードに失敗しました。再試行できます。");
+  return { mediaId: crypto.randomUUID() };
 }
 
 export default function Demo() {
+  const [submittedFiles, setSubmittedFiles] = useState<string[]>([]);
   const [dropzoneItems, setDropzoneItems] = useState<UploadFileItem[]>([]);
   const [buttonItems, setButtonItems] = useState<UploadFileItem[]>([]);
   const [pictureCardItems, setPictureCardItems] = useState<UploadFileItem[]>([]);
@@ -40,6 +53,37 @@ export default function Demo() {
       subtitle="ファイルアップロード · 6バリアント（dropzone / button / picture-card / picture / avatar / avatar-crop）"
     >
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Multipart form</CardTitle>
+            <CardDescription>
+              選択・ドロップ・貼り付けしたファイルをフォームでまとめて送信します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form
+              onReset={() => setSubmittedFiles([])}
+              onSubmit={(event) => {
+                event.preventDefault();
+                const data = new FormData(event.currentTarget);
+                setSubmittedFiles(
+                  data
+                    .getAll("attachments[]")
+                    .filter((value): value is File => value instanceof File)
+                    .map((value) => value.name),
+                );
+              }}
+            >
+              <Upload name="attachments[]" pastable maxCount={3} />
+              <Button type="submit">添付ファイルを確認</Button>
+              <Button type="reset" variant="outline">
+                リセット
+              </Button>
+              <Text>{submittedFiles.join("、")}</Text>
+            </Form>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Dropzone</CardTitle>
@@ -53,9 +97,10 @@ export default function Demo() {
               value={dropzoneItems}
               onValueChange={setDropzoneItems}
               accept=".pdf,.xlsx,.csv"
+              pastable
               maxCount={5}
               maxSizeBytes={20 * 1024 * 1024}
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             />
           </CardContent>
         </Card>
@@ -64,8 +109,7 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>Error and recovery</CardTitle>
             <CardDescription>
-              失敗理由は対象ファイルの行に表示する。Upload は自動 retry prop を持たないため、
-              不正なファイルを削除して修正済みファイルを再選択する。
+              失敗したファイルは再試行できます。処理中のファイルはキャンセルできます。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -98,7 +142,7 @@ export default function Demo() {
               value={buttonItems}
               onValueChange={setButtonItems}
               accept=".csv"
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             >
               CSVをインポート
             </Upload>
@@ -119,7 +163,7 @@ export default function Demo() {
               onValueChange={setPictureCardItems}
               accept="image/*"
               maxCount={6}
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             />
           </CardContent>
         </Card>
@@ -138,7 +182,7 @@ export default function Demo() {
               onValueChange={setPictureItem}
               accept="image/*"
               maxCount={1}
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             />
           </CardContent>
         </Card>
@@ -154,7 +198,7 @@ export default function Demo() {
               value={avatarItem}
               onValueChange={setAvatarItem}
               accept="image/*"
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             />
           </CardContent>
         </Card>
@@ -174,7 +218,7 @@ export default function Demo() {
               onValueChange={setAvatarCropItem}
               accept="image/*"
               maxSizeBytes={5 * 1024 * 1024}
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             />
           </CardContent>
         </Card>

package/docs/feedback/tooltip.tsx

@@ -125,7 +125,7 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>Shared delay across a toolbar (TooltipProvider)</CardTitle>
             <CardDescription>
-              Wrap a cluster in TooltipProvider to set one delayDuration for every tooltip inside —
+              Wrap a cluster in TooltipProvider to set one delayDuration for every tooltip inside ·
               a dense toolbar feels snappy without repeating the prop on each Tooltip.
             </CardDescription>
           </CardHeader>

package/docs/general/activity.tsx

@@ -99,7 +99,7 @@ export default function Demo() {
             <Flex direction="col" gap="md">
               <Flex direction="col" gap="xs">
                 <Text size="xs" tone="muted">
-                  dots（既定）— 3 点が順に浮く。&ldquo;入力中&rdquo; の省略記号の慣習。
+                  dots（既定）· 3 点が順に浮く。&ldquo;入力中&rdquo; の省略記号の慣習。
                 </Text>
                 <Activity variant="dots" label="佐藤さんが入力しています…" />
               </Flex>
@@ -156,7 +156,7 @@ export default function Demo() {
             <Flex direction="col" gap="md">
               <Flex direction="col" gap="xs">
                 <Text size="xs" tone="muted">
-                  label のみ —
+                  label のみ ·
                   マークの隣に可視テキストとして描画される。アニメーションだけで意味を運ばせない。
                 </Text>
                 <Activity label="佐藤さんが入力しています…" />

package/docs/general/button/index.tsx

@@ -1,4 +1,11 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
 import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { Pencil, Plus, Trash2 } from "lucide-react";
@@ -56,6 +63,12 @@ export default function Demo() {
               <Button variant="dashed">追加 Add row</Button>
               <Button variant="ghost">詳細 Details</Button>
               <Button variant="link">もっと見る More</Button>
+              <Button id="bare-count" variant="bare">
+                返信 <Badge icon={null}>12</Badge>
+              </Button>
+              <Button id="ghost-count" variant="ghost">
+                返信 <Badge icon={null}>12</Badge>
+              </Button>
               <Button variant="destructive">削除 Delete</Button>
             </Flex>
           </CardContent>

package/docs/general/typography.tsx

@@ -1,4 +1,5 @@
-import { Button, Heading, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Button, Heading, Text, VisuallyHidden } from "@godxjp/ui/general";
 import {
   Card,
   CardContent,
@@ -35,6 +36,7 @@ const headingTones = [
 ] as const;
 
 export default function Demo() {
+  const { t } = useTranslation();
   return (
     <PageContainer
       title="Typography"
@@ -229,6 +231,17 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("textExamples.preservedText")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Text as="p" whitespace="pre-wrap">
+              {t("textExamples.sampleText")}
+            </Text>
+            <VisuallyHidden>{t("textExamples.preservedText")}</VisuallyHidden>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/layout/app-launcher.tsx

@@ -0,0 +1,151 @@
+import { useState } from "react";
+import { BarChart3, LifeBuoy, MessagesSquare, Receipt, Users } from "lucide-react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  AppLauncher,
+  type AppLauncherLabels,
+  Flex,
+  PageContainer,
+  ResponsiveGrid,
+  Topbar,
+} from "@godxjp/ui/layout";
+
+const apps = [
+  { id: "console", name: "Console", href: "/console", icon: <BarChart3 />, current: true },
+  { id: "billing", name: "Billing", href: "/billing", icon: <Receipt /> },
+  { id: "people", name: "People", href: "/people", icon: <Users /> },
+  { id: "chat", name: "Chat", href: "/chat", icon: <MessagesSquare /> },
+];
+
+const groups = [
+  {
+    label: "More from Acme",
+    apps: [
+      {
+        id: "support",
+        name: "Support",
+        href: "https://support.example.test",
+        icon: <LifeBuoy />,
+        // An external destination renders a plain anchor and bypasses `linkComponent` — a
+        // client-side router link to another origin is a router asked to route somewhere it
+        // does not own.
+        external: true,
+      },
+    ],
+  },
+];
+
+const labels: AppLauncherLabels = {
+  trigger: "Acme のアプリ",
+  title: "アプリを切り替える",
+  empty: "利用できるアプリがありません。",
+  loading: "アプリを読み込み中",
+  retry: "再試行",
+  externalHint: "（新しいタブで開きます）",
+};
+
+/**
+ * AppLauncher — the nine-dot platform app grid.
+ *
+ * WHERE IT SITS AMONG THINGS THAT LOOK LIKE IT:
+ *
+ * - `ServiceLauncherCard` (data-display) is also a launcher tile, but a PAGE-SIZED one — status,
+ *   hostname, plan, an action button, a reason it is locked — for a service-catalogue page where
+ *   choosing is a considered act. This tile is bar-sized: mark plus name, the whole tile one link,
+ *   because changing app is a reflex. A grid of `ServiceLauncherCard`s inside a popover is the
+ *   wrong component, not a smaller version of this one.
+ * - `AppShell navRail` says the SAME platform scope as a docked column. Pick ONE. The launcher for
+ *   a platform with MANY apps where switching is occasional (the Google Workspace shape); the rail
+ *   for a single product where switching workspace is constant enough to deserve permanent screen
+ *   width (the Slack shape). Shipping both puts one scope in two places.
+ */
+export default function Demo() {
+  const [error, setError] = useState<string | undefined>("アプリ一覧を取得できませんでした。");
+
+  return (
+    <PageContainer title="AppLauncher" subtitle="topbar のセル · popover/sheet · グループ · 状態">
+      <ResponsiveGrid columns={{ sm: 1, lg: 2 }}>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>バーの中のセル</CardTitle>
+            <CardDescription>
+              trigger は `TopbarItem` なので、高さはバーそのもの（`align-self: stretch`）。 `Button
+              variant=&quot;ghost&quot;` を置くと、背の高い帯の中に浮いた丸薬になります。 panel は
+              `responsive=&quot;auto&quot;` で、共有トークン
+              `--sheet-responsive-breakpoint-width`（48rem）を境に popover と bottom sheet
+              が入れ替わります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Topbar
+                start={<Text weight="medium">Acme Console</Text>}
+                end={<AppLauncher apps={apps} groups={groups} labels={labels} />}
+              />
+              <Text size="sm" tone="muted">
+                current のアプリだけが `aria-current=&quot;page&quot;` を持ちます。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>列数と非同期状態</CardTitle>
+            <CardDescription>
+              既定は3列（Google と同じ形）。`columns` は1インスタンスの上書きです。 loading と error
+              は grid の代わりに同じ所有 surface へ表示されます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Topbar
+                start={<Text weight="medium">4 列</Text>}
+                end={
+                  <AppLauncher
+                    apps={apps}
+                    groups={groups}
+                    labels={labels}
+                    columns={4}
+                    responsive="popover"
+                  />
+                }
+              />
+              <Topbar
+                start={<Text weight="medium">loading</Text>}
+                end={<AppLauncher apps={apps} labels={labels} loading responsive="popover" />}
+              />
+              <Topbar
+                start={<Text weight="medium">empty</Text>}
+                end={<AppLauncher apps={[]} labels={labels} responsive="sheet" />}
+              />
+              <Topbar
+                start={<Text weight="medium">error</Text>}
+                end={
+                  <AppLauncher
+                    apps={apps}
+                    labels={labels}
+                    error={error}
+                    onRetry={() => setError(undefined)}
+                    responsive="popover"
+                  />
+                }
+              />
+              {!error ? (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setError("再試行に失敗しました。")}
+                >
+                  エラーを復元
+                </Button>
+              ) : null}
+            </Flex>
+          </CardContent>
+        </Card>
+      </ResponsiveGrid>
+    </PageContainer>
+  );
+}

package/docs/layout/app-shell.tsx

@@ -372,3 +372,14 @@ export default function Demo() {
     </AppShell>
   );
 }
+
+/** A dashboard keeps the canonical topbar and main area without a sidebar track. */
+export function WithoutSidebar() {
+  return (
+    <AppShell topbar={<Topbar start={<Text>Workspace</Text>} />}>
+      <PageContainer title="Dashboard">
+        <Text>Project overview</Text>
+      </PageContainer>
+    </AppShell>
+  );
+}