@cakejp/design-system 0.3.0

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

@@ -0,0 +1,81 @@
+import * as React from "react";
+export interface FooterLink {
+    label: string;
+    href: string;
+    /** 外部リンクかどうか（target="_blank" を付与） */
+    external?: boolean;
+}
+export interface FooterLinkGroup {
+    /** グループタイトル */
+    title: string;
+    /** リンクリスト */
+    links: FooterLink[];
+    /** サブグループ（「法人のお客様へ」内の「催事・販売情報」「マガジン」等） */
+    subGroups?: Array<{
+        title: string;
+        links: FooterLink[];
+    }>;
+}
+export interface FooterPaymentMethod {
+    /** 決済方法名（alt テキスト） */
+    label: string;
+    /** アイコン（ReactNode: img, svg 等） */
+    icon: React.ReactNode;
+}
+export interface FooterTrustBadge {
+    /** バッジ画像/アイコン */
+    icon: React.ReactNode;
+    /** バッジリンク先 */
+    href?: string;
+    /** 説明テキスト */
+    description?: string;
+}
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+    /** リンクグループ（アコーディオン形式で表示） */
+    linkGroups?: FooterLinkGroup[];
+    /** コピーライト表示 */
+    copyright?: string;
+    /** ロゴ（テキストまたはReactNode） */
+    logo?: React.ReactNode;
+    /** ロゴリンク先 */
+    logoHref?: string;
+    /** SNSリンク */
+    socialLinks?: Array<{
+        label: string;
+        href: string;
+        icon: React.ReactNode;
+    }>;
+    /** フッター下部の説明文 */
+    description?: string;
+    /** 決済方法アイコン一覧 */
+    paymentMethods?: FooterPaymentMethod[];
+    /** 信頼バッジ（TRUSTe 等） */
+    trustBadge?: FooterTrustBadge;
+    /** フッター下部の補助リンク（特定商取引法、プライバシーポリシー等） */
+    bottomLinks?: FooterLink[];
+}
+/**
+ * フッターコンポーネント
+ *
+ * Cake.jp 本番サイトのフッターを再現。
+ * モバイルではアコーディオン形式のリンクグループ、SNSアイコン、
+ * 決済方法、信頼バッジ、ロゴ・説明文・コピーライトを表示。
+ *
+ * 本番テンプレート参照:
+ * - `app/views/elements/v2/footer/footer.ctp`（リンクグループ + SNS）
+ * - `app/views/elements/v2/footer/footer_bottom.ctp`（ロゴ + 説明 + コピーライト）
+ *
+ * ### AI 向け使用ルール
+ *
+ * - BottomTabBar の上、ページ最下部に配置
+ * - `linkGroups` でアコーディオン形式のリンクセクションを表示
+ * - `socialLinks` で SNS アイコンリンクを横並び表示
+ * - `paymentMethods` で決済方法アイコンを横並び表示
+ * - `trustBadge` で信頼バッジ（TRUSTe 等）を表示
+ * - `bottomLinks` でフッター下部の補助リンクを表示
+ * - `description` でサイト説明文を表示
+ * - `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;
+export { Footer };

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

@@ -0,0 +1,46 @@
+/**
+ * ## FormField / フォームフィールド
+ *
+ * ラベル + 必須/任意バッジ + 説明文 + 入力要素 のセット。
+ * 管理画面の c-form-header パターンを DS コンポーネント化。
+ *
+ * ### インポート
+ * ```tsx
+ * import { FormField } from '../../components/primitives/form-field'
+ * ```
+ *
+ * ### Props
+ * | Prop | 型 | デフォルト | 説明 |
+ * |------|-----|-----------|------|
+ * | label | string | — | フィールドラベル |
+ * | required | boolean | false | 必須バッジ表示 |
+ * | optional | boolean | false | 任意バッジ表示 |
+ * | description | string | — | 補足テキスト |
+ * | error | string | — | エラーメッセージ |
+ * | children | ReactNode | — | 入力要素 |
+ *
+ * ### AI 向け使用ルール
+ * - フォームの各入力欄に必ず使用する
+ * - Label + Input を直接書かず、このコンポーネントでラップする
+ * - 管理画面・フロントどちらでも使用可
+ */
+import * as React from "react";
+export interface FormFieldProps {
+    /** フィールドラベル */
+    label: string;
+    /** 必須バッジを表示 */
+    required?: boolean;
+    /** 任意バッジを表示 */
+    optional?: boolean;
+    /** 補足テキスト */
+    description?: string;
+    /** エラーメッセージ */
+    error?: string;
+    /** htmlFor 属性 */
+    htmlFor?: string;
+    /** 入力要素 */
+    children: React.ReactNode;
+    /** 追加クラス */
+    className?: string;
+}
+export declare function FormField({ label, required, optional, description, error, htmlFor, children, className, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,69 @@
+import * as React from "react";
+export interface HeaderAction {
+    /** アイコン要素 */
+    icon: React.ReactNode;
+    /** アクセシビリティラベル */
+    label: string;
+    /** クリックハンドラ */
+    onClick?: () => void;
+    /** バッジ数（通知やカート件数） */
+    badge?: React.ReactNode;
+}
+export interface HeaderNavItem {
+    /** 表示ラベル */
+    label: string;
+    /** リンク先 */
+    href?: string;
+    /** クリックハンドラ */
+    onClick?: () => void;
+    /** アクティブ状態 */
+    isActive?: boolean;
+}
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * ヘッダーのレイアウトバリエーション
+     * - `logo` : ロゴ＋右側アクションボタン（トップ・一覧ページ用）
+     * - `logo-center` : ロゴ中央配置（決済・申し込みページ用）
+     * - `back` : 戻るボタン＋中央タイトル（サブページ用）
+     * - `back-search` : 戻るボタン＋検索バー（検索ページ用）
+     */
+    variant?: "logo" | "logo-center" | "back" | "back-search";
+    /**
+     * ロゴ表示（variant="logo" / "logo-center" のみ）。
+     * 文字列 or ReactNode（CakeLogo, jobboard ロゴ等を渡す）
+     */
+    logo?: React.ReactNode;
+    /** ページタイトル（variant="back"のみ） */
+    title?: string;
+    /** 戻るボタンのクリックハンドラ */
+    onBack?: () => void;
+    /** 戻るボタンのラベル */
+    backLabel?: string;
+    /** 右側アクションボタン群（variant="logo"で使用） */
+    actions?: HeaderAction[];
+    /**
+     * PC（@[768px]+）でヘッダー内インライン表示するグローバルナビ項目。
+     * SP では非表示。本番の "ケーキ / スイーツ / ランキング…" メニューに対応。
+     */
+    navItems?: HeaderNavItem[];
+    /** 右側に配置するカスタム要素（variant="back"で使用） */
+    rightSlot?: React.ReactNode;
+    /** 検索バーなど中央に配置するカスタム要素（variant="back-search"で使用） */
+    centerSlot?: React.ReactNode;
+    /**
+     * ヘッダー下部に追加表示するスロット。
+     * 商品詳細のスティッキーバー（ProductDetailBar）等を配置する。
+     * ヘッダーの border-b の内側に描画される。
+     */
+    bottomSlot?: React.ReactNode;
+    /** sticky 配置を無効化 */
+    disableSticky?: boolean;
+}
+/**
+ * ページヘッダー
+ *
+ * アプリ全体で使われるヘッダーの3パターンを1コンポーネントで提供。
+ * ロゴ＋アクション、戻るボタン＋タイトル、戻るボタン＋検索の3バリエーション。
+ */
+declare function Header({ className, variant, logo, title, onBack, backLabel, actions, navItems, rightSlot, centerSlot, bottomSlot, disableSticky, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export { Header };

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+export interface ImageCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** スライド画像リスト */
+    images: Array<{
+        src: string;
+        alt: string;
+        href?: string;
+    }>;
+    /** アスペクト比 */
+    aspectRatio?: "square" | "video" | "banner" | "ogp";
+    /** ドットインジケーター表示 */
+    showDots?: boolean;
+    /** 矢印ナビゲーション表示 */
+    showArrows?: boolean;
+    /** 自動再生（ミリ秒、0で無効） */
+    autoPlay?: number;
+    /**
+     * SP: 隣スライドをのぞかせる（peek）表示。
+     * true にすると各スライドが `calc(100% - 48px)` 幅になり、
+     * 右端に次スライドが見える。PC (@md:) は常に全幅。
+     */
+    peek?: boolean;
+    /**
+     * PC（960px+）での同時表示枚数 (default: 1)
+     * 3 を指定すると Figma "big slider" — 3枚横並び表示になる
+     * SP は常に peek/1枚表示のまま
+     */
+    pcSlidesPerView?: 1 | 2 | 3;
+    /**
+     * タブレット（768-959px）で centeredSlides 表示。
+     * 本番MV slider のタブレット設定（slidesPerView: 768/426≈1.803, centeredSlides: true,
+     * spaceBetween: 16）を CSS scroll-snap で再現する。
+     * SP は全幅1枚のまま、PC（960px+）は pcSlidesPerView に従う。
+     */
+    centeredSlides?: boolean;
+}
+/**
+ * 画像カルーセル — Figma Carousel 準拠
+ *
+ * CSS scroll-snap ベースのカルーセル。@container クエリでレスポンシブ切替。
+ * - SP（狭幅）: スワイプ操作 + ドットインジケーター、左右余白付き
+ * - PC（@md: 以上）: 左右矢印ボタン（ホバーで出現）、ドット非表示、余白なし
+ *
+ * ### AI 向け使用ルール
+ *
+ * - ヒーローバナー: `<ImageCarousel aspectRatio="banner" />`
+ * - 商品画像: `<ImageCarousel aspectRatio="square" />`
+ * - 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;
+export { ImageCarousel };

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+export interface ImageGalleryProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 画像URL配列 */
+    images: string[];
+    /** 画像のalt（省略時は "画像 N" ） */
+    alts?: string[];
+    /** アスペクト比 */
+    aspectRatio?: "square" | "4:3" | "16:9" | "auto";
+    /** サムネイル表示 */
+    showThumbnails?: boolean;
+    /** ドット表示 */
+    showDots?: boolean;
+    /**
+     * レイアウトバリアント
+     * - `default`: サムネイル下部横並び（SP向け）
+     * - `pc-detail`: サムネイル左側縦並び（PC商品詳細向け、本番 p-detail-slider 準拠）
+     */
+    layout?: "default" | "pc-detail";
+}
+/**
+ * イメージギャラリー
+ *
+ * 商品画像の閲覧。メイン画像 + サムネイル or ドット。
+ * Figma: _kv, Image
+ *
+ * ### AI 向け使用ルール
+ *
+ * - サムネイル付き: `<ImageGallery images={[...]} showThumbnails />`
+ * - ドット付き: `<ImageGallery images={[...]} showDots />`
+ * - 商品詳細（SP）: square アスペクト比、サムネイル付き
+ * - 商品詳細（PC）: `layout="pc-detail"` でサムネイル左側縦並び
+ * - バナー: 16:9 アスペクト比、ドット付き
+ */
+declare function ImageGallery({ images, alts, aspectRatio, showThumbnails, showDots, layout, className, ...props }: ImageGalleryProps): import("react/jsx-runtime").JSX.Element;
+export { ImageGallery };

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

@@ -0,0 +1,19 @@
+export interface ImageUploaderImage {
+    src: string;
+    alt: string;
+}
+export interface ImageUploaderProps {
+    /** 現在の画像一覧 */
+    images?: ImageUploaderImage[];
+    /** 追加ボタンクリック */
+    onAdd?: () => void;
+    /** 削除ボタンクリック */
+    onRemove?: (index: number) => void;
+    /** 最大画像数 */
+    maxImages?: number;
+    /** グリッドカラム数 */
+    columns?: number;
+    /** 追加クラス */
+    className?: string;
+}
+export declare function ImageUploader({ images, onAdd, onRemove, maxImages, columns, className, }: ImageUploaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+/**
+ * ## KebabMenu / ケバブメニュー
+ *
+ * テーブル行末等に表示する「…」メニュー。
+ * 本番の p-kebab-overlay パターンを DS コンポーネント化。
+ *
+ * ### インポート
+ * ```tsx
+ * import { KebabMenu } from '../../components/primitives/kebab-menu'
+ * ```
+ *
+ * ### Props
+ * | Prop | 型 | デフォルト | 説明 |
+ * |------|-----|-----------|------|
+ * | items | { label, icon?, onClick, destructive? }[] | — | メニュー項目 |
+ *
+ * ### AI 向け使用ルール
+ * - テーブル行のアクション列に使用
+ * - DropdownMenu を内部で利用
+ */
+import * as React from "react";
+export interface KebabMenuItem {
+    /** メニューラベル */
+    label: string;
+    /** アイコン */
+    icon?: React.ReactNode;
+    /** クリック時の処理 */
+    onClick?: () => void;
+    /** 破壊的操作（赤文字） */
+    destructive?: boolean;
+}
+export interface KebabMenuProps {
+    /** メニュー項目 */
+    items: KebabMenuItem[];
+    /** 追加クラス */
+    className?: string;
+}
+export declare function KebabMenu({ items, className }: KebabMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,60 @@
+import * as React from "react";
+export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** メインタイトル */
+    title: string;
+    /** キャプション（サブテキスト） */
+    caption?: string;
+    /**
+     * 右側コンテンツの種類
+     * - `arrow-right` : 右矢印（デフォルト・リンク行）
+     * - `arrow-down` : 下矢印（アコーディオン）
+     * - `text` : テキスト値
+     * - `badge` : バッジ（未読数など）
+     * - `toggle` : スイッチ
+     * - `none` : なし
+     */
+    rightType?: "arrow-right" | "arrow-down" | "text" | "badge" | "toggle" | "none";
+    /** `rightType="text"` 時に表示するテキスト */
+    rightText?: string;
+    /** `rightType="badge"` 時に表示するバッジ数 */
+    badgeCount?: number;
+    /** `rightType="toggle"` 時のトグル値 */
+    toggleChecked?: boolean;
+    /** トグル変更ハンドラ */
+    onToggleChange?: (checked: boolean) => void;
+    /** 左側アイコン（ReactNode） */
+    leftIcon?: React.ReactNode;
+    /** 左側画像URL */
+    leftImageUrl?: string;
+    /**
+     * 行の高さ
+     * - `"sm"` : 44px（テキストのみ）
+     * - `"md"` : 56px（キャプション付き）
+     * - `"lg"` : 64px（アイコン/画像付き）
+     */
+    size?: "sm" | "md" | "lg";
+    /** 選択状態（背景色変化） */
+    selected?: boolean;
+    /** ボーダー表示 */
+    showBorder?: boolean;
+    /** バッジドット（64px のみ、未読通知） */
+    showBadgeDot?: boolean;
+    /** リンク先（指定すると `<a>` でラップ） */
+    href?: string;
+}
+/**
+ * リストアイテム — Figma List/Item 準拠
+ *
+ * マイページ・設定画面などのメニュー行コンポーネント。
+ * 右側に矢印・テキスト・バッジ・トグルを配置できる。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 基本のナビ行: `<ListItem title="マイページトップ" href="/mypage/" />`
+ * - キャプション付き: `<ListItem title="お名前" caption="山田 太郎" size="md" />`
+ * - アイコン付き: `<ListItem title="注文履歴" leftIcon={<Icon />} size="lg" />`
+ * - トグル行: `<ListItem title="通知設定" rightType="toggle" toggleChecked={true} />`
+ * - テキスト値付き: `<ListItem title="言語" rightType="text" rightText="日本語" />`
+ */
+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;
+export { ListItem };

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

@@ -0,0 +1,75 @@
+import * as React from "react";
+export interface MenuSection {
+    /** セクションタイトル */
+    title?: string;
+    /** セクションタイトルのアイコン（ReactNode） */
+    icon?: React.ReactNode;
+    /** メニューアイテム群 */
+    items: MenuItem[];
+    /** 「すべて表示」で展開されるメニューアイテム群 */
+    itemsExtra?: MenuItem[];
+    /** セクション上部にボーダーを表示するか */
+    border?: boolean;
+}
+export interface MenuItem {
+    /** アイコン（ReactNode） — アイコンフォントや SVG を渡す */
+    icon?: React.ReactNode;
+    /** サムネイル画像URL（カテゴリメニュー用、36px 正方形） */
+    thumb?: string;
+    /** ラベル */
+    label: string;
+    /** リンク先 */
+    href?: string;
+    /** クリックハンドラ */
+    onClick?: () => void;
+    /** バッジテキスト */
+    badge?: string;
+    /** サブテキスト */
+    subText?: string;
+    /** サブメニューがあるか（矢印アイコンを表示） */
+    hasChildren?: boolean;
+}
+export interface MenuBanner {
+    /** バナー画像URL */
+    imageUrl: string;
+    /** バナーのalt */
+    alt: string;
+    /** リンク先 */
+    href?: string;
+}
+export interface MenuDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** ユーザー名（ログイン時） */
+    userName?: string;
+    /** ログイン状態 */
+    isLoggedIn?: boolean;
+    /** ログイン・新規会員登録リンクを非表示にする（ガイドサイドバーなど認証不要な文脈で使用） */
+    hideLoginLink?: boolean;
+    /** メニューセクション群 */
+    sections: MenuSection[];
+    /** バナー群 */
+    banners?: MenuBanner[];
+    /** 閉じるハンドラ */
+    onClose?: () => void;
+    /** ログインボタンのハンドラ */
+    onLogin?: () => void;
+    /** ログインリンクのhref（デフォルト: /security/login_link/） */
+    loginHref?: string;
+}
+/**
+ * メニュードロワー
+ *
+ * ハンバーガーメニューの中身。本番サイドナビと同じ構造。
+ * Figma: Menu - Contents
+ *
+ * ### AI 向け使用ルール
+ *
+ * - ログイン時: `<MenuDrawer isLoggedIn userName="田中花子" sections={[...]} />`
+ * - 未ログイン: `<MenuDrawer isLoggedIn={false} sections={[...]} />`
+ * - Drawer コンポーネントの中に配置して使用
+ * - セクションの `border` を true にするとセクション上部に区切り線を表示
+ * - アイテムの `hasChildren` を true にすると右矢印（ドリルダウン）を表示
+ * - カテゴリ系アイテムは `thumb` にサムネイル画像URLを指定
+ * - `itemsExtra` は「すべて表示」で展開されるアイテム群
+ */
+declare function MenuDrawer({ userName, isLoggedIn, hideLoginLink, sections, banners, onClose, onLogin, loginHref, className, ...props }: MenuDrawerProps): import("react/jsx-runtime").JSX.Element;
+export { MenuDrawer };

package/dist/types/components/primitives/notification-badge.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * サイズは dot/number/multi-digit で動的に決まるため、
+ * CVA では color のみ管理し、サイズは条件分岐で適用する。
+ */
+declare const notificationBadgeVariants: (props?: {
+    color?: "red" | "green";
+    size?: "sm" | "md";
+} & import("class-variance-authority/types").ClassProp) => string;
+export interface NotificationBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof notificationBadgeVariants> {
+    /** バッジの数値（省略するとドットバッジ） */
+    count?: number;
+    /** 最大表示数（超えると "99+" のように表示） */
+    max?: number;
+    /** ドットバッジ（数値なし）として表示 */
+    dot?: boolean;
+    /** バッジを非表示にする */
+    hidden?: boolean;
+}
+/**
+ * 通知バッジコンポーネント
+ *
+ * アイコンに数字バッジ（カート数）やドットバッジ（未読通知）を重ねて表示。
+ * children にアイコンを渡すラッパーパターン。
+ * `count` で数値バッジ（99+で自動切り捨て）、`dot` でドットバッジ。
+ * BottomTabBar 内部でも使用されています。
+ */
+declare function NotificationBadge({ className, children, count, max, dot, hidden, color, size, ...props }: NotificationBadgeProps): import("react/jsx-runtime").JSX.Element;
+export { NotificationBadge, notificationBadgeVariants };

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

@@ -0,0 +1,45 @@
+/**
+ * ## NotificationList / お知らせリスト
+ *
+ * お知らせ・通知の一覧表示。フロント・管理画面共用。
+ *
+ * ### インポート
+ * ```tsx
+ * import { NotificationList } from '../../components/primitives/notification-list'
+ * ```
+ *
+ * ### Props（主要なもの）
+ * | Prop | 型 | デフォルト | 説明 |
+ * |------|-----|-----------|------|
+ * | notifications | NotificationItem[] | — | 通知アイテム |
+ * | variant | "vertical"\|"horizontal" | "vertical" | レイアウト |
+ * | emptyMessage | string | — | 空の場合のメッセージ |
+ *
+ * ### AI 向け使用ルール
+ * - `vertical`: フロントの通知モーダル等（未読ドット + メッセージ上 + 日付下）
+ * - `horizontal`: 管理画面のお知らせセクション等（日付左 + NEW バッジ + タイトル + 矢印）
+ * - 空の場合はベルアイコン + メッセージ表示
+ */
+import * as React from "react";
+export interface NotificationItem {
+    /** 通知ID */
+    id: string;
+    /** 通知テキスト */
+    message: string;
+    /** 日付 */
+    date: string;
+    /** 未読か（vertical: 未読ドット表示、horizontal: NEW バッジ表示） */
+    isUnread?: boolean;
+    /** リンク先 */
+    href?: string;
+}
+export interface NotificationListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 通知リスト */
+    notifications: NotificationItem[];
+    /** レイアウトバリアント */
+    variant?: "vertical" | "horizontal";
+    /** 空の場合のメッセージ */
+    emptyMessage?: string;
+}
+declare function NotificationList({ notifications, variant, emptyMessage, className, ...props }: NotificationListProps): import("react/jsx-runtime").JSX.Element;
+export { NotificationList };

package/dist/types/components/primitives/price-display.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const priceDisplayVariants: (props?: {
+    size?: "sm" | "lg" | "xl" | "md";
+} & import("class-variance-authority/types").ClassProp) => string;
+export interface PriceDisplayProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof priceDisplayVariants> {
+    /** 表示金額（税込） */
+    price: number;
+    /** 上限金額（価格レンジ表示用 — 指定すると "¥2,500〜¥4,000" 形式に） */
+    maxPrice?: number;
+    /** 元の金額（割引表示用 — 指定するとセール表示になる） */
+    originalPrice?: number;
+    /** 「税込」ラベルを表示するか */
+    showTaxLabel?: boolean;
+    /** 通貨記号 */
+    currency?: string;
+}
+/**
+ * 価格表示コンポーネント
+ *
+ * 税込価格を ¥3,980 税込 の形式で表示。
+ * `originalPrice` 指定でセール表示（取消線 + 赤色）に自動切替。
+ * `maxPrice` 指定でレンジ表示（¥2,500〜¥4,000）に自動切替。
+ * スクリーンリーダー用の `aria-label` を自動生成します。
+ *
+ * ### 本番準拠フォーマット
+ *
+ * - 通常: `¥4,980 税込`（括弧なし）
+ * - セール: `¥4,280` (取消線) + `¥2,980 税込` (赤色)
+ * - レンジ: `¥2,500〜¥4,000 税込`
+ */
+declare function PriceDisplay({ className, price, maxPrice, originalPrice, showTaxLabel, currency, size, ...props }: PriceDisplayProps): import("react/jsx-runtime").JSX.Element;
+export { PriceDisplay, priceDisplayVariants };

package/dist/types/components/primitives/progress-steps.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface ProgressStepsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** ステップのラベル一覧 */
+    steps: string[];
+    /** 現在のステップ（0始まり） */
+    currentStep: number;
+    /** 完了済みステップにチェックマークを表示する */
+    showCheckmark?: boolean;
+}
+/**
+ * ステップインジケーターコンポーネント
+ *
+ * チェックアウトフロー（カート → 注文内容 → 確認 → 完了）などの
+ * 段階的なプロセスを視覚的に表現するナビゲーション。
+ *
+ * チェック/番号アイコンとテキストラベルを**縦に積む**レイアウト。
+ * ステップ間はコネクタライン（横線）で接続。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - チェックアウト・会員登録など段階フロー画面で使用
+ * - `currentStep` で現在のステップをハイライト
+ * - 完了済みステップにはチェックマークアイコン
+ * - アクティブ/完了: Brand-Cake-Orange、未到達: Surface-Tertiary
+ */
+declare function ProgressSteps({ className, steps, currentStep, showCheckmark, ...props }: ProgressStepsProps): import("react/jsx-runtime").JSX.Element;
+export { ProgressSteps };