@cakejp/design-system 0.3.0

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

@@ -0,0 +1,15 @@
+import type { SideNavGroup } from "../../components/primitives/side-nav";
+/**
+ * Cake.jp マイページのメニュー定義
+ *
+ * `menu.ctp` 準拠の17項目。`SideNav` コンポーネントの `groups` prop に渡して使う。
+ *
+ * ### 使い方
+ * ```tsx
+ * import { SideNav } from '../../components/primitives/side-nav'
+ * import { mypageMenuGroups } from '../../components/ec/_mypage-menu-data'
+ *
+ * <SideNav groups={mypageMenuGroups} activeMenu="news" ariaLabel="マイページメニュー" />
+ * ```
+ */
+export declare const mypageMenuGroups: SideNavGroup[];

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

@@ -0,0 +1,31 @@
+/**
+ * AdminLayout — 管理画面の共通レイアウト
+ *
+ * 本番の shop_layout.ctp を参考に、Header + SideNav + Main Content の構造を再現。
+ * 参照元:
+ * - admin-test-htdocs/app/views/layouts/shop_layout.ctp
+ * - admin-test-htdocs/app/views/elements/shop_layout/header.ctp
+ * - admin-test-htdocs/app/views/elements/shop_layout/side_menu.ctp
+ * - CSS: admin_shops/layout/nav_layout.css
+ */
+import * as React from "react";
+export declare function MissingComponent({ name, children, className, }: {
+    name: string;
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface AdminLayoutProps {
+    children: React.ReactNode;
+    /** 現在アクティブなナビアイテム */
+    activeNav?: string;
+    /** ページタイトル（ヘッダー表示用） */
+    title?: string;
+    /** パンくず */
+    breadcrumbs?: {
+        label: string;
+        href?: string;
+    }[];
+    /** ショップ名 */
+    shopName?: string;
+}
+export declare function AdminLayout({ children, activeNav, title, breadcrumbs, shopName, }: AdminLayoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+export interface AnniversaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 対象者の名前（例: "山田 花子"） */
+    name: string;
+    /** 対象者との関係（例: "妻", "友人"） */
+    relation: string;
+    /** 記念日の種類（例: "誕生日", "結婚記念日"） */
+    type: string;
+    /** 記念日の日付表示（例: "06/15"） */
+    date: string;
+    /** 記念日までの残り日数 */
+    daysLeft: number;
+    /** メモ（任意） */
+    memo?: string;
+    /** 編集リンクの href */
+    editHref?: string;
+    /** 編集ボタンのクリックハンドラ（editHref が無い場合に使用） */
+    onEdit?: () => void;
+}
+/**
+ * 記念日カード / AnniversaryCard
+ *
+ * マイページの記念日一覧で使用する個別の記念日表示カード。
+ * 本番の `.p-mypage-anniversary-card` 構造に準拠。
+ *
+ * ### インポート
+ * ```tsx
+ * import { AnniversaryCard } from '../../components/ec/anniversary-card'
+ * ```
+ *
+ * ### Props（主要なもの）
+ * | Prop | 型 | デフォルト | 説明 |
+ * |------|-----|-----------|------|
+ * | name | string | — | 対象者の名前 |
+ * | relation | string | — | 対象者との関係 |
+ * | type | string | — | 記念日の種類 |
+ * | date | string | — | 記念日の日付表示 |
+ * | daysLeft | number | — | 残り日数 |
+ * | memo | string | — | メモ（任意） |
+ * | editHref | string | — | 編集リンクの href |
+ * | onEdit | () => void | — | 編集ボタンのクリックハンドラ |
+ *
+ * ### AI 向け使用ルール
+ * - マイページの記念日一覧タブ内で使用する
+ * - `daysLeft` が小さいほど直近の記念日であることを示す
+ * - `editHref` を渡すと編集ボタンが `<a>` リンクになる
+ * - `onEdit` を渡すと編集ボタンが `<button>` になる
+ */
+declare function AnniversaryCard({ name, relation, type, date, daysLeft, memo, editHref, onEdit, className, ...props }: AnniversaryCardProps): import("react/jsx-runtime").JSX.Element;
+export { AnniversaryCard };

package/dist/types/components/ec/cake-logo.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface CakeLogoProps extends React.SVGAttributes<SVGSVGElement> {
+    /** ロゴの高さ（px） */
+    height?: number;
+    /** カラー（デフォルト: 現在のテキスト色） */
+    color?: string;
+}
+/**
+ * Cake.jp ロゴ（本番SVG準拠）
+ *
+ * Cake.jp 本番サイトのヘッダーから取得した正確なSVGパスデータを使用。
+ * viewBox="0 0 568 108" のワードマーク。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - ヘッダーロゴには `<CakeLogo height={24} />` を使用
+ * - フッターでは `<CakeLogo height={20} color="var(--Text-Low-Emphasis)" />`
+ * - ロゴの色はデフォルトで `currentColor`（親のテキスト色を継承）
+ * - ロゴの比率は固定（width は height から自動計算）
+ */
+declare function CakeLogo({ height, color, className, ...props }: CakeLogoProps): import("react/jsx-runtime").JSX.Element;
+export { CakeLogo };

package/dist/types/components/ec/chart-controls.d.ts

@@ -0,0 +1,16 @@
+export type ChartGranularity = "daily" | "weekly" | "monthly";
+export type ChartPeriod = "3M" | "6M" | "12M" | "all";
+export interface ChartControlsProps {
+    /** 粒度 */
+    granularity?: ChartGranularity;
+    onGranularityChange?: (v: ChartGranularity) => void;
+    /** 期間 */
+    period?: ChartPeriod;
+    onPeriodChange?: (v: ChartPeriod) => void;
+    /** 前期比を重ねる */
+    showPrevious?: boolean;
+    onShowPreviousChange?: (v: boolean) => void;
+    /** 追加クラス */
+    className?: string;
+}
+export declare function ChartControls({ granularity, onGranularityChange, period, onPeriodChange, showPrevious, onShowPreviousChange, className, }: ChartControlsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ec/countdown-timer.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export interface CountdownTimerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** カウントダウンの状態 */
+    variant?: "before" | "active" | "ended";
+    /** 残り時間（秒） */
+    remainingSeconds?: number;
+    /** ラベル（variant に応じてデフォルトあり） */
+    label?: string;
+}
+/**
+ * カウントダウンタイマー
+ *
+ * タイムセールの残り時間を表示。
+ * Figma: _カウントダウン表示
+ *
+ * ### AI 向け使用ルール
+ *
+ * - タイムセール開催前: `<CountdownTimer variant="before" remainingSeconds={3600} />`
+ * - タイムセール開催中: `<CountdownTimer variant="active" remainingSeconds={3600} />`
+ * - タイムセール終了後: `<CountdownTimer variant="ended" />`
+ * - remainingSeconds を渡すと自動で HH:MM:SS 形式に変換
+ */
+declare function CountdownTimer({ variant, remainingSeconds, label, className, ...props }: CountdownTimerProps): import("react/jsx-runtime").JSX.Element;
+export { CountdownTimer };

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+export interface CouponCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** クーポンタイトル（例: "【Example Patisserie】10%OFF" or "10%OFF"） */
+    title: string;
+    /** クーポンの説明（例: "最低注文金額：3,000円 / 有効期限：2024年2月5日(月)11:59"） */
+    description?: string;
+    /** 商品画像URL（vertical のみ） */
+    imageUrl?: string;
+    /** 商品画像alt */
+    imageAlt?: string;
+    /** ショップサムネイルURL（画像左下に重ねて表示、vertical のみ） */
+    shopThumbnailUrl?: string;
+    /** ショップ名（サムネイルのalt） */
+    shopName?: string;
+    /** クーポンの状態 */
+    status?: "available" | "acquiring" | "acquired" | "unavailable";
+    /** 獲得ボタンのクリックハンドラ */
+    onAcquire?: () => void;
+    /** 獲得ボタンのラベル */
+    acquireLabel?: string;
+    /** レイアウト（vertical: 縦型カード、horizontal: SP横長） */
+    layout?: "vertical" | "horizontal";
+    /** 限定ラベル（例: "先着200枚"） — horizontal のみ */
+    limitLabel?: string;
+    /** 適用条件テキスト（例: "スイーツ限定で適用"） — horizontal のみ */
+    conditionText?: string;
+    /** 有効期限テキスト（例: "有効期限：2023/5/11 （利用条件あり）"） — horizontal のみ */
+    expiryText?: string;
+}
+/**
+ * クーポンカード
+ *
+ * Cake.jp のクーポン表示用カード。
+ *
+ * ### レイアウト
+ * - **vertical**: 縦型カード（画像 → タイトル → 点線 → CTAボタン）
+ * - **horizontal**: SP横長カード（左: 割引情報 | 点線区切り | 右: 獲得ボタン）
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 縦型: `<CouponCard layout="vertical" title="【Example Patisserie】10%OFF" />`
+ * - SP横長: `<CouponCard layout="horizontal" title="10%OFF" limitLabel="先着200枚" conditionText="スイーツ限定で適用" expiryText="有効期限：2023/5/11" />`
+ * - 獲得可能: `status="available"`
+ * - 獲得済み: `status="acquired"`
+ */
+declare function CouponCard({ title, description, imageUrl, imageAlt, shopThumbnailUrl, shopName, status, onAcquire, acquireLabel, layout, limitLabel, conditionText, expiryText, className, ...props }: CouponCardProps): import("react/jsx-runtime").JSX.Element;
+export { CouponCard };

package/dist/types/components/ec/delivery-calendar.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+export type DayAvailability = "available" | "unavailable" | "few";
+export interface CalendarDay {
+    /** 日付 */
+    date: Date;
+    /** 予約可否 */
+    availability: DayAvailability;
+}
+export interface DeliveryCalendarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 年 */
+    year: number;
+    /** 月（1-12） */
+    month: number;
+    /** 日ごとの予約状況 */
+    days: CalendarDay[];
+    /** 月変更ハンドラ */
+    onMonthChange?: (year: number, month: number) => void;
+    /** 日付選択ハンドラ */
+    onDaySelect?: (date: Date) => void;
+    /** 選択中の日付 */
+    selectedDate?: Date;
+}
+/**
+ * 配送カレンダー
+ *
+ * 配送可能日をカレンダー形式で表示。
+ * Figma: Input/calendar, _monthly
+ *
+ * ### AI 向け使用ルール
+ *
+ * - `<DeliveryCalendar year={2024} month={1} days={[...]} />`
+ * - ○ = 配送可、△ = 残りわずか、× = 配送不可
+ * - 日曜・土曜は色分け（赤・青）
+ */
+declare function DeliveryCalendar({ year, month, days, onMonthChange, onDaySelect, selectedDate, className, ...props }: DeliveryCalendarProps): import("react/jsx-runtime").JSX.Element;
+export { DeliveryCalendar };

package/dist/types/components/ec/order-section.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+export interface OrderSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** セクションタイトル */
+    title: string;
+    /** 入力ステータス */
+    status?: "default" | "empty" | "error";
+    /** セクション概要テキスト */
+    summary?: string;
+    /** 編集ボタンのラベル */
+    editLabel?: string;
+    /** 編集ボタンのハンドラ */
+    onEdit?: () => void;
+    /** 子要素（セクション内容） */
+    children?: React.ReactNode;
+}
+/**
+ * 注文セクション
+ *
+ * 購入確認画面の各セクション（注文者、お届け先、支払い方法等）。
+ * Figma: 注文内容の確認画面セクション
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 入力済み: `<OrderSection title="注文者" status="default"><p>山田太郎</p></OrderSection>`
+ * - 未入力: `<OrderSection title="お届け先" status="empty" />`
+ * - エラー: `<OrderSection title="支払い方法" status="error" />`
+ */
+declare function OrderSection({ title, status, summary, editLabel, onEdit, children, className, ...props }: OrderSectionProps): import("react/jsx-runtime").JSX.Element;
+export { OrderSection };

package/dist/types/components/ec/order-summary.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+export interface OrderSummaryLineItem {
+    /** 項目ラベル（例: "商品合計（4点）"） */
+    label: string;
+    /** 金額テキスト（例: "¥17,740"）or ReactNode */
+    value: React.ReactNode;
+}
+export interface OrderSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 明細行（小計・送料・クーポンなど） */
+    lineItems?: OrderSummaryLineItem[];
+    /** 合計ラベル（デフォルト: "合計（税込）"） */
+    totalLabel?: string;
+    /** 合計金額テキスト */
+    totalValue: string;
+    /** CTAボタンテキスト */
+    ctaLabel: string;
+    /** CTAボタンクリック */
+    onCTAClick?: () => void;
+    /** セキュリティバッジを表示（チェックアウト画面用） */
+    showSecurityBadge?: boolean;
+    /** セキュリティバッジのテキスト */
+    securityText?: string;
+    /** fixed レイアウトを無効化（インライン表示用） */
+    disableFixed?: boolean;
+    /** CTAボタンを無効化 */
+    ctaDisabled?: boolean;
+}
+/**
+ * 注文サマリー
+ *
+ * カート・チェックアウトで使われる合計金額＋CTAボタン。
+ * 画面下部に固定表示するデフォルト、またはインライン表示が可能。
+ * セキュリティバッジ表示にも対応。
+ */
+declare function OrderSummary({ className, lineItems, totalLabel, totalValue, ctaLabel, onCTAClick, showSecurityBadge, securityText, disableFixed, ctaDisabled, ...props }: OrderSummaryProps): import("react/jsx-runtime").JSX.Element;
+export { OrderSummary };

package/dist/types/components/ec/payment-method.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+export type CreditCardBrand = "visa" | "mastercard" | "jcb" | "amex" | "diners";
+export interface CreditCardIconProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt"> {
+    brand: CreditCardBrand;
+}
+/**
+ * クレジットカードブランドアイコン
+ *
+ * 本番CDN（assets.cake.jp）の公式ブランドロゴ画像を使用。
+ * 本番CSSの `.c-card-logo` と同じ `height: 30px; width: auto` を適用。
+ * Figma: creditcard
+ */
+declare function CreditCardIcon({ brand, className, ...props }: CreditCardIconProps): import("react/jsx-runtime").JSX.Element;
+export interface PaymentMethodDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 支払い方法名（例: "クレジットカード"） */
+    method: string;
+    /** カードブランド */
+    cardBrand?: CreditCardBrand;
+    /** カード末尾4桁 */
+    cardLast4?: string;
+    /** 有効期限 */
+    cardExpiry?: string;
+    /** 登録状態 */
+    status?: "registered" | "unregistered" | "expired";
+    /** 対応ブランド一覧（支払い方法の説明用） */
+    acceptedBrands?: CreditCardBrand[];
+}
+/**
+ * 支払い方法表示
+ *
+ * クレジットカード情報やその他の支払い方法の表示。
+ * Figma: 支払い方法, creditcard
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 登録済み: `<PaymentMethodDisplay method="クレジットカード" cardBrand="visa" cardLast4="1234" status="registered" />`
+ * - 未登録: `<PaymentMethodDisplay method="クレジットカード" status="unregistered" />`
+ * - 対応ブランド表示: `<PaymentMethodDisplay acceptedBrands={["visa","mastercard","jcb","amex","diners"]} />`
+ */
+declare function PaymentMethodDisplay({ method, cardBrand, cardLast4, cardExpiry, status, acceptedBrands, className, ...props }: PaymentMethodDisplayProps): import("react/jsx-runtime").JSX.Element;
+export { PaymentMethodDisplay, CreditCardIcon };

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

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { type TagProps } from "../../components/primitives/tag";
+export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 商品名 */
+    name: string;
+    /** 商品画像URL */
+    imageUrl: string;
+    /** 商品画像alt */
+    imageAlt?: string;
+    /** 金額（税込） */
+    price: number;
+    /** 元の金額（割引表示用） */
+    originalPrice?: number;
+    /** 評価値 (0〜5) */
+    rating?: number;
+    /** レビュー件数 */
+    reviewCount?: number;
+    /** ショップ名 */
+    shopName?: string;
+    /** ショップページURL（指定するとショップ名がリンク化、hover時アンダーライン） */
+    shopHref?: string;
+    /** タグリスト（配送方法・キャンペーンなど） */
+    tags?: Array<{
+        label: string;
+        variant?: TagProps["variant"];
+    }>;
+    /** お気に入り状態 */
+    isFavorite?: boolean;
+    /** お気に入りボタン押下時 */
+    onFavoriteToggle?: () => void;
+    /** カードクリック時 */
+    onCardClick?: () => void;
+    /** 商品リンクURL */
+    href?: string;
+    /** ランキング順位（1〜表示） */
+    ranking?: number;
+    /** 最短お届け日（例: "3/19"） */
+    deliveryDate?: string;
+    /** カードの向き */
+    orientation?: "vertical" | "horizontal";
+    /** 割引率を画像に重ねて表示するか（originalPrice設定時に自動計算、falseで非表示） */
+    showDiscountBadge?: boolean;
+    /** 「カートに追加」ボタンを表示（verticalのみ） */
+    showCartButton?: boolean;
+    /** カート追加ボタンクリック時 */
+    onCartAdd?: () => void;
+    /** カートボタンのラベル */
+    cartButtonLabel?: string;
+}
+/**
+ * ブックマーク（しおり/リボン）アイコン — 本番 .m-bookmark-button 準拠
+ * 上が開いた長方形、下がV字に切れ込むリボン型。
+ */
+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, rating, reviewCount, shopName, shopHref, 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

@@ -0,0 +1,56 @@
+import { type SectionHeaderSize } from "../../components/primitives/section-header";
+import { type ProductCardProps } from "../../components/ec/product-card";
+export interface ProductCarouselProps {
+    /** セクションタイトル */
+    title: string;
+    /** サブタイトル */
+    subtitle?: string;
+    /** セクション説明文（タイトル下に表示、コラボ・特集の説明等） */
+    description?: string;
+    /** セクション画像URL（コラボロゴ、ブランドイメージ等。指定時はヘッダー左に画像表示） */
+    sectionImage?: string;
+    /** セクション画像のalt */
+    sectionImageAlt?: string;
+    /** セクション画像のリンクURL */
+    sectionImageHref?: string;
+    /** 「もっと見る」リンクURL */
+    moreHref?: string;
+    /** 「もっと見る」ラベル */
+    moreLabel?: string;
+    /** もっと見るクリック時 */
+    onMoreClick?: () => void;
+    /** SectionHeader size */
+    headerSize?: SectionHeaderSize;
+    /** 商品リスト */
+    products: ProductCardProps[];
+    /** カードの幅 (default: "sm"=160px, "md"=200px, "lg"=240px, "responsive"=本番準拠レスポンシブ) */
+    cardSize?: "sm" | "md" | "lg" | "responsive";
+    /** ランキング表示（true の場合 index+1 が ranking に渡される） */
+    showRanking?: boolean;
+    /** カートボタン表示 */
+    showCartButton?: boolean;
+    /** 追加クラス */
+    className?: string;
+}
+/**
+ * 商品カルーセルコンポーネント — Atomic Design Level 3 Organism
+ *
+ * SectionHeader + 横スクロール ProductCard 行を組み合わせたセクション。
+ * トップページで最も頻出するパターン（ランキング、新着、おすすめ等）。
+ *
+ * ### インポート
+ * ```tsx
+ * import { ProductCarousel } from '../../components/ec/product-carousel'
+ * ```
+ *
+ * ### AI 向け使用ルール
+ * - トップページの各商品セクションに使う
+ * - `showRanking` で 1〜N のランキングバッジを自動付与
+ * - `cardSize` でカード幅を調整（デフォルト sm=160px）
+ * - `showCartButton` でカート追加ボタンを表示
+ * - `sectionImage` でコラボ・ブランドロゴ等の画像をヘッダー左に表示
+ * - `description` でセクション説明文を追加（コラボ紹介、特集説明等）
+ * - 横パディングは SectionHeader（px-4）とスクロールコンテナ（px-4）が持つ
+ */
+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;
+export { ProductCarousel };

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+export type ProductCTAVariant = "add-to-cart" | "resale" | "timesale" | "not-logged-in" | "backorder" | "out-of-stock-waiting" | "pre-sale" | "countdown" | "sold-out" | "timesale-ended";
+export interface ProductCTAProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** CTAバリエーション */
+    variant?: ProductCTAVariant;
+    /** 価格表示 */
+    price?: string;
+    /** カートに追加のハンドラ */
+    onAddToCart?: () => void;
+    /** ブックマーク追加/解除のハンドラ */
+    onBookmark?: () => void;
+    /** ブックマーク済み状態 */
+    isBookmarked?: boolean;
+    /** カウントダウンテキスト（variant="countdown"用） */
+    countdownText?: string;
+    /** 再販通知テキスト（variant="resale"用） */
+    resaleText?: string;
+}
+/**
+ * 商品詳細CTA
+ *
+ * 商品詳細ページ下部のカートボタン。状態に応じて表示が切り替わる。
+ * Figma: cv - set
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 通常: `<ProductCTA variant="add-to-cart" />`
+ * - タイムセール中: `<ProductCTA variant="timesale" />`
+ * - 完売: `<ProductCTA variant="sold-out" />`
+ * - 未ログイン: `<ProductCTA variant="not-logged-in" />`
+ * - 入荷待ち: `<ProductCTA variant="backorder" />`
+ * - 販売開始前: `<ProductCTA variant="pre-sale" />`
+ */
+declare function ProductCTA({ variant, onAddToCart, onBookmark, isBookmarked, countdownText, resaleText, className, ...props }: ProductCTAProps): import("react/jsx-runtime").JSX.Element;
+export { ProductCTA };

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

@@ -0,0 +1,62 @@
+import * as React from "react";
+export interface ProductDetailBarTab {
+    /** タブラベル（例: "写真"） */
+    label: string;
+    /** スクロール先の要素ID（例: "#detail-slider"） */
+    href: string;
+    /** アクティブ状態 */
+    active?: boolean;
+}
+export interface ProductDetailBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** タブ項目（写真・特徴・商品情報・販売店・口コミ） */
+    tabs: ProductDetailBarTab[];
+    /** 商品名 */
+    productName: string;
+    /** 価格（税込） */
+    price: number;
+    /** セール価格の場合 true（赤文字にする） */
+    isSale?: boolean;
+    /** レビュー平均点 */
+    rating?: number;
+    /** レビュー件数 */
+    reviewCount?: number;
+    /** CTAボタンのラベル */
+    ctaLabel?: string;
+    /** CTAボタンクリック */
+    onCtaClick?: () => void;
+    /** CTAボタンを無効化 */
+    ctaDisabled?: boolean;
+    /** タブクリック */
+    onTabClick?: (tab: ProductDetailBarTab) => void;
+}
+/**
+ * 商品詳細スティッキーバー
+ *
+ * 商品詳細ページで右カラム（購入ボタン）がスクロールで見えなくなった時に
+ * ヘッダー下部に表示するPC専用のナビゲーション＋商品概要バー。
+ *
+ * 本番の `.p-item-detail-header` に対応。
+ * Header の `bottomSlot` に渡して使う。
+ *
+ * ### 使い方
+ * ```tsx
+ * <Header
+ *   variant="logo"
+ *   actions={[...]}
+ *   bottomSlot={
+ *     <ProductDetailBar
+ *       tabs={[
+ *         { label: "写真", href: "#slider", active: true },
+ *         { label: "特徴", href: "#features" },
+ *       ]}
+ *       productName="苺のデコレーションケーキ 5号"
+ *       price={4980}
+ *       rating={4.89}
+ *       reviewCount={567}
+ *     />
+ *   }
+ * />
+ * ```
+ */
+declare function ProductDetailBar({ className, tabs, productName, price, isSale, rating, reviewCount, ctaLabel, onCtaClick, ctaDisabled, onTabClick, ...props }: ProductDetailBarProps): import("react/jsx-runtime").JSX.Element;
+export { ProductDetailBar };