@cakejp/design-system 0.3.0

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

@@ -0,0 +1,115 @@
+import * as React from "react";
+/** サイズピッカーの選択肢 */
+export interface SizeOption {
+    /** 表示ラベル（例: "3号"） */
+    label: string;
+    /** 値（識別用） */
+    value: string;
+    /** 売り切れ */
+    soldOut?: boolean;
+}
+/** クーポン情報 */
+export interface CouponInfo {
+    /** クーポン名（例: "5%OFFクーポン"） */
+    label: string;
+    /** アクションテキスト */
+    actionLabel?: string;
+    /** クリックハンドラ */
+    onAction?: () => void;
+}
+/** 商品タグ */
+export interface ProductTag {
+    label: string;
+    variant?: "default" | "caution" | "info" | "info-fill" | "accent" | "sale";
+}
+/** プロモバナー */
+export interface PromoBanner {
+    /** バッジテキスト（例: "初回¥3,000OFF"） */
+    badge: string;
+    /** 本文 */
+    text: React.ReactNode;
+    /** クリックハンドラ */
+    onClick?: () => void;
+}
+/** ポイント情報 */
+export interface PointInfo {
+    /** 通常ポイント（例: "35pt"） */
+    points: string;
+    /** ポイント補足（例: "(円相当)"） */
+    pointsSuffix?: string;
+    /** カード還元表示（例: "3%還元 105pt"） */
+    cardReward?: string;
+    /** 詳細クリックハンドラ */
+    onDetailClick?: () => void;
+}
+export interface ProductDetailSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 商品名 */
+    productName: string;
+    /** 価格（税込、数値） */
+    price: number;
+    /** 商品タグ一覧 */
+    tags?: ProductTag[];
+    /** ショップ名 */
+    shopName?: string;
+    /** ショップリンクURL */
+    shopHref?: string;
+    /** ブランドタグ（例: "Cake.jp ORIGINAL"） */
+    brandLabel?: string;
+    /** ブランドリンクURL */
+    brandHref?: string;
+    /** 評価値 */
+    rating?: number;
+    /** レビュー件数 */
+    reviewCount?: number;
+    /** クーポン一覧 */
+    coupons?: CouponInfo[];
+    /** サイズ選択肢（行ごとの配列） */
+    sizeOptions?: SizeOption[][];
+    /** 現在選択中のサイズ value */
+    selectedSize?: string;
+    /** サイズ変更ハンドラ */
+    onSizeChange?: (value: string) => void;
+    /** サイズの補足情報テキスト（例: "ケーキの号数、サイズについて"） */
+    sizeInfoLabel?: string;
+    /** サイズ補足クリック */
+    onSizeInfoClick?: () => void;
+    /** 配送先の都道府県 */
+    deliveryPrefecture?: string;
+    /** 配送先変更ハンドラ */
+    onPrefectureChange?: () => void;
+    /** 最短お届け日テキスト（例: "1/5(木)"） */
+    earliestDelivery?: string;
+    /** 数量 */
+    quantity?: number;
+    /** 数量変更ハンドラ */
+    onQuantityChange?: (value: number) => void;
+    /** ポイント情報 */
+    pointInfo?: PointInfo;
+    /** カートに追加ハンドラ */
+    onAddToCart?: () => void;
+    /** カートボタンのテキスト */
+    addToCartLabel?: string;
+    /** ブックマークに追加ハンドラ */
+    onBookmark?: () => void;
+    /** ブックマーク済みか */
+    isBookmarked?: boolean;
+    /** プロモバナー */
+    promoBanner?: PromoBanner;
+}
+/**
+ * 商品詳細サイドバー（CV セット）
+ *
+ * PC商品詳細ページの右カラムに表示する購入導線コンポーネント。
+ * タグ・商品名・ショップ名・価格・レビュー・クーポン・サイズ選択・
+ * お届け日・数量・ポイント・CTA・ブックマーク・プロモバナーを集約。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - PC商品詳細ページの右カラムに配置（幅 400px 推奨）
+ * - 既存の `Tag`, `RatingStars`, `QuantitySelector`, `PriceDisplay`, `Button` を内部で使用
+ * - 価格表示は `PriceDisplay` コンポーネント（size="xl"）を使用し、税込表示フォーマットを統一
+ * - サイズ選択肢は行単位の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;
+export { ProductDetailSidebar };

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

@@ -0,0 +1,90 @@
+import * as React from "react";
+export interface ProductListItemTag {
+    label: string;
+    variant?: "default" | "accent" | "info" | "timesale" | "sale";
+}
+export interface ProductListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 商品名 */
+    name: string;
+    /** 商品画像URL */
+    imageUrl?: string;
+    /** 価格 */
+    price?: number;
+    /** ショップ名 */
+    shopName?: string;
+    /** ショップリンクURL */
+    shopHref?: string;
+    /** オリジナルブランド名 */
+    brandName?: string;
+    /** タグ群 */
+    tags?: ProductListItemTag[];
+    /** ハッシュタグ（例: ["ベストセラー", "メディア掲載"]） */
+    hashTags?: string[];
+    /** ステータスラベル（例: "商品出荷済", "準備中"） */
+    statusLabel?: string;
+    /** 表示バリエーション */
+    variant?: "default" | "small" | "xsm" | "order-history" | "cart" | "review" | "ad" | "lp";
+    /** 「カートに追加」ボタン表示 */
+    showCartButton?: boolean;
+    /** カートボタンのハンドラ */
+    onAddToCart?: () => void;
+    /** 「商品詳細を見る」ボタン表示 */
+    showDetailButton?: boolean;
+    /** 商品詳細ボタンのハンドラ */
+    onViewDetail?: () => void;
+    /** ブックマークアイコンの表示 */
+    showBookmark?: boolean;
+    /** リンク先 */
+    href?: string;
+    /** 注文日 */
+    orderDate?: string;
+    /** お届け先 */
+    deliveryInfo?: string;
+    /** 合計金額 */
+    totalPrice?: number;
+    /** レビューボタン表示 */
+    showReviewButton?: boolean;
+    /** メッセージ・オプション情報 */
+    optionInfo?: Record<string, string>;
+    /** 数量（cart variant） */
+    quantity?: number;
+    /** 数量変更コールバック（cart variant） */
+    onQuantityChange?: (value: number) => void;
+    /** 数量セレクターのサイズ（cart variant） */
+    quantitySize?: "sm" | "md";
+    /** 元価格・割引前（cart variant） */
+    originalPrice?: number;
+    /** 価格ラベル（例: "商品価格"）（cart variant） */
+    priceLabel?: string;
+    /** お届け日テキスト（例: "お届け日: 3/19（水）"）（cart variant） */
+    deliveryText?: string;
+    /** 削除コールバック（cart variant） */
+    onDelete?: () => void;
+    /** あとで買うコールバック（cart variant） */
+    onSaveForLater?: () => void;
+    /** 画像サイズクラス（cart variant、デフォルト: "size-20"） */
+    imageSize?: string;
+    /** 左側スロット（画像の代わりに任意コンテンツ） */
+    leftSlot?: React.ReactNode;
+    /** 右側スロット（ブックマークの代わりに任意コンテンツ） */
+    rightSlot?: React.ReactNode;
+    /** 下部スロット（アクションボタンの代わりに任意コンテンツ） */
+    bottomSlot?: React.ReactNode;
+}
+/**
+ * カードリストアイテム — Figma Card/List 準拠
+ *
+ * 横型の商品カード（注文履歴、カート、検索結果、レビュー画面など）。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 検索結果: `<ListItem variant="default" showCartButton showBookmark />`
+ * - 注文履歴: `<ListItem variant="order-history" />`
+ * - カート内: `<ListItem variant="cart" quantity={1} price={4980} onQuantityChange={...} />`
+ *   - cart variant は `CartItem` ラッパーコンポーネント経由でも使用可能
+ * - レビュー画面: `<ListItem variant="review" showDetailButton showCartButton />`
+ * - 小さい: `<ListItem variant="small" />`
+ * - 極小: `<ListItem variant="xsm" />`
+ */
+declare function ProductListItem({ name, imageUrl, price, 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, leftSlot, rightSlot, bottomSlot, className, ...props }: ProductListItemProps): import("react/jsx-runtime").JSX.Element;
+export { ProductListItem };

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

@@ -0,0 +1,62 @@
+import * as React from "react";
+export type ProductOptionType = "quantity" | "select" | "text" | "checkbox" | "image-upload" | "number-candle" | "letter";
+export interface ProductOptionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** オプションの種類 */
+    type: ProductOptionType;
+    /** ラベル */
+    label: string;
+    /** 必須かどうか */
+    required?: boolean;
+    /** 価格（例: "¥150"） */
+    price?: string;
+    /** ヘルプテキスト */
+    helpText?: string;
+    /** エラーメッセージ */
+    error?: string;
+    /** 子要素（フォーム内容） */
+    children?: React.ReactNode;
+}
+/**
+ * 商品オプション
+ *
+ * カート内の商品オプション設定フォーム。
+ * Figma: _option/type
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 数量: `<ProductOption type="quantity" label="数量" />`
+ * - セレクト: `<ProductOption type="select" label="サイズ" />`
+ * - テキスト入力: `<ProductOption type="text" label="メッセージ" />`
+ * - チェックボックス: `<ProductOption type="checkbox" label="ラッピング" />`
+ * - 画像アップロード: `<ProductOption type="image-upload" label="写真" />`
+ * - ナンバーキャンドル: `<ProductOption type="number-candle" label="キャンドル" />`
+ */
+declare function ProductOption({ type, label, required, price, helpText, error, children, className, ...props }: ProductOptionProps): import("react/jsx-runtime").JSX.Element;
+export interface OptionQuantityProps {
+    value: number;
+    min?: number;
+    max?: number;
+    onChange?: (value: number) => void;
+}
+declare function OptionQuantity({ value, min, max, onChange, ...rest }: OptionQuantityProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export interface OptionSelectProps {
+    value?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onChange?: (value: string) => void;
+    placeholder?: string;
+}
+declare function OptionSelect({ value, options, onChange, placeholder, ...rest }: OptionSelectProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export interface OptionTextProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    maxLength?: number;
+}
+declare function OptionText({ value, onChange, placeholder, maxLength, ...rest }: OptionTextProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function OptionImageUpload({ onUpload, ...rest }: {
+    onUpload?: () => void;
+} & React.HTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+export { ProductOption, OptionQuantity, OptionSelect, OptionText, OptionImageUpload, };

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+export interface RatingStarsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 評価値 (0〜5) */
+    rating: number;
+    /** レビュー件数 */
+    reviewCount?: number;
+    /** サイズ */
+    size?: "sm" | "md" | "lg";
+    /** レビュー件数を表示するか */
+    showCount?: boolean;
+    /** 評価値を数字で表示するか */
+    showValue?: boolean;
+}
+/**
+ * ✦ キラ（スパークル）アイコン
+ * Cake.jp デザインシステムの標準レビューアイコン。
+ * 4 頂点の星型（kira）。
+ */
+declare function SparkleIcon({ size, className, }: {
+    size?: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * レビュー評価表示コンポーネント。
+ *
+ * Cake.jp 標準パターン: ✦ 4.67 (345)
+ * 1つのスパークルアイコン + 数値 + レビュー件数。
+ */
+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

@@ -0,0 +1,44 @@
+import * as React from "react";
+export interface ReviewCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** レビューバリアント */
+    variant?: "list" | "card" | "pc";
+    /** 星評価（1〜5） */
+    rating: number;
+    /** 投稿日 */
+    date: string;
+    /** レビュー本文 */
+    text: string;
+    /** レビュー画像URL */
+    imageUrl?: string;
+    /** 商品名（variant="card" で商品ヘッダー表示） */
+    productName?: string;
+    /** 商品サムネイルURL（variant="card" で商品ヘッダー表示） */
+    productImageUrl?: string;
+    /** 「参考になった」件数 */
+    helpfulCount?: number;
+    /** いいね済みか */
+    isLiked?: boolean;
+    /** いいねクリックハンドラ */
+    onLikeClick?: () => void;
+    /** 「もっと見る」クリックハンドラ */
+    onMoreClick?: () => void;
+    /** テキスト省略の最大文字数 */
+    maxLength?: number;
+}
+/**
+ * レビューカード
+ *
+ * ユーザーのレビューを表示するカード。
+ * 星評価・投稿日・レビュー文・画像・「参考になった」ボタンを含む。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 商品詳細ページのレビューセクションで使用
+ * - `variant="list"` はSPリスト表示（デフォルト）
+ * - `variant="card"` は商品ヘッダー付きカード
+ * - `variant="pc"` はPC向け幅広レイアウト
+ * - 既存の `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;
+export { ReviewCard };

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+export interface ReviewFormProps extends Omit<React.HTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    /** 初期星評価 */
+    defaultRating?: number;
+    /** 初期レビューテキスト */
+    defaultText?: string;
+    /** 送信ハンドラ */
+    onSubmit?: (data: {
+        rating: number;
+        text: string;
+        images: File[];
+    }) => void;
+    /** キャンセルハンドラ */
+    onCancel?: () => void;
+    /** 送信中かどうか */
+    isSubmitting?: boolean;
+    /** 最大画像枚数 */
+    maxImages?: number;
+    /** 最大文字数 */
+    maxLength?: number;
+    /** 商品名（ヘッダー表示用） */
+    productName?: string;
+    /** 商品画像URL（ヘッダー表示用） */
+    productImageUrl?: string;
+}
+/**
+ * レビュー投稿フォーム
+ *
+ * 星評価の選択・レビュー文の入力・画像添付ができるフォーム。
+ * Storybook上で直接レビューの入力体験を確認できる。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 商品詳細ページの「レビューを書く」から遷移するフォーム
+ * - `productName` + `productImageUrl` でどの商品のレビューか表示
+ * - `maxImages` でアップロード可能な画像枚数を制限（デフォルト3枚）
+ * - `onSubmit` で `{ rating, text, images }` を受け取る
+ */
+declare function ReviewForm({ defaultRating, defaultText, onSubmit, onCancel, isSubmitting, maxImages, maxLength, productName, productImageUrl, className, ...props }: ReviewFormProps): import("react/jsx-runtime").JSX.Element;
+export { ReviewForm };

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+export interface ReviewGaugeItem {
+    /** 星の数（5〜1） */
+    stars: number;
+    /** 件数 */
+    count: number;
+}
+export interface ReviewSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 平均評価 */
+    averageRating: number;
+    /** 総レビュー数 */
+    totalCount: number;
+    /** 星ごとの内訳 */
+    breakdown?: ReviewGaugeItem[];
+}
+/**
+ * レビュー集計
+ *
+ * 商品・店舗の平均評価と星別の内訳ゲージ。
+ * Figma: gauge (レビュー)
+ *
+ * ### AI 向け使用ルール
+ *
+ * - `<ReviewSummary averageRating={4.67} totalCount={345} breakdown={[...]} />`
+ * - breakdown を省略するとゲージなしの簡易表示
+ */
+declare function ReviewSummary({ averageRating, totalCount, breakdown, className, ...props }: ReviewSummaryProps): import("react/jsx-runtime").JSX.Element;
+export interface ReviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** レビュアー名 */
+    reviewer: string;
+    /** 評価（1〜5） */
+    rating: number;
+    /** レビュー日付 */
+    date: string;
+    /** レビュー本文 */
+    comment: string;
+    /** 購入商品名 */
+    productName?: string;
+    /** レビュー画像URL */
+    imageUrls?: string[];
+}
+/**
+ * レビューアイテム
+ *
+ * 1件分のレビュー表示。
+ * Figma: Review (s/m/l)
+ *
+ * ### AI 向け使用ルール
+ *
+ * - `<ReviewItem reviewer="花子" rating={5} date="2024/03/10" comment="..." />`
+ */
+declare function ReviewItem({ reviewer, rating, date, comment, productName, imageUrls, className, ...props }: ReviewItemProps): import("react/jsx-runtime").JSX.Element;
+export { ReviewSummary, ReviewItem };

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

@@ -0,0 +1,48 @@
+import * as React from "react";
+export interface ShopCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 店舗名 */
+    name: string;
+    /** 店舗名ルビ（ふりがな） */
+    ruby?: string;
+    /** 商品画像URL（カバー左側） */
+    productImageUrl?: string;
+    /** 店舗画像URL（カバー右側） */
+    shopImageUrl?: string;
+    /** 店舗の評価（星の平均） */
+    rating?: number;
+    /** レビュー件数 */
+    reviewCount?: number;
+    /** エリア・住所 */
+    area?: string;
+    /** 最短お届け日テキスト（例: "3/20"） */
+    deliveryDate?: string;
+    /** お気に入り登録済み */
+    isBookmarked?: boolean;
+    /** お気に入り切り替えハンドラ */
+    onBookmarkToggle?: () => void;
+    /** リンク先 */
+    href?: string;
+    /** バリエーション */
+    variant?: "default" | "compact";
+}
+/**
+ * 店舗カード
+ *
+ * 店舗一覧（cake.jp/shops/）での店舗情報表示。
+ * 本番の p-shops-card クラスに準拠。
+ *
+ * 構造:
+ * - カバー: 商品画像と店舗画像を左右に並べて表示（各50%幅、1:1比率）
+ * - ボディ: 店舗名、住所、レビュー、最短お届け日、ブックマーク
+ *
+ * Figma: _カード/店舗, _Card/店舗
+ *
+ * ### AI 向け使用ルール
+ *
+ * - 一覧表示: `<ShopCard name="Patisserie A" variant="default" />`
+ * - コンパクト: `<ShopCard name="Patisserie A" variant="compact" />`
+ * - 画像は 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;
+export { ShopCard };

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

@@ -0,0 +1,44 @@
+/**
+ * ## StatCard / 統計カード
+ *
+ * ダッシュボードのKPI表示用カード。
+ * アイコン + ラベル + 数値 + 前期比 の構成。
+ *
+ * ### インポート
+ * ```tsx
+ * import { StatCard } from '../../components/ec/stat-card'
+ * ```
+ *
+ * ### Props
+ * | Prop | 型 | デフォルト | 説明 |
+ * |------|-----|-----------|------|
+ * | label | string | — | KPI ラベル |
+ * | value | string | — | 表示値 |
+ * | icon | ReactNode | — | アイコン要素 |
+ * | trend | object | — | 前期比（value + isPositive） |
+ * | iconBgClass | string | — | アイコン背景色クラス |
+ *
+ * ### AI 向け使用ルール
+ * - ダッシュボードやレポートページで使用
+ * - 3〜4 カラムのグリッドで並べる
+ */
+import * as React from "react";
+export interface StatCardProps {
+    /** KPI ラベル */
+    label: string;
+    /** 表示値 */
+    value: string;
+    /** アイコン要素 */
+    icon: React.ReactNode;
+    /** アイコン背景色クラス */
+    iconBgClass?: string;
+    /** 前期比 */
+    trend?: {
+        value: string;
+        isPositive: boolean;
+        label?: string;
+    };
+    /** 追加クラス */
+    className?: string;
+}
+export declare function StatCard({ label, value, icon, iconBgClass, trend, className, }: StatCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+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;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+    size?: "default" | "sm";
+}): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogAction({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Alert variants mapped to Figma design:
+ *
+ * "bordered" variants (success / info / error / warning):
+ *   - White background with colored 1px inner border + 5px outer ring
+ *   - Icon (24px) + content column layout
+ *   - Title: bold 14px, Description: regular 12px
+ *   - Padding 16px, rounded-lg (8px), gap 8px
+ *   - **prop-based API 対応**: title / description / icon / action を直接渡せる
+ *
+ * "inline" variants (inline-info / inline-caution / inline-warning):
+ *   - Tinted background, no border
+ *   - Compact: padding 8px 12px, rounded-sm (3px), gap 4px
+ *   - Icon (20px) + content column layout
+ *
+ * 旧 `<Banner>` の用途は bordered variant + prop-based API で完全カバー:
+ *   <Alert variant="warning" title="..." description="..." action={<Button />} />
+ */
+declare const alertVariants: (props?: {
+    variant?: "success" | "info" | "error" | "warning" | "inline-info" | "inline-caution" | "inline-warning";
+} & import("class-variance-authority/types").ClassProp) => string;
+type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+    /**
+     * prop-based API のタイトル（旧 Banner.title 相当）。
+     * children と排他（children 優先）。bordered variant でのみ有効。
+     */
+    title?: React.ReactNode;
+    /** prop-based API の説明テキスト（旧 Banner.description 相当） */
+    description?: React.ReactNode;
+    /** カスタムアイコン（未指定時は variant に応じて自動選択） */
+    icon?: React.ReactNode;
+    /** 右側アクション（Button など、旧 Banner.action 相当） */
+    action?: React.ReactNode;
+};
+declare function Alert({ className, variant, children, title, description, icon, action, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+declare const alertTitleVariants: Record<string, string>;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare const alertDescriptionVariants: Record<string, string>;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertTitle, AlertDescription, alertVariants, alertTitleVariants, alertDescriptionVariants, };

package/dist/types/components/foundations/aspect-ratio.d.ts

@@ -0,0 +1,3 @@
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
+declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { AspectRatio };

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: "default" | "sm" | "lg";
+}): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount, };

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

@@ -0,0 +1,9 @@
+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";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+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"> & {
+    asChild?: boolean;
+}): 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;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };