@cakejp/design-system 0.20.1 → 0.21.0

package/dist/lib/field-labelling.js

@@ -1,30 +1,40 @@
 "use client";
-import * as n from "react";
-const t = n.createContext(null);
-function a() {
-  return n.useContext(t);
+import * as a from "react";
+const l = a.createContext(null);
+function o() {
+  return a.useContext(l);
 }
-function d(r, e) {
-  if (!e) return {};
-  const i = [e.descriptionId, e.errorId].filter(Boolean).join(" ");
-  return {
+function d(...r) {
+  const e = r.flatMap((i) => i ? i.split(/\s+/) : []).filter(Boolean);
+  return e.length > 0 ? Array.from(new Set(e)).join(" ") : void 0;
+}
+function n(r, e) {
+  const i = r ?? (e?.errorId ? !0 : void 0);
+  return i === void 0 ? {} : { "aria-invalid": i };
+}
+function t(r, e) {
+  return d(e.descriptionId, e.errorId, r);
+}
+function c(r, e, i = !1) {
+  return e ? {
     id: r.id ?? e.controlId,
     // aria-label が明示されていれば labelledby は当てない（二重命名を避ける）
-    "aria-labelledby": r["aria-labelledby"] ?? (r["aria-label"] ? void 0 : e.labelId),
-    "aria-describedby": r["aria-describedby"] ?? (i || void 0)
-  };
+    "aria-labelledby": r["aria-labelledby"] ?? (r["aria-label"] || i ? void 0 : e.labelId),
+    "aria-describedby": t(r["aria-describedby"], e),
+    ...n(r["aria-invalid"], e)
+  } : {};
 }
-function o(r, e) {
-  if (!e) return {};
-  const i = [e.descriptionId, e.errorId].filter(Boolean).join(" ");
-  return {
+function u(r, e) {
+  return e ? {
     id: r.id ?? e.controlId,
-    "aria-describedby": r["aria-describedby"] ?? (i || void 0)
-  };
+    "aria-describedby": t(r["aria-describedby"], e),
+    ...n(r["aria-invalid"], e)
+  } : {};
 }
 export {
-  t as FieldLabellingContext,
-  d as resolveFieldAria,
-  o as resolveNativeFieldAria,
-  a as useFieldLabelling
+  l as FieldLabellingContext,
+  d as mergeIdRefs,
+  c as resolveFieldAria,
+  u as resolveNativeFieldAria,
+  o as useFieldLabelling
 };

package/dist/lib/focus-ring.js

@@ -1,6 +1,24 @@
-const i = "focus-visible:border-[var(--Focus-High-Emphasis)] focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50", s = "focus-within:border-[var(--Focus-High-Emphasis)] focus-within:ring-[3px] focus-within:ring-[var(--Focus-High-Emphasis)]/50", o = "focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--Focus-High-Emphasis)]/50";
+const o = "forced-colors:focus-visible:outline-solid forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-offset-2 forced-colors:focus-visible:outline-[Highlight]", i = "forced-colors:focus-within:outline-solid forced-colors:focus-within:outline-2 forced-colors:focus-within:outline-offset-2 forced-colors:focus-within:outline-[Highlight]", s = "forced-colors:focus-visible:outline-solid forced-colors:focus-visible:outline-2 forced-colors:focus-visible:-outline-offset-2 forced-colors:focus-visible:outline-[Highlight]", c = "forced-colors:focus:bg-[Highlight]! forced-colors:focus:text-[HighlightText]! forced-colors:focus:[&_*]:text-[HighlightText]!", r = "forced-colors:data-[selected=true]:bg-[Highlight]! forced-colors:data-[selected=true]:text-[HighlightText]! forced-colors:data-[selected=true]:[&_*]:text-[HighlightText]!", e = [
+  "focus-visible:border-[var(--Focus-High-Emphasis)] focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--Focus-High-Emphasis)_50%,transparent))]",
+  o
+].join(" "), l = [
+  "focus-within:border-[var(--Focus-High-Emphasis)] focus-within:ring-[3px] focus-within:ring-[var(--Focus-High-Emphasis)]/50",
+  i
+].join(" "), t = [
+  "focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--Focus-High-Emphasis)_50%,transparent))]",
+  o
+].join(" "), n = [
+  "focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--Focus-High-Emphasis)_50%,transparent))]",
+  s
+].join(" ");
 export {
-  i as FOCUS_RING,
-  o as FOCUS_RING_INSET,
-  s as FOCUS_RING_WITHIN
+  e as FOCUS_RING,
+  n as FOCUS_RING_INSET,
+  t as FOCUS_RING_ONLY,
+  l as FOCUS_RING_WITHIN,
+  r as FORCED_COLORS_COMMAND_ITEM,
+  o as FORCED_COLORS_FOCUS,
+  s as FORCED_COLORS_FOCUS_INSET,
+  i as FORCED_COLORS_FOCUS_WITHIN,
+  c as FORCED_COLORS_MENU_ITEM
 };

package/dist/lib/high-contrast.js

@@ -0,0 +1,4 @@
+const o = "outline-solid outline-1 -outline-offset-1 outline-[color:var(--Border-Control,transparent)] aria-invalid:outline-transparent";
+export {
+  o as HIGH_CONTRAST_OUTLINE
+};

package/dist/lib/image-index.js

@@ -0,0 +1,8 @@
+function f(e, n, t) {
+  if (n.length === 0 || e.length === 0) return 0;
+  const r = e[t], c = r ? n.indexOf(r) : -1;
+  return c >= 0 ? c : Math.min(t, n.length - 1);
+}
+export {
+  f as reconcileImageIndex
+};

package/dist/lib/use-prefers-reduced-motion.js

@@ -0,0 +1,21 @@
+"use client";
+import * as r from "react";
+const t = "(prefers-reduced-motion: reduce)";
+function o(e) {
+  if (typeof window > "u" || typeof window.matchMedia != "function") return () => {
+  };
+  const n = window.matchMedia(t);
+  return n.addEventListener("change", e), () => n.removeEventListener("change", e);
+}
+function i() {
+  return typeof window.matchMedia == "function" && window.matchMedia(t).matches;
+}
+function c() {
+  return !1;
+}
+function u() {
+  return r.useSyncExternalStore(o, i, c);
+}
+export {
+  u as usePrefersReducedMotion
+};

package/dist/types/components/ec/admin-shell.d.ts

@@ -27,6 +27,7 @@
  * - CSS: admin_shops/layout/nav_layout.css
  */
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 import { type AdminNavItem } from "../../components/primitives/admin-side-nav";
 export declare function MissingComponent({ name, children, className, }: {
     name: string;
@@ -79,5 +80,14 @@ export interface AdminShellProps {
      * `sr-only` なので視覚には影響しない。`false` で無効化。
      */
     skipLink?: false;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * サイドナビ（`AdminSideNav`）の項目・サブメニューと、パンくずのリンクに効く。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * この部品は Client Component のため、Server Component から渡すと
+     * `Functions cannot be passed directly to Client Components` で落ちる。
+     * Next.js App Router では呼び出し側のファイルを `"use client"` にする。
+     */
+    linkComponent?: LinkComponent;
 }
-export declare function AdminShell({ children, activeNav, title, breadcrumbs, shopName, brand, sidebarHeader, navItems, headerActions, onBack, backLabel, mainId, skipLink, }: AdminShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminShell({ children, activeNav, title, breadcrumbs, shopName, brand, sidebarHeader, navItems, headerActions, onBack, backLabel, mainId, skipLink, linkComponent, }: AdminShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ec/anniversary-card.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 export interface AnniversaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 対象者の名前（例: "山田 花子"） */
     name: string;
@@ -16,6 +17,12 @@ export interface AnniversaryCardProps extends React.HTMLAttributes<HTMLDivElemen
     editHref?: string;
     /** 編集ボタンのクリックハンドラ（editHref が無い場合に使用） */
     onEdit?: () => void;
+    /**
+     * 編集リンク（`editHref`）の描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * この部品は Server Component のまま使える。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * 記念日カード / AnniversaryCard
@@ -39,6 +46,7 @@ export interface AnniversaryCardProps extends React.HTMLAttributes<HTMLDivElemen
  * | memo | string | — | メモ（任意） |
  * | editHref | string | — | 編集リンクの href |
  * | onEdit | () => void | — | 編集ボタンのクリックハンドラ |
+ * | linkComponent | LinkComponent | "a" | 編集リンクの描画に使うコンポーネント（next/link 等） |
  *
  * ### AI 向け使用ルール
  * - マイページの記念日一覧タブ内で使用する
@@ -46,5 +54,5 @@ export interface AnniversaryCardProps extends React.HTMLAttributes<HTMLDivElemen
  * - `editHref` を渡すと編集ボタンが `<a>` リンクになる
  * - `onEdit` を渡すと編集ボタンが `<button>` になる
  */
-declare function AnniversaryCard({ name, relation, type, date, daysLeft, memo, editHref, onEdit, className, ...props }: AnniversaryCardProps): import("react/jsx-runtime").JSX.Element;
+declare function AnniversaryCard({ name, relation, type, date, daysLeft, memo, editHref, onEdit, linkComponent, className, ...props }: AnniversaryCardProps): import("react/jsx-runtime").JSX.Element;
 export { AnniversaryCard };

package/dist/types/components/ec/mypage-shell.d.ts

@@ -27,6 +27,7 @@
  * 「マイページ配下だけ Cake.jp ロゴに割れる」問題を避けられる。
  */
 import React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 import { type HeaderAction, type HeaderNavItem } from "../../components/primitives/header";
 import { type SideNavGroup, type SideNavItem } from "../../components/primitives/side-nav";
 import { type BottomTabBarItem } from "../../components/primitives/bottom-tab-bar";
@@ -90,6 +91,16 @@ export interface MypageShellProps {
      * `sr-only` なので視覚には影響しない。`false` で無効化。
      */
     skipLink?: false;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * PC ヘッダー（`navItems` / `headerActions` の `href`）・サイドメニュー（`SideNav`）・
+     * パンくず・SP の `BottomTabBar` の `href` に効く。`next/link` 等を渡すとクライアント遷移になる（#236）。
+     * 内部で Client Component の `Header` へ渡すため、Server Component から渡すと
+     * `Functions cannot be passed directly to Client Components` で落ちる。また内部の `SideNav` が
+     * 全項目にイベントハンドラを付けるため、`linkComponent` の有無によらず Server Component からは描けない。
+     * Next.js App Router では呼び出し側のファイルを `"use client"` にする。
+     */
+    linkComponent?: LinkComponent;
 }
-declare function MypageShell({ title, activeMenu, currentPath, activeMatch, isActiveMenuItem, children, breadcrumbs, bottomNavItems, menuGroups, headerActions, logo, navItems, onBack, mainId, skipLink, }: MypageShellProps): import("react/jsx-runtime").JSX.Element;
+declare function MypageShell({ title, activeMenu, currentPath, activeMatch, isActiveMenuItem, children, breadcrumbs, bottomNavItems, menuGroups, headerActions, logo, navItems, onBack, mainId, skipLink, linkComponent, }: MypageShellProps): import("react/jsx-runtime").JSX.Element;
 export { MypageShell };

package/dist/types/components/ec/product-card.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 import { type TagProps } from "../../components/primitives/tag";
 export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 商品名 */
@@ -59,6 +60,17 @@ export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
     onCartAdd?: () => void;
     /** カートボタンのラベル */
     cartButtonLabel?: string;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * 商品リンク（`href`）とショップ名リンク（`shopHref`）の両方に効く。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * `shopHref`（ショップ名リンクの `stopPropagation`）または `showCartButton`（カートボタンの `onClick`）を
+     * 指定するときは、内部でイベントハンドラを付けるため React Server Components では Server Component から
+     * 描けない（`Event handlers cannot be passed to Client Component props` で落ちる）。
+     * その場合、Next.js App Router では呼び出し側のファイルを `"use client"` にする。どちらも使わなければ
+     * Server Component のまま使える。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * ブックマーク（しおり/リボン）アイコン — 本番 .m-bookmark-button 準拠
@@ -68,5 +80,5 @@ export declare function BookmarkRibbonIcon({ size, filled }: {
     size?: number;
     filled?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-declare function ProductCard({ className, name, imageUrl, imageAlt, price, originalPrice, caption, rating, reviewCount, shopName, shopHref, hoverEffect, tags, isFavorite, onFavoriteToggle, onCardClick, href, ranking, deliveryDate, orientation, showDiscountBadge, showCartButton, onCartAdd, cartButtonLabel, ...props }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+declare function ProductCard({ className, name, imageUrl, imageAlt, price, originalPrice, caption, rating, reviewCount, shopName, shopHref, hoverEffect, tags, isFavorite, onFavoriteToggle, onCardClick, href, ranking, deliveryDate, orientation, showDiscountBadge, showCartButton, onCartAdd, cartButtonLabel, linkComponent, ...props }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
 export { ProductCard };

package/dist/types/components/ec/product-carousel.d.ts

@@ -1,3 +1,4 @@
+import type { LinkComponent } from "../../lib/link-component";
 import { type SectionHeaderSize } from "../../components/primitives/section-header";
 import { type ProductCardProps } from "../../components/ec/product-card";
 export interface ProductCarouselProps {
@@ -31,6 +32,17 @@ export interface ProductCarouselProps {
     showCartButton?: boolean;
     /** 追加クラス */
     className?: string;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * セクション画像リンク・「もっと見る」・各商品カード（商品とショップ名）のリンクに効く。
+     * 商品ごとに `products[].linkComponent` を渡した場合はそちらを優先する。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * `showCartButton` を指定するか、商品に `shopHref` を指定するときは、内部の `ProductCard` がイベントハンドラを
+     * 付けるため React Server Components では Server Component から描けない
+     * （`Event handlers cannot be passed to Client Component props` で落ちる）。その場合、Next.js App Router では
+     * 呼び出し側のファイルを `"use client"` にする。どちらも使わなければ Server Component のまま使える。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * 商品カルーセルコンポーネント — Atomic Design Level 3 Organism
@@ -52,5 +64,5 @@ export interface ProductCarouselProps {
  * - `description` でセクション説明文を追加（コラボ紹介、特集説明等）
  * - 横パディング(px-4)はヘッダー行（SectionHeader もしくは画像ラッパー）とスクロールコンテナが各自で持つ
  */
-declare function ProductCarousel({ title, subtitle, description, sectionImage, sectionImageAlt, sectionImageHref, moreHref, moreLabel, onMoreClick, headerSize, products, cardSize, showRanking, showCartButton, className, }: ProductCarouselProps): import("react/jsx-runtime").JSX.Element;
+declare function ProductCarousel({ title, subtitle, description, sectionImage, sectionImageAlt, sectionImageHref, moreHref, moreLabel, onMoreClick, headerSize, products, cardSize, showRanking, showCartButton, className, linkComponent, }: ProductCarouselProps): import("react/jsx-runtime").JSX.Element;
 export { ProductCarousel };

package/dist/types/components/ec/product-detail-bar.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 export interface ProductDetailBarTab {
     /** タブラベル（例: "写真"） */
     label: string;
@@ -28,6 +29,16 @@ export interface ProductDetailBarProps extends React.HTMLAttributes<HTMLDivEleme
     ctaDisabled?: boolean;
     /** タブクリック */
     onTabClick?: (tab: ProductDetailBarTab) => void;
+    /**
+     * タブのリンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * タブの `href` は通常ページ内アンカー（`#detail-slider` 等）で、その用途では指定不要。
+     * 別ページへ遷移するタブ（レビュー一覧ページ等）があるときに使う。
+     * 全タブの `<a>` に `onClick`（`onTabClick` 用）を付けるため、React Server Components では
+     * Server Component から描けない（`Event handlers cannot be passed to Client Component props` で落ちる）。
+     * Next.js App Router では呼び出し側のファイルを `"use client"` にする（`linkComponent` の有無によらない）。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * 商品詳細スティッキーバー
@@ -58,5 +69,5 @@ export interface ProductDetailBarProps extends React.HTMLAttributes<HTMLDivEleme
  * />
  * ```
  */
-declare function ProductDetailBar({ className, tabs, productName, price, isSale, rating, reviewCount, ctaLabel, onCtaClick, ctaDisabled, onTabClick, ...props }: ProductDetailBarProps): import("react/jsx-runtime").JSX.Element;
+declare function ProductDetailBar({ className, tabs, productName, price, isSale, rating, reviewCount, ctaLabel, onCtaClick, ctaDisabled, onTabClick, linkComponent, ...props }: ProductDetailBarProps): import("react/jsx-runtime").JSX.Element;
 export { ProductDetailBar };

package/dist/types/components/ec/product-detail-sidebar.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 /** サイズピッカーの選択肢 */
 export interface SizeOption {
     /** 表示ラベル（例: "3号"） */
@@ -95,6 +96,15 @@ export interface ProductDetailSidebarProps extends React.HTMLAttributes<HTMLDivE
     isBookmarked?: boolean;
     /** プロモバナー */
     promoBanner?: PromoBanner;
+    /**
+     * ショップ名（`shopHref`）とブランド（`brandHref`）のリンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * `sizeOptions` を指定するときは、サイズの選択肢（Chip）に `onClick` を付けるため React Server Components
+     * では Server Component から描けない（`Event handlers cannot be passed to Client Component props` で落ちる）。
+     * その場合、Next.js App Router では呼び出し側のファイルを `"use client"` にする。`sizeOptions` を使わなければ
+     * Server Component のまま使える。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * 商品詳細サイドバー（CV セット）
@@ -111,5 +121,5 @@ export interface ProductDetailSidebarProps extends React.HTMLAttributes<HTMLDivE
  * - サイズ選択肢は行単位の2次元配列で渡す
  * - `onAddToCart` が未指定の場合、ボタンは disabled
  */
-declare function ProductDetailSidebar({ className, productName, price, tags, shopName, shopHref, brandLabel, brandHref, rating, reviewCount, coupons, sizeOptions, selectedSize, onSizeChange, sizeInfoLabel, onSizeInfoClick, deliveryPrefecture, onPrefectureChange, earliestDelivery, quantity, onQuantityChange, pointInfo, onAddToCart, addToCartLabel, onBookmark, isBookmarked, promoBanner, ...props }: ProductDetailSidebarProps): import("react/jsx-runtime").JSX.Element;
+declare function ProductDetailSidebar({ className, productName, price, tags, shopName, shopHref, brandLabel, brandHref, rating, reviewCount, coupons, sizeOptions, selectedSize, onSizeChange, sizeInfoLabel, onSizeInfoClick, deliveryPrefecture, onPrefectureChange, earliestDelivery, quantity, onQuantityChange, pointInfo, onAddToCart, addToCartLabel, onBookmark, isBookmarked, promoBanner, linkComponent, ...props }: ProductDetailSidebarProps): import("react/jsx-runtime").JSX.Element;
 export { ProductDetailSidebar };

package/dist/types/components/ec/product-list-item.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 export interface ProductListItemTag {
     label: string;
     variant?: "default" | "accent" | "info" | "timesale" | "sale";
@@ -76,6 +77,13 @@ export interface ProductListItemProps extends React.HTMLAttributes<HTMLDivElemen
     rightSlot?: React.ReactNode;
     /** 下部スロット（アクションボタンの代わりに任意コンテンツ） */
     bottomSlot?: React.ReactNode;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * 商品画像・商品名（`href`）とショップ名（`shopHref`）のリンクに効く。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * この部品は Server Component のまま使える。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * カードリストアイテム — Figma Card/List 準拠
@@ -93,5 +101,5 @@ export interface ProductListItemProps extends React.HTMLAttributes<HTMLDivElemen
  * - 小さい: `<ListItem variant="small" />`
  * - 極小: `<ListItem variant="xsm" />`
  */
-declare function ProductListItem({ name, imageUrl, price, caption, shopName, shopHref, brandName, tags, hashTags, statusLabel, variant, showCartButton, onAddToCart, showDetailButton, onViewDetail, showBookmark, href, orderDate, deliveryInfo, totalPrice, showReviewButton, optionInfo, quantity, onQuantityChange, quantitySize, originalPrice, priceLabel, deliveryText, onDelete, onSaveForLater, imageSize, subtotal, subtotalLabel, leftSlot, rightSlot, bottomSlot, className, ...props }: ProductListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ProductListItem({ name, imageUrl, price, caption, shopName, shopHref, brandName, tags, hashTags, statusLabel, variant, showCartButton, onAddToCart, showDetailButton, onViewDetail, showBookmark, href, orderDate, deliveryInfo, totalPrice, showReviewButton, optionInfo, quantity, onQuantityChange, quantitySize, originalPrice, priceLabel, deliveryText, onDelete, onSaveForLater, imageSize, subtotal, subtotalLabel, leftSlot, rightSlot, bottomSlot, linkComponent, className, ...props }: ProductListItemProps): import("react/jsx-runtime").JSX.Element;
 export { ProductListItem };

package/dist/types/components/ec/rating-stars.d.ts

@@ -25,6 +25,8 @@ declare function SparkleIcon({ size, className, }: {
  *
  * Cake.jp 標準パターン: ✦ 4.67 (345)
  * 1つのスパークルアイコン + 数値 + レビュー件数。
+ * 表示用の評価なのでブランド色は使わず、黒系（Text-High-Emphasis）で描く
+ * （入力用の星 = ReviewForm の選択済みはブランド色のまま）。
  */
 declare function RatingStars({ className, rating, reviewCount, size, showCount, showValue, ...props }: RatingStarsProps): import("react/jsx-runtime").JSX.Element;
 export { RatingStars, SparkleIcon };

package/dist/types/components/ec/review-card.d.ts

@@ -43,7 +43,7 @@ export interface ReviewCardProps extends React.HTMLAttributes<HTMLDivElement> {
  * - `variant="card"` は商品ヘッダー付きカード
  * - `variant="pc"` はPC向け幅広レイアウト
  * - 既存の `RatingStars` の `SparkleIcon` を星表示に使用
- * - 「もっと見る」はオレンジテキスト
+ * - 「もっと見る」はグレー（Text-Medium-Emphasis）+ 下線（ブランド色は使わない）
  */
 declare function ReviewCard({ className, variant, bordered, rating, date, text, imageUrl, productName, productImageUrl, helpfulCount, isLiked, onLikeClick, onMoreClick, maxLength, ...props }: ReviewCardProps): import("react/jsx-runtime").JSX.Element;
 export { ReviewCard };

package/dist/types/components/ec/shop-card.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 export interface ShopCardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 店舗名 */
     name: string;
@@ -24,6 +25,12 @@ export interface ShopCardProps extends React.HTMLAttributes<HTMLDivElement> {
     href?: string;
     /** バリエーション */
     variant?: "default" | "compact";
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。`href` 指定時だけ使われる。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * この部品は Server Component のまま使える。
+     */
+    linkComponent?: LinkComponent;
 }
 /**
  * 店舗カード
@@ -44,5 +51,5 @@ export interface ShopCardProps extends React.HTMLAttributes<HTMLDivElement> {
  * - 画像は productImageUrl（商品）と shopImageUrl（店舗）の2枚を指定
  * - ブックマークは onBookmarkToggle を渡すと表示される
  */
-declare function ShopCard({ name, ruby, productImageUrl, shopImageUrl, rating, reviewCount, area, deliveryDate, isBookmarked, onBookmarkToggle, href, variant, className, ...props }: ShopCardProps): import("react/jsx-runtime").JSX.Element;
+declare function ShopCard({ name, ruby, productImageUrl, shopImageUrl, rating, reviewCount, area, deliveryDate, isBookmarked, onBookmarkToggle, href, variant, linkComponent, className, ...props }: ShopCardProps): import("react/jsx-runtime").JSX.Element;
 export { ShopCard };

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: {
-    variant?: "link" | "default" | "success" | "secondary" | "destructive" | "ghost" | "info-subtle" | "success-subtle" | "accent-subtle" | "caution-subtle" | "warning-subtle" | "muted-subtle" | "outline";
+    variant?: "link" | "default" | "success" | "secondary" | "destructive" | "ghost" | "outline" | "info-subtle" | "success-subtle" | "accent-subtle" | "caution-subtle" | "warning-subtle" | "muted-subtle";
 } & import("class-variance-authority/types").ClassProp) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

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

@@ -1,9 +1,16 @@
 import * as React from "react";
+import type { LinkComponent } from "../../lib/link-component";
 declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
 declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
 declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
-declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
+declare function BreadcrumbLink({ asChild, linkComponent, className, ...props }: React.ComponentProps<"a"> & {
     asChild?: boolean;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * `asChild` と併用した場合は `asChild` が優先され、子要素がそのまま描かれる。
+     */
+    linkComponent?: LinkComponent;
 }): import("react/jsx-runtime").JSX.Element;
 declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,45 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: {
-    variant?: "link" | "default" | "secondary" | "tertiary" | "destructive" | "ghost" | "inverse" | "ghost-inverse" | "overlay";
+    variant?: "link" | "default" | "secondary" | "tertiary" | "destructive" | "ghost" | "outline" | "inverse" | "ghost-inverse" | "overlay";
     size?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | "hero" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl";
 } & import("class-variance-authority/types").ClassProp) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+    /**
+     * 処理中の表示（opt-in・既定 false）。未指定 / false のときの出力は従来と同一。
+     *
+     * true のとき:
+     * - ラベルを透明にしてスピナーを中央に重ねる。ラベルは DOM に残るので幅は変わらない。
+     * - `aria-busy="true"` と `aria-disabled="true"` を付け、click 系（クリック・Enter / Space・
+     *   フォームの送信と暗黙送信）を止める。onClick / onClickCapture も、親やボタン内の要素の
+     *   onClick も呼ばれない。
+     * - 止めるのは click 系だけ。onPointerDown / onMouseDown / onKeyDown は loading 中も
+     *   呼ばれるので、pointerdown で開く部品（`DropdownMenuTrigger asChild` 等）の起点に
+     *   するときは、利用側で loading 中は開かないようにする。
+     * - native の `disabled` は付けない。付けるとフォーカス中のボタンからフォーカスが
+     *   body へ落ち、キーボード / スクリーンリーダー利用者が処理後に操作位置を見失う。
+     * - 色は variant のまま（disabled のグレー塗りにしない）。forced-colors ではシステム色で
+     *   描く。スピナーは `prefers-reduced-motion` で回転を止める。
+     *
+     * クリック抑止に関数を使うため、Server Component から loading={true} を静的に
+     * 描くことはできない（処理中は client の状態なので Client Component から渡す）。
+     *
+     * `asChild` 併用時: Slot は子 1 つを差し替えるだけなのでスピナーも読み上げの文言も出さず
+     * （見た目は変わらない）、`aria-busy` と disabled 相当（aria-disabled・tabIndex=-1・
+     * クリック抑止）だけを子へ渡す。リンクの意味を保つため href は外さない。
+     */
+    loading?: boolean;
+    /**
+     * loading 中に読み上げる文言（画面には出さない。既定「処理中」）。
+     * 読み上げ名の後ろに足すので、名前は「保存 処理中」のようになる。`aria-label` 指定時は
+     * aria-label に連結し（文字列のときだけ）、`aria-labelledby` 指定時は参照に足す。
+     * 同じ `aria-labelledby` を複数のボタンで共有して loading にする場合は、各ボタンに `id` を
+     * 付ける（付けないと読み上げ文言の id が重複する。開発時は console.warn で知らせる）。
+     * `aria-busy` を読まない読み上げソフトがあるため、処理中であることは名前で伝える。
+     * null / 空文字で出さない。
+     */
+    loadingLabel?: React.ReactNode;
+};
+declare function Button({ className, variant, size, asChild, loading, loadingLabel, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export { Button, buttonVariants };

package/dist/types/components/foundations/checkbox-card.d.ts

@@ -16,8 +16,14 @@ declare function CheckboxCardGroup({ className, ...props }: React.HTMLAttributes
  * - 単一選択のカード型は RadioGroupItem を使用
  * - `CheckboxCardGroup` でグループ化する
  * - `badge` でタグバッジ（割引率等）を表示可能
+ *
+ * ### 読み上げ
+ * アクセシブルネームはラベル（+ バッジ）だけにし、説明（`description`）と、選択中だけ
+ * 見える展開内容（`expandedContent`）は `aria-describedby` に分ける。名前をボタンの内容に
+ * 任せると説明・展開内容まで名前に入り、選択の前後で名前が変わってしまうため。
+ * `aria-label` / `aria-labelledby` を明示した場合はそちらが名前になる。
  */
-declare function CheckboxCardItem({ className, children, description, expandedContent, badge, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root> & {
+declare function CheckboxCardItem({ className, children, description, expandedContent, badge, checked: checkedProp, defaultChecked, onCheckedChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root> & {
     /** ラベルテキスト */
     children?: React.ReactNode;
     /** 補足説明テキスト */

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

@@ -39,5 +39,5 @@ export interface CheckboxProps extends CheckboxRootProps {
  *
  * カード型の選択肢には `CheckboxCard` (foundations) を使用。
  */
-declare function Checkbox({ label, description, count, containerClassName, className, id, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare function Checkbox({ label, description, count, containerClassName, className, id, ref: consumerRef, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 export { Checkbox };

package/dist/types/components/foundations/chip-variants.d.ts

@@ -10,8 +10,8 @@ import { type VariantProps } from "class-variance-authority";
  * Chip と RadioGroup の chip variant の両方へ自動追従する。
  */
 export declare const chipVariants: (props?: {
-    variant?: "accent" | "filled";
+    variant?: "accent" | "selected" | "filled";
     size?: "sm" | "lg" | "md" | "tile";
-    shape?: "square" | "pill";
+    shape?: "pill" | "square";
 } & import("class-variance-authority/types").ClassProp) => string;
 export type ChipVariantProps = VariantProps<typeof chipVariants>;

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

@@ -0,0 +1,61 @@
+import * as React from "react";
+/** useConfirm() の confirm に渡す内容。 */
+interface ConfirmOptions {
+    /** 確認の見出し。ダイアログの読み上げ名を兼ねる（例: 「このメモを削除しますか？」） */
+    title: React.ReactNode;
+    /**
+     * 判断材料（例: 「削除したメモは元に戻せません。」）。ダイアログの説明として読み上げられる。
+     * 省略すると Radix AlertDialog が開発時に console.warn を出すので、原則渡す。
+     */
+    description?: React.ReactNode;
+    /** 確定ボタンの文言。既定「確認」。操作を表す動詞（「削除する」等）を渡すのを推奨 */
+    confirmLabel?: React.ReactNode;
+    /** キャンセルボタンの文言。既定「キャンセル」 */
+    cancelLabel?: React.ReactNode;
+    /**
+     * 確定ボタンの意匠。`destructive` は削除など取り消せない操作用（Button variant="destructive"）。
+     * 既定 `default`（Button variant="default"）。キャンセルは常に AlertDialogCancel 既定の tertiary。
+     */
+    tone?: "default" | "destructive";
+}
+/** 確定で true、キャンセル / Esc で false に resolve する。 */
+type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+interface ConfirmDialogProviderProps {
+    children?: React.ReactNode;
+}
+/**
+ * ConfirmDialogProvider — `useConfirm()` を使えるようにする Provider。アプリのルートに 1 つ置く。
+ *
+ * - `confirm(options)` が呼ばれると AlertDialog を開き、確定で true、キャンセル / Esc で
+ *   false に resolve する（背景クリックでは閉じない）。
+ * - 同時に複数呼ばれたら待ち行列にして 1 件ずつ表示する。
+ * - Provider が unmount されたとき、未解決の confirm は false で resolve する
+ *   （画面遷移で await が宙に浮いたままにならないようにする）。unmount 後の呼び出しも即 false。
+ * - 閉じた後は confirm() を呼んだ時点でフォーカスがあった要素へ戻す（Trigger を持たないため、
+ *   Radix の既定のままだと body へ落ちる）。閉じるアニメーション中に次の confirm() が来ても、
+ *   最後に閉じたときは元の呼び出し元へ戻る。
+ */
+declare function ConfirmDialogProvider({ children }: ConfirmDialogProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * useConfirm — `window.confirm()` の置き換え。
+ *
+ * ```tsx
+ * const confirm = useConfirm()
+ * const ok = await confirm({
+ *   title: "このメモを削除しますか？",
+ *   description: "削除したメモは元に戻せません。",
+ *   confirmLabel: "削除する",
+ *   tone: "destructive",
+ * })
+ * if (ok) await remove()
+ * ```
+ *
+ * `<ConfirmDialogProvider>` の内側でだけ使える。外側で使うと例外を投げる
+ * （設定漏れを「常にキャンセル」として黙って通すと、削除等の操作が無言で何もしなくなり
+ * 気付けないため）。確定ボタンを押した時点で true に resolve してダイアログを閉じる。
+ * 処理完了までダイアログ内で待たせたい場合は AlertDialog を直接組み、確定ボタンに
+ * Button の `loading` を使う。
+ */
+declare function useConfirm(): ConfirmFn;
+export { ConfirmDialogProvider, useConfirm };
+export type { ConfirmDialogProviderProps, ConfirmFn, ConfirmOptions };

package/dist/types/components/foundations/data-table.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
+import type { LinkComponent } from "../../lib/link-component";
 declare function DataTable({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function DataTableTable({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
 declare function DataTableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
@@ -87,10 +88,16 @@ declare function DataTableDragHandleCell({ className, ...props }: Omit<React.Com
     onMouseDown?: React.MouseEventHandler;
     onTouchStart?: React.TouchEventHandler;
 }): import("react/jsx-runtime").JSX.Element;
-declare function DataTableLinkCell({ className, href, external, children, ...props }: Omit<React.ComponentProps<"td">, "width" | "align"> & {
+declare function DataTableLinkCell({ className, href, external, linkComponent, children, ...props }: Omit<React.ComponentProps<"td">, "width" | "align"> & {
     href?: string;
-    /** 外部リンクアイコンを表示 */
+    /** 外部リンクアイコンを表示（`linkComponent` は通さず、常に素の `<a target="_blank">`） */
     external?: boolean;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。`external` のリンクには使われない。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * この部品は Server Component のまま使える。
+     */
+    linkComponent?: LinkComponent;
 }): import("react/jsx-runtime").JSX.Element;
 declare function DataTableInputCell({ className, value, onChange, placeholder, type, name, ...props }: Omit<React.ComponentProps<"td">, "children" | "onChange"> & {
     value?: string;