@cakejp/design-system 0.3.0

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg";
+}
+declare function Spinner({ className, size, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export { Spinner };

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+/**
+ * トグルスイッチ（Airbnb風）
+ *
+ * - checked: ダーク背景 + 白丸にチェックマーク
+ * - unchecked: グレー背景 + 白丸
+ * - サイズ: default (32×52px) / sm (24×40px)
+ */
+declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+    size?: "sm" | "default";
+}): import("react/jsx-runtime").JSX.Element;
+export { Switch };

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare const tabsListVariants: (props?: {
+    variant?: "underbar" | "segment";
+    scrollable?: boolean;
+} & 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 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/foundations/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+export { Textarea };

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+/**
+ * ChipGroup / チップグループ
+ *
+ * Figma: ChipGroup (node 14538:1053)
+ *
+ * 横並びのピル型チップで選択肢を切り替えるコンポーネント。
+ * コンテナは水平 flex、gap-1.5 (6px)、py-1.5。
+ * ※ コンテナに横パディング(px-*)は含めない。親要素の px で制御すること。
+ * 各チップは rounded-full、h-9 (36px)、px-3、typo-label-md (14px bold)。
+ */
+declare const toggleGroupVariants: (props?: {
+    width?: "fit" | "full";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare const toggleGroupItemVariants: (props?: {
+    variant?: "default" | "outline";
+    size?: "default" | "sm" | "lg";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function ToggleGroup({ className, variant, size, width, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleGroupVariants> & VariantProps<typeof toggleGroupItemVariants>): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleGroupItemVariants>): import("react/jsx-runtime").JSX.Element;
+export { ToggleGroup, ToggleGroupItem, toggleGroupItemVariants };

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from "radix-ui";
+declare const toggleVariants: (props?: {
+    variant?: "default" | "outline";
+    size?: "default" | "sm" | "lg";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+export { Toggle, toggleVariants };

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/types/components/pages/cake/_mypage-shell.d.ts

@@ -0,0 +1,41 @@
+/**
+ * マイページ共通レイアウトシェル
+ *
+ * 本番の mypage_layout.ctp + menu.ctp 準拠。
+ * マイページ配下のサブページ（注文履歴 / ポイント / 会員情報 / ブックマーク等）で共通利用する。
+ *
+ * ## レイアウト構造
+ *
+ * - **SP**: Header (variant="back") + h1 タイトル + コンテンツ + BottomTabBar
+ * - **PC**: Header (variant="logo") + Breadcrumb + 2カラム (sidebar 256px + main)
+ * - @container クエリ (@md:) でレスポンシブ切替
+ *
+ * ## 適用対象
+ *
+ * ✅ 注文履歴 / ポイント / クーポン / 会員情報 / お届け先 / ブックマーク / 口コミ / 記念日 etc.
+ * ❌ マイページトップ (Dashboard) — メインカラムに白背景を持たず、セクションごとにカード化
+ *
+ * 上記の例外は意図的な別パターンなのでこのシェルを使わない。
+ */
+import React from "react";
+import { type BottomTabBarItem } from "../../../components/primitives/bottom-tab-bar";
+export interface MypageShellBreadcrumb {
+    label: string;
+    href?: string;
+}
+export interface MypageShellProps {
+    /** ページタイトル（SP の h1 + PC の main h1 + 末尾パンくず に使用） */
+    title: string;
+    /** SideNav の activeMenu に渡すキー */
+    activeMenu: string;
+    /** コンテンツ */
+    children: React.ReactNode;
+    /** パンくず（省略時はデフォルト: ホーム > 山田 太郎 さまのマイページ > {title}） */
+    breadcrumbs?: MypageShellBreadcrumb[];
+    /** BottomTabBar items（省略時はデフォルト。isActive 等を渡したい場合はこちら） */
+    bottomNavItems?: BottomTabBarItem[];
+    /** SP の戻るボタン押下時のハンドラ（Header variant="back" に委譲） */
+    onBack?: () => void;
+}
+declare function MypageShell({ title, activeMenu, children, breadcrumbs, bottomNavItems, onBack, }: MypageShellProps): import("react/jsx-runtime").JSX.Element;
+export { MypageShell };

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

@@ -0,0 +1,54 @@
+import { type SectionHeaderSize } from "../../components/primitives/section-header";
+export interface BannerItem {
+    /** バナー画像URL */
+    imageUrl: string;
+    /** 画像alt */
+    alt: string;
+    /** リンクURL */
+    href?: string;
+    /** バナー下のラベル（任意） */
+    label?: string;
+    /** サブラベル（任意） */
+    sublabel?: string;
+}
+export interface BannerCarouselProps {
+    /** セクションタイトル */
+    title: string;
+    /** サブタイトル */
+    subtitle?: string;
+    /** 「もっと見る」リンクURL */
+    moreHref?: string;
+    /** 「もっと見る」ラベル */
+    moreLabel?: string;
+    /** SectionHeader size */
+    headerSize?: SectionHeaderSize;
+    /** バナーリスト */
+    items: BannerItem[];
+    /** バナーのアスペクト比 (default: "16/9") */
+    aspectRatio?: "16/9" | "1/1" | "4/3" | "3/4";
+    /** バナーの幅 (default: "md") sm=48vw, md=70vw, lg=85vw, PC時は固定幅 */
+    bannerSize?: "sm" | "md" | "lg";
+    /** 追加クラス */
+    className?: string;
+}
+/**
+ * バナーカルーセル（Organism）
+ *
+ * 水平スクロール可能なバナー/コンテンツカードの行。
+ * SectionHeader をセクションタイトルとして内包する。
+ * 特集バナー、カテゴリショーケース、マガジン記事などに使用。
+ *
+ * ### インポート
+ * ```tsx
+ * import { BannerCarousel } from '../../components/primitives/banner-carousel'
+ * ```
+ *
+ * ### AI 向け使用ルール
+ * - 特集バナー行: `bannerSize="md"` + `aspectRatio="16/9"`（デフォルト）
+ * - カテゴリアイコン行: `bannerSize="sm"` + `aspectRatio="1/1"`
+ * - 大型プロモーション: `bannerSize="lg"` + `aspectRatio="16/9"`
+ * - `items` 配列に `href` を指定するとリンクカードになる
+ * - SectionHeader は内部で合成される（子として渡さない）
+ */
+declare function BannerCarousel({ title, subtitle, moreHref, moreLabel, headerSize, items, aspectRatio, bannerSize, className, }: BannerCarouselProps): import("react/jsx-runtime").JSX.Element;
+export { BannerCarousel };

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+export interface BottomTabBarItem {
+    /** ナビゲーションアイテムのラベル */
+    label: string;
+    /** アイコン（Lucide React icon など） */
+    icon: React.ReactNode;
+    /** アクティブ時のアイコン（省略時は icon を使用） */
+    activeIcon?: React.ReactNode;
+    /** リンク先URL */
+    href?: string;
+    /** クリックハンドラ */
+    onClick?: () => void;
+    /** バッジ数（カートアイテム数など） */
+    badgeCount?: number;
+    /** このアイテムがアクティブか */
+    isActive?: boolean;
+}
+export interface BottomTabBarProps extends React.HTMLAttributes<HTMLElement> {
+    /** ナビゲーションアイテムリスト */
+    items: BottomTabBarItem[];
+    /** バナースロット（ナビゲーション上部に表示するキャンペーンバナーなど） */
+    banner?: React.ReactNode;
+}
+/**
+ * ボトムナビゲーションコンポーネント
+ *
+ * モバイル画面下部に固定表示するメインナビゲーション。
+ * 最大5アイテム、カートバッジ（NotificationBadge）、
+ * キャンペーンバナースロットをサポート。
+ *
+ * Figma準拠:
+ * - アクティブ: オレンジ丸ピル背景 + アイコン色オレンジ + ラベル太字
+ * - 非アクティブ: ピルなし + 高コントラスト文字色 + 通常ウェイト
+ * - 高さ 52px、左右 px-4
+ *
+ * 使用時は `body` に `pb-16` を追加してコンテンツ重なりを防止。
+ */
+declare function BottomTabBar({ className, items, banner, ...props }: BottomTabBarProps): import("react/jsx-runtime").JSX.Element;
+export { BottomTabBar };

package/dist/types/components/primitives/bulk-action-bar.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export interface BulkActionBarProps {
+    /** 選択件数 */
+    selectedCount: number;
+    /** 子要素（Select やボタンなど） */
+    children: React.ReactNode;
+    /** 追加クラス */
+    className?: string;
+}
+/**
+ * 一括操作バー
+ *
+ * テーブルのチェックボックスで1件以上選択した時に表示する操作バー。
+ * 薄オレンジ背景 + 選択件数ラベル + 操作UI（Select, Button など）。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - `selectedCount > 0` の時だけ描画する（親側で制御 or 自動非表示）
+ * - children に Select + Button を配置する
+ * - 右寄せしたいボタンは `ml-auto` を付ける
+ *
+ * ```tsx
+ * {selected.size > 0 && (
+ *   <BulkActionBar selectedCount={selected.size}>
+ *     <Select .../>
+ *     <Button className="ml-auto">一括保存</Button>
+ *   </BulkActionBar>
+ * )}
+ * ```
+ */
+declare function BulkActionBar({ selectedCount, children, className }: BulkActionBarProps): import("react/jsx-runtime").JSX.Element;
+export { BulkActionBar };

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

@@ -0,0 +1,70 @@
+import { type SectionHeaderSize } from "../../components/primitives/section-header";
+export interface CategoryItem {
+    /** カテゴリ名 */
+    name: string;
+    /** リンクURL */
+    href: string;
+    /** サムネイル画像URL */
+    imageUrl: string;
+}
+export interface CategoryScrollProps {
+    /** セクションタイトル */
+    title: string;
+    /** 「もっと見る」リンクURL */
+    moreHref?: string;
+    /** SectionHeader size */
+    headerSize?: SectionHeaderSize;
+    /** カテゴリリスト */
+    items: CategoryItem[];
+    /** サムネイルサイズ (default: "md") sm=60px, md=100px, lg=120px */
+    thumbnailSize?: "sm" | "md" | "lg";
+    /** サムネイル角丸 (default: "square") square=rounded-lg, circle=rounded-full */
+    thumbnailShape?: "square" | "circle";
+    /**
+     * レイアウト (default: "scroll")
+     * - scroll: 横スクロール1行
+     * - grid: 4列×N行の横スクロールグリッド（本番カテゴリ準拠）
+     */
+    layout?: "scroll" | "grid";
+    /** グリッドの行数 (default: 3) — layout="grid" 時のみ */
+    gridRows?: number;
+    /** グリッドの列数 (default: 4) — layout="grid" 時のみ */
+    gridCols?: number;
+    /**
+     * PC（@md:）でのグリッド列数 (default: undefined = SP と同じ横スクロール)
+     * 指定すると @md: で横スクロールなし・折り返しグリッドに切り替わる
+     * Figma PC デザイン準拠: カテゴリ/シーン = 8列
+     */
+    pcGridCols?: number;
+    /** 追加クラス */
+    className?: string;
+}
+/**
+ * カテゴリスクロールコンポーネント
+ *
+ * カテゴリサムネイル（画像＋ラベル）を横スクロールで表示するオーガニズム。
+ * SectionHeader を内包し、カテゴリナビゲーションセクションとして使用する。
+ *
+ * ### インポート
+ * ```tsx
+ * import { CategoryScroll } from '../../components/primitives/category-scroll'
+ * ```
+ *
+ * ### Props（主要なもの）
+ * | Prop | 型 | デフォルト | 説明 |
+ * |------|-----|-----------|------|
+ * | title | string | — | セクションタイトル |
+ * | items | CategoryItem[] | — | カテゴリリスト |
+ * | moreHref | string | — | 「もっと見る」リンクURL |
+ * | headerSize | SectionHeaderSize | "lg" | SectionHeader のサイズ |
+ * | thumbnailSize | "sm" \| "md" \| "lg" | "md" | サムネイルサイズ |
+ * | thumbnailShape | "square" \| "circle" | "square" | サムネイル角丸 |
+ *
+ * ### AI 向け使用ルール
+ * - Atomic Design Level 3（organism）: SectionHeader を内包する
+ * - カテゴリナビゲーションに使用する
+ * - thumbnailShape="circle" + thumbnailSize="sm" でクイックアクセスアイコン風に
+ * - 横スクロールは scrollbar-hide でスクロールバー非表示
+ */
+declare function CategoryScroll({ title, moreHref, headerSize, items, thumbnailSize, thumbnailShape, layout, gridRows, gridCols, pcGridCols, className, }: CategoryScrollProps): import("react/jsx-runtime").JSX.Element;
+export { CategoryScroll };

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

@@ -0,0 +1,44 @@
+export interface CategoryShortcutsItem {
+    /** カテゴリ名 */
+    name: string;
+    /** リンクURL */
+    href?: string;
+    /** アイコン画像URL（CDN） */
+    imageUrl: string;
+    /** アイコンの代替テキスト */
+    imageAlt?: string;
+    /** 選択中フラグ */
+    isSelected?: boolean;
+    /** クリックハンドラ */
+    onClick?: () => void;
+}
+export interface CategoryShortcutsProps {
+    /** カテゴリリスト */
+    items: CategoryShortcutsItem[];
+    /** 追加クラス */
+    className?: string;
+}
+/**
+ * 小アイコンカテゴリストリップ
+ *
+ * 商品一覧・検索結果ページ上部に設置する、コンパクトなカテゴリフィルター行。
+ * 小さな円アイコン（40px）＋ラベルを横スクロールで並べる。
+ *
+ * CategoryScroll との違い:
+ * - セクションタイトルなし（フィルターとして使用）
+ * - アイコンが xs サイズ（40px）— CategoryScroll sm（60px）より小さい
+ * - 選択状態を持てる（isSelected）
+ *
+ * ### インポート
+ * ```tsx
+ * import { CategoryShortcuts } from '../../components/primitives/category-shortcuts'
+ * ```
+ *
+ * ### AI 向け使用ルール
+ * - 商品一覧ページのカテゴリフィルターとして使用
+ * - 検索結果ページのカテゴリナビとして使用
+ * - `isSelected` で現在のカテゴリをハイライト
+ * - `onClick` でフィルター切り替えイベントを処理
+ */
+declare function CategoryShortcuts({ items, className }: CategoryShortcutsProps): import("react/jsx-runtime").JSX.Element;
+export { CategoryShortcuts };

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const chipVariants: (props?: {
+    variant?: "filled" | "accent";
+    size?: "sm" | "lg" | "md" | "tile";
+    shape?: "square" | "pill";
+} & import("class-variance-authority/types").ClassProp) => string;
+export interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof chipVariants> {
+    /** リンクとして使う場合のURL */
+    href?: string;
+    /** 選択状態 */
+    selected?: boolean;
+    /** 売り切れ状態（斜線表示 + disabled） */
+    soldOut?: boolean;
+    /** 削除可能（×ボタン表示） */
+    removable?: boolean;
+    /** 削除時のコールバック */
+    onRemove?: () => void;
+    /** カウントバッジ（例: 件数表示） */
+    count?: number;
+}
+/**
+ * チップコンポーネント
+ *
+ * クリック可能なキーワード・フィルターチップ。
+ * 検索ページの「人気キーワード」や、フィルター選択に使用。
+ *
+ * Tag（表示専用ラベル）との違い：
+ * - Chip はインタラクティブ（クリック可能）
+ * - Chip は丸形（rounded-full）/ 正方形（shape="square"）
+ * - Chip は選択状態・削除ボタンを持てる
+ *
+ * ### AI 向け使用ルール
+ *
+ * - キーワードチップ（塗りつぶし）: `<Chip>キーワード</Chip>`
+ * - フィルター選択: `<Chip selected>選択済み</Chip>`
+ * - 削除可能: `<Chip removable onRemove={fn}>タグ</Chip>`
+ * - サイズタイル: `<Chip shape="square" size="tile" selected={isSelected}>3号</Chip>`
+ * - 売り切れタイル: `<Chip shape="square" size="tile" soldOut>5号</Chip>`
+ * - カウント付き: `<Chip selected count={156}>すべて</Chip>`
+ * - ステータスフィルター: Chip + count でステータス別件数タブを構成
+ */
+declare function Chip({ className, variant, size, shape, href, selected, soldOut, removable, onRemove, count, children, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export { Chip, chipVariants };

package/dist/types/components/primitives/coach-mark.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export type CoachMarkDirection = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
+export interface CoachMarkProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 矢印の方向（バルーン本体から見た矢印の向き） */
+    direction?: CoachMarkDirection;
+    /** 閉じるボタン表示 */
+    onClose?: () => void;
+    /** オンボーディングステップ（例: "2/5"） */
+    step?: string;
+    /** 「次へ」ボタン押下時 */
+    onNext?: () => void;
+    /** 次へボタンのラベル */
+    nextLabel?: string;
+}
+/**
+ * CoachMark（バルーン / コーチマーク）
+ *
+ * オンボーディング専用のダーク背景ポップアップ。矢印の方向を指定可能。
+ * ステップ表示＋次へボタンで順番にガイドする用途。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - **オンボーディング（コーチマーク）専用** で使う
+ * - 汎用ツールチップには shadcn の `<Tooltip>` を使うこと
+ * - `step` + `onNext` + `onClose` でステップ送りUIを構成
+ */
+declare function CoachMark({ className, direction, onClose, step, onNext, nextLabel, children, ...props }: CoachMarkProps): import("react/jsx-runtime").JSX.Element;
+export { CoachMark };

package/dist/types/components/primitives/empty-state.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 中央に表示するアイコン */
+    icon: React.ReactNode;
+    /** タイトル（太字） */
+    title: string;
+    /** 補足説明テキスト */
+    description?: React.ReactNode;
+    /** CTAボタンなどのアクション要素 */
+    action?: React.ReactNode;
+}
+/**
+ * 空状態コンポーネント
+ *
+ * データが無い状態を表示するUI。
+ * カート空、検索結果なし、お気に入り空などに使用。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - `icon` にページテーマに合ったアイコン（size-16）を渡す
+ * - `title` で状態を簡潔に伝える
+ * - `description` で次のアクションを案内
+ * - `action` に `Button` を渡してCTA導線を作る
+ * - ページコンテンツの中央に配置
+ *
+ * ```tsx
+ * <EmptyState
+ *   icon={<ShoppingCart className="size-16" />}
+ *   title="カートに商品がありません"
+ *   description="気になる商品を探してみましょう"
+ *   action={<Button size="lg">商品を探す</Button>}
+ * />
+ * ```
+ */
+declare function EmptyState({ className, icon, title, description, action, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export { EmptyState };

package/dist/types/components/primitives/error-state.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+export interface ErrorStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** エラーアイコン */
+    icon?: React.ReactNode;
+    /** エラータイトル */
+    title: string;
+    /** エラーの説明テキスト */
+    description?: React.ReactNode;
+    /** 再試行ボタンのクリックハンドラ。指定すると再試行ボタンを表示 */
+    onRetry?: () => void;
+    /** 再試行ボタンのラベル */
+    retryLabel?: string;
+    /** 追加アクション（例: 「ホームに戻る」ボタン） */
+    action?: React.ReactNode;
+}
+/**
+ * エラー状態コンポーネント
+ *
+ * APIエラー、ネットワークエラー、タイムアウト等のエラー状態を表示するUI。
+ * EmptyState と同様のレイアウトだが、再試行アクションに特化。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - `icon` にエラー種別に合ったアイコン（size-16）を渡す
+ * - `title` でエラー内容を簡潔に伝える
+ * - `description` で対処方法を案内
+ * - `onRetry` を渡すと再試行ボタンが表示される
+ * - `action` に追加のナビゲーションボタンを渡せる
+ * - ページコンテンツの中央に配置
+ *
+ * ```tsx
+ * <ErrorState
+ *   icon={<WifiOff className="size-16" />}
+ *   title="接続エラー"
+ *   description="ネットワークに接続できませんでした。"
+ *   onRetry={() => location.reload()}
+ * />
+ * ```
+ */
+declare function ErrorState({ className, icon, title, description, onRetry, retryLabel, action, ...props }: ErrorStateProps): import("react/jsx-runtime").JSX.Element;
+export { ErrorState };

package/dist/types/components/primitives/filter-bar.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+export interface FilterChip {
+    /** フィルターのラベル（例: "お届け日", "価格"） */
+    label: string;
+    /** 選択中の値（表示用。アクティブ時に label の代わりに表示される。例: "¥3,000〜¥5,000"） */
+    value?: string;
+    /** アクティブ状態 */
+    isActive?: boolean;
+    /** クリックハンドラ */
+    onClick?: () => void;
+}
+export interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** フィルターチップ群 */
+    filters: FilterChip[];
+    /** 対象商品件数 */
+    resultCount?: number;
+    /** 並び替えの現在値（SP: ボタンラベルとして表示。PC: ドロップダウンラベルとして表示） */
+    sortLabel?: string;
+    /** 並び替えクリックハンドラ */
+    onSortClick?: () => void;
+    /** 「他のフィルタ」ボタンのハンドラ */
+    onMoreFilters?: () => void;
+    /** 戻るボタンのハンドラ（地域フィルタ等で使用） */
+    onBack?: () => void;
+    /** アクティブなフィルター件数（フィルターアイコン上のバッジに表示） */
+    activeFilterCount?: number;
+    /** レイアウト */
+    variant?: "sp" | "pc";
+}
+/**
+ * フィルターバー
+ *
+ * 商品一覧ページ上部の絞り込み＆並び替えバー。
+ * 本番実装 `p-search-filter-nav` + `p-search-filter-nav__container` を再現。
+ *
+ * ### 本番との対応
+ *
+ * | 本番クラス | DS 要素 |
+ * |-----------|---------|
+ * | `p-search-filter-nav__icon` | フィルターアイコン（SlidersHorizontal） |
+ * | `p-search-filter-nav__button` | FilterChip（各絞り込みチップ） |
+ * | `p-search-filter-nav__button--other` | 「他のフィルタ」リンク |
+ * | `p-search-filter-nav__count` | `activeFilterCount` バッジ |
+ * | `p-search-filter-nav__result` | 対象商品件数 |
+ * | `p-search-filter-nav__sort` | 並び替えボタン |
+ *
+ * ### AI 向け使用ルール
+ *
+ * - `<FilterBar filters={[...]} resultCount={689} sortLabel="おすすめ順" onSortClick={...} onMoreFilters={...} />`
+ * - SP/PC の並び替え表示は @container クエリで自動切替（variant prop は非推奨）
+ * - フィルターチップは横スクロール
+ * - SP では並び替えは結果行の右側にソートボタンとして表示（本番同様）
+ * - PC では並び替えは select 風ドロップダウンとして表示（本番 m_sort_pc 同様）
+ */
+declare function FilterBar({ filters, resultCount, sortLabel, onSortClick, onMoreFilters, onBack, activeFilterCount, variant, className, ...props }: FilterBarProps): import("react/jsx-runtime").JSX.Element;
+export { FilterBar };