@cakejp/design-system 0.17.0 → 0.19.0

package/dist/lib/field-labelling.js

@@ -1,7 +1,8 @@
-import * as a from "react";
-const n = a.createContext(null);
-function t() {
-  return a.useContext(n);
+"use client";
+import * as n from "react";
+const t = n.createContext(null);
+function a() {
+  return n.useContext(t);
 }
 function d(r, e) {
   if (!e) return {};
@@ -22,8 +23,8 @@ function o(r, e) {
   };
 }
 export {
-  n as FieldLabellingContext,
+  t as FieldLabellingContext,
   d as resolveFieldAria,
   o as resolveNativeFieldAria,
-  t as useFieldLabelling
+  a as useFieldLabelling
 };

package/dist/lib/link-component.js

@@ -0,0 +1,6 @@
+function n(r, e) {
+  return e || !r ? "a" : r;
+}
+export {
+  n as resolveLinkComponent
+};

package/dist/lib/use-value-length.js

@@ -1,3 +1,4 @@
+"use client";
 import * as u from "react";
 function a(e, c) {
   if (typeof e == "function") {

package/dist/types/components/ec/_mypage-menu-data.d.ts

@@ -1,4 +1,4 @@
-import type { SideNavGroup } from "../../../components/primitives/side-nav";
+import type { SideNavGroup } from "../../components/primitives/side-nav";
 /**
  * Cake.jp マイページのメニュー定義
  *
@@ -6,8 +6,8 @@ import type { SideNavGroup } from "../../../components/primitives/side-nav";
  *
  * ### 使い方
  * ```tsx
- * import { SideNav } from '../../../components/primitives/side-nav'
- * import { mypageMenuGroups } from '../../../components/ec/_mypage-menu-data'
+ * import { SideNav } from '../../components/primitives/side-nav'
+ * import { mypageMenuGroups } from '../../components/ec/_mypage-menu-data'
  *
  * <SideNav groups={mypageMenuGroups} activeMenu="news" ariaLabel="マイページメニュー" />
  * ```

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

@@ -27,7 +27,7 @@
  * - CSS: admin_shops/layout/nav_layout.css
  */
 import * as React from "react";
-import { type AdminNavItem } from "../../../components/primitives/admin-side-nav";
+import { type AdminNavItem } from "../../components/primitives/admin-side-nav";
 export declare function MissingComponent({ name, children, className, }: {
     name: string;
     children: React.ReactNode;

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

@@ -25,7 +25,7 @@ export interface AnniversaryCardProps extends React.HTMLAttributes<HTMLDivElemen
  *
  * ### インポート
  * ```tsx
- * import { AnniversaryCard } from '../../../components/ec/anniversary-card'
+ * import { AnniversaryCard } from '../../components/ec/anniversary-card'
  * ```
  *
  * ### Props（主要なもの）

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

@@ -27,9 +27,9 @@
  * 「マイページ配下だけ Cake.jp ロゴに割れる」問題を避けられる。
  */
 import React from "react";
-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";
+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";
 export interface MypageShellBreadcrumb {
     label: string;
     href?: string;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type TagProps } from "../../../components/primitives/tag";
+import { type TagProps } from "../../components/primitives/tag";
 export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 商品名 */
     name: string;
@@ -19,6 +19,17 @@ export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
     reviewCount?: number;
     /** ショップ名 */
     shopName?: string;
+    /**
+     * ホバー時の画像演出。
+     * - `zoom` : 画像をわずかに拡大
+     * - `fade` : 拡大せず画像をわずかに明るくする（本番 EC 準拠）
+     * - `none` : 演出なし
+     *
+     * 未指定時の既定は orientation で変わる（従来の見た目を維持するため）:
+     * `vertical` = `zoom` / `horizontal` = `none`。明示指定すればどちらの
+     * orientation でも同じように効く。
+     */
+    hoverEffect?: "zoom" | "fade" | "none";
     /** ショップページURL（指定するとショップ名がリンク化、hover時アンダーライン） */
     shopHref?: string;
     /** タグリスト（配送方法・キャンペーンなど） */
@@ -57,23 +68,5 @@ export declare function BookmarkRibbonIcon({ size, filled }: {
     size?: number;
     filled?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-/**
- * 商品カードコンポーネント — Figma DS 準拠
- *
- * Cake.jp の商品一覧・検索結果に使用するカードUI。
- * vertical（グリッド表示）と horizontal（リスト表示）の2レイアウト対応。
- *
- * ### Figma との対応
- * - 画像エリア: 正方形、rounded-lg (8px)、4px パディング
- * - ブックマーク: 画像右下に 36px 円形ボタン（本番 .m-bookmark-button--mid 準拠）
- * - タグ: 画像左下に配置（PR、セールバッジ等）
- * - 商品情報: gap-[2px]、商品名 → レビュー+最短日（同行） → 価格
- * - カートボタン: h-[36px]、rounded-[12px]、Brand-Cake-Orange
- *
- * ### 機能
- * - `shopHref` でショップ名リンク化（hover時アンダーライン付き）
- * - `showCartButton` で「カートに追加」ボタン表示（verticalのみ）
- * - ランキングバッジ、お気に入り、割引バッジなどEC必須要素を統合提供
- */
-declare function ProductCard({ className, name, imageUrl, imageAlt, price, originalPrice, caption, rating, reviewCount, shopName, shopHref, 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, ...props }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
 export { ProductCard };

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

@@ -1,5 +1,5 @@
-import { type SectionHeaderSize } from "../../../components/primitives/section-header";
-import { type ProductCardProps } from "../../../components/ec/product-card";
+import { type SectionHeaderSize } from "../../components/primitives/section-header";
+import { type ProductCardProps } from "../../components/ec/product-card";
 export interface ProductCarouselProps {
     /** セクションタイトル */
     title: string;
@@ -40,7 +40,7 @@ export interface ProductCarouselProps {
  *
  * ### インポート
  * ```tsx
- * import { ProductCarousel } from '../../../components/ec/product-carousel'
+ * import { ProductCarousel } from '../../components/ec/product-carousel'
  * ```
  *
  * ### AI 向け使用ルール

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

@@ -2,6 +2,11 @@ import * as React from "react";
 export interface ReviewCardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** レビューバリアント */
     variant?: "list" | "card" | "pc";
+    /**
+     * 枠線を出すか（既定 true）。
+     * 商品詳細などページ全体をフラットに統一する画面では false にする。
+     */
+    bordered?: boolean;
     /** 星評価（1〜5） */
     rating: number;
     /** 投稿日 */
@@ -40,5 +45,5 @@ export interface ReviewCardProps extends React.HTMLAttributes<HTMLDivElement> {
  * - 既存の `RatingStars` の `SparkleIcon` を星表示に使用
  * - 「もっと見る」はオレンジテキスト
  */
-declare function ReviewCard({ className, variant, rating, date, text, imageUrl, productName, productImageUrl, helpfulCount, isLiked, onLikeClick, onMoreClick, maxLength, ...props }: ReviewCardProps): import("react/jsx-runtime").JSX.Element;
+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/stat-card.d.ts

@@ -6,7 +6,7 @@
  *
  * ### インポート
  * ```tsx
- * import { StatCard } from '../../../components/ec/stat-card'
+ * import { StatCard } from '../../components/ec/stat-card'
  * ```
  *
  * ### Props

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
-import { Button } from "../../../components/foundations/button";
+import { Button } from "../../components/foundations/button";
 declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ 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";
-    size?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | "hero" | "icon-xs" | "icon-sm" | "icon-lg";
+    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> & {
     asChild?: boolean;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DayPicker, type DayButton } from "react-day-picker";
-import { Button } from "../../../components/foundations/button";
+import { Button } from "../../components/foundations/button";
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -6,7 +6,7 @@
  *
  * ### インポート
  * ```tsx
- * import { CheckboxGroup, CheckboxGroupItem } from "../../../components/foundations/checkbox-group"
+ * import { CheckboxGroup, CheckboxGroupItem } from "../../components/foundations/checkbox-group"
  * ```
  *
  * ### Props（CheckboxGroup）

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

@@ -12,6 +12,6 @@ import { type VariantProps } from "class-variance-authority";
 export declare const chipVariants: (props?: {
     variant?: "accent" | "filled";
     size?: "sm" | "lg" | "md" | "tile";
-    shape?: "pill" | "square";
+    shape?: "square" | "pill";
 } & import("class-variance-authority/types").ClassProp) => string;
 export type ChipVariantProps = VariantProps<typeof chipVariants>;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { Dialog } from "../../../components/foundations/dialog";
+import { Dialog } from "../../components/foundations/dialog";
 declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
 declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
     title?: string;

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

@@ -9,12 +9,20 @@ declare const dataTableRowVariants: (props?: {
 } & import("class-variance-authority/types").ClassProp) => string;
 declare function DataTableRow({ className, state, ...props }: React.ComponentProps<"tr"> & VariantProps<typeof dataTableRowVariants>): import("react/jsx-runtime").JSX.Element;
 type SortDirection = "asc" | "desc" | null;
-declare function DataTableHead({ className, sortable, sortDirection, onSort, width, children, ...props }: React.ComponentProps<"th"> & {
+declare function DataTableHead({ className, sortable, sortDirection, onSort, width, srLabel, children, ...props }: React.ComponentProps<"th"> & {
     sortable?: boolean;
     sortDirection?: SortDirection;
     onSort?: () => void;
     /** セル幅バリアント: max=320-360px, hug=最小 */
     width?: "auto" | "max" | "hug";
+    /**
+     * 見出し文字を出さない列（チェックボックス選択列・操作列など）の読み上げ用ラベル。
+     * 画面には出さず、スクリーンリーダーにだけ列の意味を伝える。
+     *
+     * 空の `<th>` は「この列が何か」が支援技術に伝わらない（axe: empty-table-header）。
+     * 見出しを出したくない列には必ず指定する。
+     */
+    srLabel?: string;
 }): import("react/jsx-runtime").JSX.Element;
 declare const dataTableCellVariants: (props?: {
     width?: "auto" | "max" | "hug";

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

@@ -7,7 +7,7 @@
  *
  * ### インポート
  * ```tsx
- * import { Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator } from "../../../components/foundations/field"
+ * import { Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator } from "../../components/foundations/field"
  * ```
  *
  * ### 構成要素
@@ -32,7 +32,7 @@
  */
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-import { Label } from "../../../components/foundations/label";
+import { Label } from "../../components/foundations/label";
 /**
  * Field — 1 フィールド分の箱（ラベル + 入力 + 説明/エラー）。
  * `FieldGroup`（gap-4）の中に並べる**縦リズムの最小単位**。

package/dist/types/components/foundations/file-input.d.ts

@@ -63,7 +63,7 @@ export declare function validateFileSize(files: File[], maxSize?: number): {
  *
  * ### インポート
  * ```tsx
- * import { FileInput } from '../../../components/foundations/file-input'
+ * import { FileInput } from '../../components/foundations/file-input'
  * ```
  *
  * ### AI 向け使用ルール

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

@@ -1,12 +1,18 @@
 import * as React from "react";
-import { type Button } from "../../../components/foundations/button";
+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;
 declare function PaginationItem({ ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
 type PaginationLinkProps = {
     isActive?: boolean;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     */
+    linkComponent?: LinkComponent;
 } & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
-declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationLink({ className, isActive, size, linkComponent, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
 declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
 declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
 declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "../../../components/foundations/dialog";
+import { DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "../../components/foundations/dialog";
 declare function useIsMobile(breakpoint?: number): boolean;
 interface ResponsiveDialogProps {
     children: React.ReactNode;

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

@@ -3,9 +3,14 @@ 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, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+declare function SheetContent({ className, children, side, showCloseButton, autoFocus, onOpenAutoFocus, onCloseAutoFocus, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
     side?: "top" | "right" | "bottom" | "left";
     showCloseButton?: boolean;
+    /**
+     * 開閉時のフォーカス自動移動。既定 true（Radix 既定＝開いたら中へ入り、閉じたらトリガーへ戻る）。
+     * WCAG 2.4.3 を満たすため、止めたい特別な事情があるときだけ false にする。
+     */
+    autoFocus?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/foundations/skip-link.d.ts

@@ -19,7 +19,7 @@ export interface SkipLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElem
  *
  * ### インポート
  * ```tsx
- * import { SkipLink } from '../../../components/foundations/skip-link'
+ * import { SkipLink } from '../../components/foundations/skip-link'
  * ```
  *
  * ### 使い方（シェルを使わず素の DOM に置く場合）

package/dist/types/components/foundations/social-icon.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type SocialPlatform = "line" | "x" | "facebook" | "amazon" | "google" | "apple";
+export type SocialPlatform = "line" | "x" | "facebook" | "amazon" | "google" | "apple" | "hatena";
 export interface SocialIconProps extends Omit<React.ComponentProps<"svg">, "children"> {
     platform: SocialPlatform;
     /**

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

@@ -5,8 +5,9 @@ declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsP
 declare const tabsListVariants: (props?: {
     variant?: "underbar" | "segment";
     scrollable?: boolean;
+    size?: "sm" | "md";
 } & import("class-variance-authority/types").ClassProp) => string;
-declare function TabsList({ className, variant, scrollable, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ className, variant, scrollable, size, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): import("react/jsx-runtime").JSX.Element;
 declare function TabsTrigger({ className, children, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

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

@@ -27,7 +27,7 @@ export interface AdminHeaderProps {
  *
  * ### インポート
  * ```tsx
- * import { AdminHeader } from '../../../components/primitives/admin-header'
+ * import { AdminHeader } from '../../components/primitives/admin-header'
  * ```
  *
  * ### Props

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

@@ -68,7 +68,7 @@ export interface AdminSideNavProps {
  *
  * ### インポート
  * ```tsx
- * import { AdminSideNav } from '../../../components/primitives/admin-side-nav'
+ * import { AdminSideNav } from '../../components/primitives/admin-side-nav'
  * ```
  *
  * ### Props

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

@@ -1,4 +1,4 @@
-import { type SectionHeaderSize } from "../../../components/primitives/section-header";
+import { type SectionHeaderSize } from "../../components/primitives/section-header";
 export interface BannerItem {
     /** バナー画像URL */
     imageUrl: string;
@@ -40,7 +40,7 @@ export interface BannerCarouselProps {
  *
  * ### インポート
  * ```tsx
- * import { BannerCarousel } from '../../../components/primitives/banner-carousel'
+ * import { BannerCarousel } from '../../components/primitives/banner-carousel'
  * ```
  *
  * ### AI 向け使用ルール

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

@@ -1,4 +1,4 @@
-import { type SectionHeaderSize } from "../../../components/primitives/section-header";
+import { type SectionHeaderSize } from "../../components/primitives/section-header";
 export interface CategoryItem {
     /** カテゴリ名 */
     name: string;
@@ -47,7 +47,7 @@ export interface CategoryScrollProps {
  *
  * ### インポート
  * ```tsx
- * import { CategoryScroll } from '../../../components/primitives/category-scroll'
+ * import { CategoryScroll } from '../../components/primitives/category-scroll'
  * ```
  *
  * ### Props（主要なもの）

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

@@ -31,7 +31,7 @@ export interface CategoryShortcutsProps {
  *
  * ### インポート
  * ```tsx
- * import { CategoryShortcuts } from '../../../components/primitives/category-shortcuts'
+ * import { CategoryShortcuts } from '../../components/primitives/category-shortcuts'
  * ```
  *
  * ### AI 向け使用ルール

package/dist/types/components/primitives/chat-composer.d.ts

@@ -70,7 +70,7 @@ export interface ChatComposerProps {
  *
  * ### インポート
  * ```tsx
- * import { ChatComposer } from "../../../components/primitives/chat-composer"
+ * import { ChatComposer } from "../../components/primitives/chat-composer"
  * ```
  *
  * ### 送信キー

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { chipVariants, type ChipVariantProps } from "../../../components/foundations/chip-variants";
+import { chipVariants, type ChipVariantProps } from "../../components/foundations/chip-variants";
 export interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ChipVariantProps {
     /** リンクとして使う場合のURL */
     href?: string;

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+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";
+export interface ContentCardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /** 記事タイトル。一覧で高さが割れないよう常に 2 行ぶんの高さを取る */
+    title: string;
+    /** 遷移先。カード全体がリンクになる */
+    href: string;
+    /**
+     * 画像。`next/image` や CMS の img、図版をそのまま渡す。
+     * 縦横比とクリップはカード側が持つので、中身は `h-full w-full object-cover` を想定。
+     */
+    imageSlot?: React.ReactNode;
+    /** 画像左下に重ねるラベル（カテゴリ等）。長いラベルは省略記号で切る */
+    tag?: {
+        label: string;
+        variant?: TagProps["variant"];
+    };
+    /** 日付・著者などの補足。**必ず 1 行**に収まる内容にする（複数行だと一覧で高さが割れる） */
+    meta?: React.ReactNode;
+    /**
+     * カードの向き。
+     * - `vertical`（既定）: 画像が上、本文が下。グリッド一覧向け
+     * - `horizontal` : 画像が左、本文が右
+     * - `list` : 本文が左、サムネイルが右（記事一覧の Medium 型）
+     */
+    orientation?: ContentCardOrientation;
+    /** 画像の縦横比（既定 `16/10`。記事のアイキャッチは横長素材が前提） */
+    aspect?: ContentCardAspect;
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     */
+    linkComponent?: LinkComponent;
+}
+/**
+ * 記事・特集・お知らせなど「画像 + タイトル + メタ」のカード。
+ *
+ * `ProductCard`（商品）/ `ShopCard`（店舗）の兄弟で、記事メディア向け。
+ * 汎用の `Card` に載せて組むと、枠線・タイトル行数・カード高さが揃わない
+ * （実測で高さ 268 と 312 に割れる事例あり）ため、この部品を使う。
+ *
+ * ### 作法
+ *
+ * - 枠線なし・`rounded-lg`・サーフェスは親から伝播（`Section background="subtle"` 配下では白）
+ * - タイトルは 2 行で省略し、常に 2 行ぶんの高さを取る（一覧で下端が揃う）
+ * - `meta` は 1 行固定でカード下端へ寄る
+ * - 画像は `imageSlot` で consumer が用意する（`next/image` / CMS / 図版を吸収する）
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 記事一覧・関連記事・注目記事は `Card` + `CardContent` で組まずこれを使う
+ * - グリッド一覧は `orientation="vertical"`、Medium 型の縦リストは `orientation="list"` +
+ *   `ContentList`（区切り線つき）
+ * - タイトルの文字装飾を利用側で足さない（`font-bold` にしない。既定は `font-medium`）
+ */
+declare function ContentCard({ className, title, href, imageSlot, tag, meta, orientation, aspect, linkComponent, ...props }: ContentCardProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `ContentCard` を区切り線つきで縦に並べるリスト（記事一覧の Medium 型）。
+ *
+ * 一覧ページで `orientation="list"` の `ContentCard` を並べるときに使う。
+ * 区切り線と項目間の余白だけを持ち、幅・背景は持たない。
+ */
+declare function ContentList({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { ContentCard, ContentList };

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

@@ -44,7 +44,7 @@ export interface ContentCarouselProps extends Omit<React.HTMLAttributes<HTMLDivE
  *
  * ### インポート
  * ```tsx
- * import { ContentCarousel } from '../../../components/primitives/content-carousel'
+ * import { ContentCarousel } from '../../components/primitives/content-carousel'
  * ```
  *
  * ### AI 向け使用ルール

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type LinkComponent } from "../../lib/link-component";
 export interface FooterLink {
     label: string;
     href: string;
@@ -53,6 +54,25 @@ export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
     trustBadge?: FooterTrustBadge;
     /** フッター下部の補助リンク（特定商取引法、プライバシーポリシー等） */
     bottomLinks?: FooterLink[];
+    /**
+     * リンクの描画に使うコンポーネント（既定 `a`）。
+     * `next/link` 等を渡すとクライアント遷移になる（#236）。
+     * `external: true` のリンクは常に素の `<a target="_blank">` で描く。
+     */
+    linkComponent?: LinkComponent;
+    /**
+     * レイアウト（既定 `default`）。
+     * - `default` : ロゴ・説明文を最下部に中央寄せ（本番 Cake.jp 準拠）
+     * - `brand-first` : ロゴ・説明文を先頭カラムに置き、その右にリンク群を並べる。
+     *   下部バーはコピーライト左・`bottomRightSlot` 右の左右振り分けになる
+     *   （求人ケーキ屋さん.jp / 仕入れケーキ屋さん.JP のフッター構成）
+     */
+    variant?: "default" | "brand-first";
+    /**
+     * 下部バーの右側に置く要素（`Powered by` 等）。
+     * `variant="brand-first"` でのみ配置され、既定レイアウトでは無視される。
+     */
+    bottomRightSlot?: React.ReactNode;
 }
 /**
  * フッターコンポーネント
@@ -77,5 +97,5 @@ export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
  * - `copyright` でコピーライト表示
  * - BottomTabBar と併用する場合は `pb-16` 等でマージン確保
  */
-declare function Footer({ className, linkGroups, copyright, logo, logoHref, socialLinks, description, paymentMethods, trustBadge, bottomLinks, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+declare function Footer({ className, linkGroups, copyright, logo, logoHref, socialLinks, description, paymentMethods, trustBadge, bottomLinks, variant, bottomRightSlot, linkComponent, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
 export { Footer };

package/dist/types/components/primitives/form-field.d.ts

@@ -6,7 +6,7 @@
  *
  * ### インポート
  * ```tsx
- * import { FormField } from '../../../components/primitives/form-field'
+ * import { FormField } from '../../components/primitives/form-field'
  * ```
  *
  * ### Props