@cakejp/design-system 0.20.0 → 0.21.0

package/dist/types/components/foundations/dialog.d.ts

@@ -5,8 +5,23 @@ declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogP
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+type DialogSize = "sm" | "md" | "lg" | "xl";
+declare function DialogContent({ className, children, showCloseButton, size, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
+    /**
+     * 幅の段。sm 以上の画面で効く（SP は段に関係なく画面端から 16px を残して収まる）。
+     * - "sm": 400px（短い確認・1 項目の入力）
+     * - "md": 512px（標準的なフォーム）
+     * - "lg": 640px（複数項目のフォーム）
+     * - "xl": 800px（表やプレビューを載せる広いダイアログ）
+     *
+     * 未指定は従来の幅（`sm:max-w-lg`）のまま。DS の preset が `--container-lg` を 960px に
+     * 再定義しているため、preset を読み込んだ環境の未指定の実幅は 512px ではなく 960px。
+     * 幅を決めたい画面は size を明示する。
+     * 段に無い幅は `className="sm:max-w-[…]"` で上書きできる（size より className が勝つ）。
+     * `AlertDialogContent` の `size`（"default" | "sm"）とは別物で、値も意味も異なる。
+     */
+    size?: DialogSize;
 }): import("react/jsx-runtime").JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {

package/dist/types/components/foundations/pagination.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type LinkComponent } from "../../lib/link-component";
+import type { LinkComponent } from "../../lib/link-component";
 import { type Button } from "../../components/foundations/button";
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/foundations/responsive-dialog.d.ts

@@ -39,11 +39,12 @@ interface ResponsiveDialogProps {
  * - 確認ダイアログ、フォーム入力、フィルター選択等に使用
  * - Dialog / Drawer を個別に使い分ける必要がなくなる
  * - 768px未満 → Drawer (bottom)、768px以上 → Dialog (center)
+ * - PC の Dialog の幅は `ResponsiveDialogContent` の `size`（sm 400 / md 512 / lg 640 / xl 800。未指定は従来の幅）で選ぶ。SP の Drawer は全幅のボトムシートなので size は無視される
  * - 二重ネスト禁止（CLAUDE.md ダイアログ規約参照）
  */
 declare function ResponsiveDialog({ children, ...props }: ResponsiveDialogProps): import("react/jsx-runtime").JSX.Element;
 declare function ResponsiveDialogTrigger({ className, ...props }: React.ComponentProps<typeof DialogTrigger>): import("react/jsx-runtime").JSX.Element;
-declare function ResponsiveDialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogContent>): import("react/jsx-runtime").JSX.Element;
+declare function ResponsiveDialogContent({ className, children, size, ...props }: React.ComponentProps<typeof DialogContent>): import("react/jsx-runtime").JSX.Element;
 declare function ResponsiveDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function ResponsiveDialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function ResponsiveDialogTitle({ className, ...props }: React.ComponentProps<typeof DialogTitle>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/foundations/sheet.d.ts

@@ -3,8 +3,19 @@ import { Dialog as SheetPrimitive } from "radix-ui";
 declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-declare function SheetContent({ className, children, side, showCloseButton, autoFocus, onOpenAutoFocus, onCloseAutoFocus, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+type SheetSize = "sm" | "md" | "lg";
+declare function SheetContent({ className, children, side, size, showCloseButton, autoFocus, onOpenAutoFocus, onCloseAutoFocus, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
     side?: "top" | "right" | "bottom" | "left";
+    /**
+     * 幅の段。`side="left"` / `"right"` のときだけ効く（top / bottom は全幅なので無視）。
+     * sm 以上の画面で効き、SP は段に関係なく従来どおり画面の 3/4 幅。
+     * - "sm"（既定）: 384px（従来の幅）
+     * - "md": 576px（詳細パネル）
+     * - "lg": 768px（表やプレビューを載せる広いパネル）
+     *
+     * 段に無い幅は `className="sm:max-w-[…]"` で上書きできる（size より className が勝つ）。
+     */
+    size?: SheetSize;
     showCloseButton?: boolean;
     /**
      * 開閉時のフォーカス自動移動。既定 true（Radix 既定＝開いたら中へ入り、閉じたらトリガーへ戻る）。

package/dist/types/components/foundations/skeleton.d.ts

@@ -1,2 +1,8 @@
+/**
+ * Skeleton — 読み込み中の場所取り。
+ *
+ * 動きを減らす設定（prefers-reduced-motion: reduce）では明滅（animate-pulse）を止め、面だけを残す。
+ * 読み込み中であることは、包んでいる領域の aria-busy や Spinner の文言で伝える。
+ */
 declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export { Skeleton };

package/dist/types/components/foundations/slider.d.ts

@@ -12,5 +12,19 @@ export interface SliderProps extends React.ComponentProps<typeof SliderPrimitive
      */
     thumbLabels?: string[];
 }
-declare function Slider({ className, defaultValue, value, min, max, thumbLabels, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Slider — 数値スライダー（Radix UI Slider ラッパー。範囲指定の 2 つまみにも対応）。
+ *
+ * ### キーボード（範囲スライダー）
+ * Home / End は WAI-ARIA APG の Multi-Thumb Slider に合わせ、**フォーカス中のつまみ**を
+ * そのつまみが動ける範囲の端（隣のつまみ ± `minStepsBetweenThumbs` × `step`、
+ * 無ければ `min` / `max`）へ動かす。Radix の既定は先頭 / 末尾のつまみを動かしてしまうため、
+ * 各つまみの keydown で横取りする（preventDefault 済みの keydown を Radix は無視する）。
+ * 値の更新は onValueChange / onValueCommit に流す。つまみが 1 つのときは Radix の既定のまま。
+ *
+ * ### つまみの数
+ * `value` / `defaultValue` の配列の長さだけ描く。どちらも無いときは Radix の既定値 `[min]`
+ * に合わせて 1 つ（以前は 2 つ描いて、2 つ目が値を持たない壊れた状態になっていた）。
+ */
+declare function Slider({ className, defaultValue, value, min, max, step, minStepsBetweenThumbs, onValueChange, onValueCommit, disabled, thumbLabels, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
 export { Slider };

package/dist/types/components/foundations/tabs.d.ts

@@ -1,6 +1,13 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
+/**
+ * Tabs — 同一コンテキスト内のビュー切り替え。
+ *
+ * `orientation="vertical"` で縦向き: タブの列を左（幅は Tabs の半分まで）、パネルを右に置く。
+ * underbar は右端の線、segment は地の色で選択中を示す。設定画面など PC 幅でタブが多い・
+ * ラベルが長いときに使う。幅 390px 前後では横向き（既定）を選ぶ。
+ */
 declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare const tabsListVariants: (props?: {
     variant?: "underbar" | "segment";

package/dist/types/components/primitives/admin-side-nav.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 export interface AdminNavSubItem {
     /** サブメニューのラベル */
     label: string;
@@ -36,10 +37,22 @@ export interface AdminSideNavProps {
     drawerTitle?: React.ReactNode;
     /** モバイルドロワーの開閉状態（制御コンポーネント） */
     open?: boolean;
-    /** モバイルドロワーの開閉要求ハンドラ */
+    /**
+     * モバイルドロワーの開閉要求ハンドラ。背景・閉じるボタンに加え、ドロワー内のリンク
+     * （項目・サブ項目）を押したときも `onOpenChange(false)` が呼ばれる
+     * （`linkComponent` でクライアント遷移するとページが再読み込みされず、開いたままになるため）。
+     */
     onOpenChange?: (open: boolean) => void;
     /** nav の aria-label */
     ariaLabel?: string;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * PC レールの項目・サブメニューのポップアップ・SP ドロワーの項目とサブ項目のすべてに効く。
+     * ポップアップ内のリンクは Radix の `asChild` 越しに描かれるため、`ref` と任意の属性を
+     * `<a>` まで転送する実装を渡すこと（next/link は転送する）。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * 管理画面向けサイドナビゲーション
@@ -83,6 +96,13 @@ export interface AdminSideNavProps {
  * | open | boolean | false | SP ドロワーの開閉状態 |
  * | onOpenChange | (open) => void | — | 開閉要求ハンドラ |
  * | ariaLabel | string | "管理メニュー" | nav の aria-label |
+ * | linkComponent | LinkComponent | "a" | リンクの描画に使うコンポーネント（next/link 等） |
+ *
+ * ### linkComponent（Next.js App Router）
+ *
+ * この部品は Client Component のため、Server Component から `linkComponent` を渡すと
+ * `Functions cannot be passed directly to Client Components` で落ちる。呼び出し側のファイルを
+ * `"use client"` にする（エラーメッセージは `"use server"` を示唆するが正解は逆）。
  */
-declare function AdminSideNav({ items, activeKey, drawerTitle, open, onOpenChange, ariaLabel, }: AdminSideNavProps): import("react/jsx-runtime").JSX.Element;
+declare function AdminSideNav({ items, activeKey, drawerTitle, open, onOpenChange, ariaLabel, linkComponent, }: AdminSideNavProps): import("react/jsx-runtime").JSX.Element;
 export { AdminSideNav };

package/dist/types/components/primitives/banner-carousel.d.ts

@@ -1,3 +1,4 @@
+import type { LinkComponent } from "../../lib/link-component";
 import { type SectionHeaderSize } from "../../components/primitives/section-header";
 export interface BannerItem {
     /** バナー画像URL */
@@ -30,6 +31,13 @@ export interface BannerCarouselProps {
     bannerSize?: "sm" | "md" | "lg";
     /** 追加クラス */
     className?: string;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * 「もっと見る」（`moreHref`）と各バナー（`items[].href`）のリンクに効く。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * この部品は Server Component のまま使える。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * バナーカルーセル（Organism）
@@ -50,5 +58,5 @@ export interface BannerCarouselProps {
  * - `items` 配列に `href` を指定するとリンクカードになる
  * - SectionHeader は内部で合成される（子として渡さない）
  */
-declare function BannerCarousel({ title, subtitle, moreHref, moreLabel, headerSize, items, aspectRatio, bannerSize, className, }: BannerCarouselProps): import("react/jsx-runtime").JSX.Element;
+declare function BannerCarousel({ title, subtitle, moreHref, moreLabel, headerSize, items, aspectRatio, bannerSize, className, linkComponent, }: BannerCarouselProps): import("react/jsx-runtime").JSX.Element;
 export { BannerCarousel };

package/dist/types/components/primitives/bottom-tab-bar.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 export interface BottomTabBarItem {
     /** ナビゲーションアイテムのラベル */
     label: string;
@@ -8,7 +9,7 @@ export interface BottomTabBarItem {
     activeIcon?: React.ReactNode;
     /** リンク先URL */
     href?: string;
-    /** クリックハンドラ */
+    /** クリックハンドラ（`href` を持つ項目でもクリック時に呼ばれる。遷移は止めない） */
     onClick?: () => void;
     /** バッジ数（カートアイテム数など） */
     badgeCount?: number;
@@ -20,6 +21,13 @@ export interface BottomTabBarProps extends React.HTMLAttributes<HTMLElement> {
     items: BottomTabBarItem[];
     /** バナースロット（ナビゲーション上部に表示するキャンペーンバナーなど） */
     banner?: React.ReactNode;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * `href` を持つ項目だけが対象で、`href` の無い項目は従来どおり `<button>`。
+     * 項目の `onClick` は `href` の有無によらず呼ばれる（linkComponent 経由でも同じ）。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * ボトムナビゲーションコンポーネント
@@ -34,6 +42,9 @@ export interface BottomTabBarProps extends React.HTMLAttributes<HTMLElement> {
  * - 高さ 52px、左右 px-4
  *
  * 使用時は `body` に `pb-16` を追加してコンテンツ重なりを防止。
+ *
+ * この部品は Server Component のまま使える。`linkComponent` を渡すためだけに、
+ * Next.js App Router の呼び出し側を `"use client"` にする必要はない。
  */
-declare function BottomTabBar({ className, items, banner, ...props }: BottomTabBarProps): import("react/jsx-runtime").JSX.Element;
+declare function BottomTabBar({ className, items, banner, linkComponent, ...props }: BottomTabBarProps): import("react/jsx-runtime").JSX.Element;
 export { BottomTabBar };

package/dist/types/components/primitives/category-scroll.d.ts

@@ -1,3 +1,4 @@
+import type { LinkComponent } from "../../lib/link-component";
 import { type SectionHeaderSize } from "../../components/primitives/section-header";
 export interface CategoryItem {
     /** カテゴリ名 */
@@ -38,6 +39,13 @@ export interface CategoryScrollProps {
     pcGridCols?: number;
     /** 追加クラス */
     className?: string;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * 「もっと見る」（`moreHref`）と各カテゴリ（`items[].href`）のリンクに効く。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * この部品は Server Component のまま使える。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * カテゴリスクロールコンポーネント
@@ -59,6 +67,7 @@ export interface CategoryScrollProps {
  * | headerSize | SectionHeaderSize | "lg" | SectionHeader のサイズ |
  * | thumbnailSize | "sm" \| "md" \| "lg" | "md" | サムネイルサイズ |
  * | thumbnailShape | "square" \| "circle" | "square" | サムネイル角丸 |
+ * | linkComponent | LinkComponent | "a" | リンクの描画に使うコンポーネント（next/link 等） |
  *
  * ### AI 向け使用ルール
  * - Atomic Design Level 3（organism）: SectionHeader を内包する
@@ -66,5 +75,5 @@ export interface CategoryScrollProps {
  * - thumbnailShape="circle" + thumbnailSize="sm" でクイックアクセスアイコン風に
  * - 横スクロールは scrollbar-hide でスクロールバー非表示
  */
-declare function CategoryScroll({ title, moreHref, headerSize, items, thumbnailSize, thumbnailShape, layout, gridRows, pcGridCols, className, }: CategoryScrollProps): import("react/jsx-runtime").JSX.Element;
+declare function CategoryScroll({ title, moreHref, headerSize, items, thumbnailSize, thumbnailShape, layout, gridRows, pcGridCols, className, linkComponent, }: CategoryScrollProps): import("react/jsx-runtime").JSX.Element;
 export { CategoryScroll };

package/dist/types/components/primitives/category-shortcuts.d.ts

@@ -1,3 +1,4 @@
+import type { LinkComponent } from "../../lib/link-component";
 export interface CategoryShortcutsItem {
     /** カテゴリ名 */
     name: string;
@@ -9,7 +10,7 @@ export interface CategoryShortcutsItem {
     imageAlt?: string;
     /** 選択中フラグ */
     isSelected?: boolean;
-    /** クリックハンドラ */
+    /** クリックハンドラ（`href` を持つ項目でもクリック時に呼ばれる。遷移は止めない） */
     onClick?: () => void;
 }
 export interface CategoryShortcutsProps {
@@ -17,6 +18,14 @@ export interface CategoryShortcutsProps {
     items: CategoryShortcutsItem[];
     /** 追加クラス */
     className?: string;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。`href` を持つ項目だけが対象で、
+     * `href` の無い項目は従来どおり `<button>`。
+     * 項目の `onClick` は `href` の有無によらず呼ばれる（linkComponent 経由でも同じ）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * この部品は Server Component のまま使える。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * 小アイコンカテゴリストリップ
@@ -40,5 +49,5 @@ export interface CategoryShortcutsProps {
  * - `isSelected` で現在のカテゴリをハイライト
  * - `onClick` でフィルター切り替えイベントを処理
  */
-declare function CategoryShortcuts({ items, className }: CategoryShortcutsProps): import("react/jsx-runtime").JSX.Element;
+declare function CategoryShortcuts({ items, className, linkComponent }: CategoryShortcutsProps): import("react/jsx-runtime").JSX.Element;
 export { CategoryShortcuts };

package/dist/types/components/primitives/chip.d.ts

@@ -1,7 +1,11 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 import { chipVariants, type ChipVariantProps } from "../../components/foundations/chip-variants";
 export interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ChipVariantProps {
-    /** リンクとして使う場合のURL */
+    /**
+     * リンクとして使う場合のURL。`<a>` で描画し、`onClick` などのハンドラや `aria-*` / `data-*` も `<a>` に渡る
+     * （遷移は止めない）。`type` / `disabled` / `form*` / `name` / `value` など button 専用の属性は渡さない。
+     */
     href?: string;
     /** 選択状態 */
     selected?: boolean;
@@ -11,8 +15,22 @@ export interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     removable?: boolean;
     /** 削除時のコールバック */
     onRemove?: () => void;
+    /**
+     * 削除ボタンの読み上げ名（日本語）。既定「削除」。
+     * 削除可能な Chip が複数並ぶ場面では「{ラベル}を削除」のように対象が分かる名前を渡す。
+     */
+    removeLabel?: string;
     /** カウントバッジ（例: 件数表示） */
     count?: number;
+    /**
+     * `href` 指定時のリンクの描画に使うコンポーネント（既定 `a`）。`removable` のときは本体のリンクに効く。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * `removable` を指定するときは、削除ボタンに `onClick` を付けるため React Server Components では
+     * Server Component から描けない（`Event handlers cannot be passed to Client Component props` で落ちる）。
+     * その場合、Next.js App Router では呼び出し側のファイルを `"use client"` にする。`removable` で
+     * なければ Server Component のまま使える。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * チップコンポーネント
@@ -35,7 +53,8 @@ export interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
  * - カウント付き: `<Chip selected count={156}>すべて</Chip>`
  * - ステータスフィルター: Chip + count でステータス別件数タブを構成
  *
- * removable 時は本体（`data-slot="chip-trigger"`）と削除ボタンが兄弟の2タブストップ構造（ルートは `span[data-slot="chip"]`）。
+ * removable 時は本体（`data-slot="chip-trigger"`）と削除ボタン（`data-slot="chip-remove"`）が兄弟の2タブストップ構造（ルートは `span[data-slot="chip"]`）。
+ * 削除ボタンの読み上げ名は `removeLabel`（既定「削除」）。
  */
-declare function Chip({ className, variant, size, shape, href, selected, soldOut, removable, onRemove, count, children, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
+declare function Chip({ className, variant, size, shape, href, selected, soldOut, removable, onRemove, removeLabel, count, linkComponent, children, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
 export { Chip, chipVariants };

package/dist/types/components/primitives/combobox.d.ts

@@ -15,9 +15,14 @@ export interface ComboboxProps {
     className?: string;
     /** trigger の id。FormField / FieldLabel の htmlFor と揃える */
     id?: string;
-    /** 検証エラー時に true。FieldError と併せて使う */
+    /**
+     * 検証エラー時に true。トリガーに赤 1px の内側リング（Border-Caution）を出す。
+     * FormField 配下では error があると自動で true になる（明示指定が優先）
+     */
     "aria-invalid"?: boolean;
-    /** FieldError / FieldDescription の id */
+    /**
+     * 説明・エラー文の id。FormField 配下では FormField の説明・エラーの id と連結される
+     */
     "aria-describedby"?: string;
     /**
      * トリガーのアクセシブルネーム（日本語）。

package/dist/types/components/primitives/container.d.ts

@@ -9,6 +9,9 @@ import { type VariantProps } from "class-variance-authority";
  * - **左右 padding は Container だけが持つ。** これを使うコンポーネント／親（Section 等）は
  *   自身で左右 padding を持たない。両方が持つと「左右余白の二重がけ」になる（実バグ）。
  * - 縦余白・背景色は持たない（それは Section の責務）。
+ * - 自分の gutter 幅を CSS 変数 `--Container-Gutter` で子孫に渡す。横スクロールの行
+ *   （ScrollRow / ContentCarousel・ImageCarousel の peek）がこれを読み、Container の外へはみ出しつつ
+ *   1 枚目の左端を見出しとそろえる。値は下の gutter と必ず同じにする。
  */
 declare const containerVariants: (props?: {
     size?: "page" | "narrow" | "wide" | "fluid";

package/dist/types/components/primitives/content-card.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type LinkComponent } from "../../lib/link-component";
+import type { LinkComponent } from "../../lib/link-component";
 import { type TagProps } from "../../components/primitives/tag";
 export type ContentCardOrientation = "vertical" | "horizontal" | "list";
 export type ContentCardAspect = "16/10" | "16/9" | "1/1";

package/dist/types/components/primitives/content-carousel.d.ts

@@ -13,12 +13,20 @@ export interface ContentCarouselProps extends Omit<React.HTMLAttributes<HTMLDivE
     showDots?: boolean;
     /** 矢印ナビゲーション表示 */
     showArrows?: boolean;
-    /** 自動再生（ミリ秒、0で無効） */
+    /**
+     * 自動再生（ミリ秒、0で無効）。
+     * 動きを減らす設定（prefers-reduced-motion: reduce）では自動再生しない（停止ボタンは持たない）。
+     */
     autoPlay?: number;
     /**
-     * SP: 隣スライドをのぞかせる（peek）表示。
-     * true にすると各スライドが `calc(100% - 48px)` 幅になり、
-     * 右端に次スライドが見える。PC (@[960px]:) は常に全幅。
+     * SP: 隣スライドをのぞかせる（peek）表示。PC (@[960px]:) では peek しない。
+     *
+     * - 左右に端の余白を持ち、スクロール後・最後のスライドでもその余白を保つ（scroll-padding）
+     * - `Container` の直下に置くと、Container の gutter 分だけ外へはみ出して Container の外縁（SP では画面端）まで
+     *   スクロールさせ、1 枚目の左端を見出し（Container の内側）にそろえる。端の余白は Container の gutter と同じ
+     * - Card など余白を持つ親の中には peek で置かない（gutter の変数は Container の子孫すべてに届くため、gutter 分はみ出す）
+     * - `Container` の外（全幅）に置くと、端の余白は 16px
+     * - 右端に次スライドが 48px（端の余白 16px のとき）見える
      */
     peek?: boolean;
     /**

package/dist/types/components/primitives/date-picker.d.ts

@@ -23,15 +23,22 @@ export interface DatePickerProps {
     clearable?: boolean;
     /** クリアボタンの aria-label。既定「日付をクリア」 */
     clearLabel?: string;
-    /** trigger の id（FormField の htmlFor と接続） */
+    /** trigger の id。FormField 配下では未指定でも FormField の htmlFor と同じ id になる */
     id?: string;
+    /**
+     * 検証エラー時に true。trigger の枠が Border-Caution になる。
+     * FormField 配下では error があると自動で true になる（明示指定が優先）
+     */
+    "aria-invalid"?: boolean;
+    /** 説明・エラー文の id。FormField 配下では FormField の説明・エラーの id と連結される */
+    "aria-describedby"?: string;
     /**
      * 追加クラス。**外側のラッパー要素**に付与する（クリアボタンを trigger の
      * 兄弟として絶対配置するため、幅・レイアウト指定はラッパーが受け取る）。
      */
     className?: string;
 }
-declare function DatePicker({ value, onChange, placeholder, min, max, disabledDates, disabled, clearable, clearLabel, id, className, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function DatePicker({ value, onChange, placeholder, min, max, disabledDates, disabled, clearable, clearLabel, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
 export interface DateTimePickerProps extends DatePickerProps {
     /** 分の刻み（分 Select の選択肢間隔）。既定 5 分 */
     minuteStep?: number;
@@ -40,5 +47,5 @@ export interface DateTimePickerProps extends DatePickerProps {
     /** 分 Select の aria-label。既定「分」 */
     minuteLabel?: string;
 }
-declare function DateTimePicker({ value, onChange, minuteStep, hourLabel, minuteLabel, clearLabel, disabled, className, ...dateProps }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function DateTimePicker({ value, onChange, minuteStep, hourLabel, minuteLabel, clearLabel, disabled, className, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, ...dateProps }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;
 export { DatePicker, DateTimePicker };

package/dist/types/components/primitives/footer.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type LinkComponent } from "../../lib/link-component";
+import type { LinkComponent } from "../../lib/link-component";
 export interface FooterLink {
     label: string;
     href: string;

package/dist/types/components/primitives/header.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 /**
  * ヘッダー内側の最大幅。`Container` の同名 size と同じ値を使う（値の正本は Container）。
  * 本文を `Container size="page"` で中央寄せしているサイトで、ロゴ・ナビの左端を本文に揃える。
@@ -31,7 +32,7 @@ export interface HeaderNavItem {
     label: string;
     /** リンク先 */
     href?: string;
-    /** クリックハンドラ */
+    /** クリックハンドラ（`href` を持つ項目でもクリック時に呼ばれる。遷移は止めない） */
     onClick?: () => void;
     /** アクティブ状態 */
     isActive?: boolean;
@@ -110,6 +111,17 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
      * 未指定なら従来どおり全幅（DOM も従来どおりで内側ラッパーを足さない）。
      */
     containerSize?: HeaderContainerSize;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * `navItems` の `href`（「その他」メニュー内のリンクを含む）と `actions` の `href` に効く。
+     * `logo` は ReactNode をそのまま描く（Header は `<a>` を足さない）ため対象外で、
+     * ロゴをリンクにするなら `logo` に `<Link>` を含めて渡す。
+     * この部品は Client Component のため、Server Component から渡すと
+     * `Functions cannot be passed directly to Client Components` で落ちる。
+     * Next.js App Router では呼び出し側のファイルを `"use client"` にする。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * ページヘッダー
@@ -117,5 +129,5 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
  * アプリ全体で使われるヘッダーの3パターンを1コンポーネントで提供。
  * ロゴ＋アクション、戻るボタン＋タイトル、戻るボタン＋検索の3バリエーション。
  */
-declare function Header({ className, variant, logo, title, onBack, backLabel, actions, navItems, navBreakpoint, navOverflowLabel, searchSlot, searchBreakpoint, rightSlot, centerSlot, bottomSlot, disableSticky, containerSize, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function Header({ className, variant, logo, title, onBack, backLabel, actions, navItems, navBreakpoint, navOverflowLabel, searchSlot, searchBreakpoint, rightSlot, centerSlot, bottomSlot, disableSticky, containerSize, linkComponent, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
 export { Header };

package/dist/types/components/primitives/image-carousel.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 export interface ImageCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     /** スライド画像リスト */
     images: Array<{
@@ -12,12 +13,21 @@ export interface ImageCarouselProps extends React.HTMLAttributes<HTMLDivElement>
     showDots?: boolean;
     /** 矢印ナビゲーション表示 */
     showArrows?: boolean;
-    /** 自動再生（ミリ秒、0で無効） */
+    /**
+     * 自動再生（ミリ秒、0で無効）。
+     * 動きを減らす設定（prefers-reduced-motion: reduce）では自動再生しない（停止ボタンは持たない）。
+     */
     autoPlay?: number;
     /**
-     * SP: 隣スライドをのぞかせる（peek）表示。
-     * true にすると各スライドが `calc(100% - 48px)` 幅になり、
-     * 右端に次スライドが見える。PC (@md:) は常に全幅。
+     * SP: 隣スライドをのぞかせる（peek）表示。PC (@[960px]:) では peek しない。
+     *
+     * - 左右に端の余白を持ち、スクロール後・最後のスライドでもその余白を保つ（scroll-padding）
+     * - `Container` の直下に置くと、Container の gutter 分だけ外へはみ出して Container の外縁（SP では画面端）まで
+     *   スクロールさせ、1 枚目の左端を見出し（Container の内側）にそろえる。端の余白は Container の gutter と同じ
+     * - Card など余白を持つ親の中には peek で置かない（gutter の変数は Container の子孫すべてに届くため、gutter 分はみ出す）
+     * - `Container` の外（全幅）に置くと、端の余白は 16px
+     * - 右端に次スライドが 48px（端の余白 16px のとき）見える
+     * - `centeredSlides` と併用したときは、タブレット（@[768px]:）で centeredSlides の表示に切り替わる
      */
     peek?: boolean;
     /**
@@ -33,6 +43,14 @@ export interface ImageCarouselProps extends React.HTMLAttributes<HTMLDivElement>
      * SP は全幅1枚のまま、PC（960px+）は pcSlidesPerView に従う。
      */
     centeredSlides?: boolean;
+    /**
+     * `images[].href` のリンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * この部品は Client Component のため、Server Component から渡すと
+     * `Functions cannot be passed directly to Client Components` で落ちる。
+     * Next.js App Router では呼び出し側のファイルを `"use client"` にする。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * 画像カルーセル — Figma Carousel 準拠
@@ -48,5 +66,5 @@ export interface ImageCarouselProps extends React.HTMLAttributes<HTMLDivElement>
  * - OGP比率: `<ImageCarousel aspectRatio="ogp" />`
  * - 自動再生: `<ImageCarousel autoPlay={5000} />`
  */
-declare function ImageCarousel({ images, aspectRatio, showDots, showArrows, autoPlay, peek, pcSlidesPerView, centeredSlides, className, ...props }: ImageCarouselProps): import("react/jsx-runtime").JSX.Element;
+declare function ImageCarousel({ images, aspectRatio, showDots, showArrows, autoPlay, peek, pcSlidesPerView, centeredSlides, linkComponent, className, ...props }: ImageCarouselProps): import("react/jsx-runtime").JSX.Element;
 export { ImageCarousel };

package/dist/types/components/primitives/list-item.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 export interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
     /** メインタイトル */
     title: string;
@@ -41,6 +42,14 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
     showBadgeDot?: boolean;
     /** リンク先（指定すると `<a>` でラップ） */
     href?: string;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。`href` 指定時だけ使われる。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * この部品は Client Component のため、Server Component から渡すと
+     * `Functions cannot be passed directly to Client Components` で落ちる。
+     * Next.js App Router では呼び出し側のファイルを `"use client"` にする。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * リストアイテム — Figma List/Item 準拠
@@ -59,5 +68,5 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
  * `href` か `onClick` を渡すとインタラクティブ行になり、hover 背景と focus リングが付く。
  * 表示専用（href/onClick なし）の行は状態スタイルが付かない。
  */
-declare function ListItem({ title, caption, rightType, rightText, badgeCount, toggleChecked, onToggleChange, leftIcon, leftImageUrl, size, selected, showBorder, showBadgeDot, href, className, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItem({ title, caption, rightType, rightText, badgeCount, toggleChecked, onToggleChange, leftIcon, leftImageUrl, size, selected, showBorder, showBadgeDot, href, linkComponent, className, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export { ListItem };

package/dist/types/components/primitives/menu-drawer.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type LinkComponent } from "../../lib/link-component";
+import type { LinkComponent } from "../../lib/link-component";
 export interface MenuSection {
     /** セクションタイトル */
     title?: string;

package/dist/types/components/primitives/multi-select.d.ts

@@ -15,9 +15,14 @@ export interface MultiSelectProps {
     className?: string;
     /** trigger の id。FormField / FieldLabel の htmlFor と揃える */
     id?: string;
-    /** 検証エラー時に true。FieldError と併せて使う */
+    /**
+     * 検証エラー時に true。トリガーに赤 1px の内側リング（Border-Caution）を出す。
+     * FormField 配下では error があると自動で true になる（明示指定が優先）
+     */
     "aria-invalid"?: boolean;
-    /** FieldError / FieldDescription の id */
+    /**
+     * 説明・エラー文の id。FormField 配下では FormField の説明・エラーの id と連結される
+     */
     "aria-describedby"?: string;
     /**
      * トリガーのアクセシブルネーム（日本語）。