ksk-design-system 1.35.0

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const chipVariants: (props?: {
+    variant?: "accent" | "outline" | "filled";
+    size?: "sm" | "lg" | "md" | "tile";
+    shape?: "square" | "pill";
+} & import("class-variance-authority/types").ClassProp) => string;
+interface ChipProps extends Omit<React.ComponentProps<"button">, "children">, VariantProps<typeof chipVariants> {
+    /** リンクとして使う場合の URL。指定時は `<a>` でレンダリング */
+    href?: string;
+    /** 選択状態。true で Brand 色 + 白文字へ強調 */
+    selected?: boolean;
+    /** 売り切れ状態（斜線オーバーレイ + disabled） */
+    soldOut?: boolean;
+    /** 削除可能（× ボタン表示） */
+    removable?: boolean;
+    /** 削除時のコールバック */
+    onRemove?: () => void;
+    /** 件数バッジ（例: フィルタ件数） */
+    count?: number;
+    children?: React.ReactNode;
+}
+/**
+ * Chip — クリック可能なキーワード・フィルタチップ。
+ *
+ * Tag（表示専用ラベル）との違い：
+ * - Chip はインタラクティブ（クリック・選択・削除可）
+ * - Chip は pill（rounded-full）/ square / tile を持つ
+ * - Chip は count バッジ・売り切れ状態・removable を持てる
+ *
+ * ### AI 向け使用ルール
+ * - キーワード: `<Chip>キーワード</Chip>`
+ * - フィルタ選択: `<Chip selected>選択済み</Chip>`
+ * - 削除可能タグ: `<Chip removable onRemove={fn}>タグ</Chip>`
+ * - サイズタイル: `<Chip shape="square" size="tile" selected={isSelected}>M</Chip>`
+ * - 売り切れタイル: `<Chip shape="square" size="tile" soldOut>L</Chip>`
+ * - カウント付き: `<Chip selected count={156}>すべて</Chip>`
+ * - リンク化: `<Chip href="/search?q=foo">foo</Chip>`
+ */
+declare function Chip({ className, id, style, title, variant, size, shape, href, selected, soldOut, removable, onRemove, count, children, disabled: disabledProp, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export { Chip, chipVariants };
+export type { ChipProps };

package/dist/types/components/patterns/coach-mark-overlay.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { type CoachMarkVariant } from "@/components/ui/coach-mark";
+export interface CoachStep {
+    /** querySelector で要素を特定。要素が無ければ画面中央にフォールバック表示。 */
+    selector: string;
+    title: string;
+    desc: string;
+    /** ツールチップ位置。auto = 下に余白があれば下、なければ上 */
+    placement?: "auto" | "top" | "bottom" | "left" | "right";
+    /** spotlight outline の余白 (px、既定 8) */
+    padding?: number;
+}
+export interface CoachMarkOverlayProps {
+    steps: CoachStep[];
+    open: boolean;
+    onComplete: () => void;
+    onSkip?: () => void;
+    /** CoachMark の見た目（default / brand） */
+    variant?: CoachMarkVariant;
+    /** spotlight ring 色（CSS variable も可、既定 var(--Brand-Primary)） */
+    ringColor?: string;
+    /** content の最大幅 (px、既定 280) */
+    maxWidth?: number;
+}
+/**
+ * CoachMarkOverlay — 初回ユーザー向けの多ステップ onboarding ツアー。
+ *
+ * DS の単発 `<CoachMark>` をベースに、selector で複数要素を順番に
+ * spotlight + tooltip 表示するツアー orchestrator。
+ *
+ * 仕組み:
+ * 1. 各 step の DOM 要素を querySelector で取得 → BoundingRect の位置に
+ *    invisible target を fixed 配置し `<CoachMark>` をアタッチ
+ * 2. spotlight 効果は `outline + box-shadow: 0 0 0 9999px rgba(0,0,0,0.55)`
+ *    で対象だけを切り抜き表示
+ * 3. ツールチップは auto placement（下に余白あれば下、なければ上）
+ * 4. 要素が見つからない step は画面中央に dark overlay 付きで表示
+ *
+ * 完了状態の永続化は `isCoachCompleted` / `markCoachCompleted` を使う:
+ * ```tsx
+ * import { CoachMarkOverlay, isCoachCompleted, markCoachCompleted } from "ksk-design-system"
+ *
+ * const [open, setOpen] = useState(false)
+ * useEffect(() => {
+ *   if (!isCoachCompleted()) setOpen(true)
+ * }, [])
+ *
+ * <CoachMarkOverlay
+ *   open={open}
+ *   steps={[
+ *     { selector: 'header', title: 'ここに日付', desc: '...' },
+ *     { selector: '.fab-fixed', title: 'クイック追加', desc: '...' },
+ *   ]}
+ *   onComplete={() => { markCoachCompleted(); setOpen(false) }}
+ *   onSkip={() => { markCoachCompleted(); setOpen(false) }}
+ * />
+ * ```
+ */
+export declare function CoachMarkOverlay({ steps, open, onComplete, onSkip, variant, ringColor, maxWidth, }: CoachMarkOverlayProps): React.ReactPortal;
+/**
+ * Onboarding 完了状態を localStorage で管理するヘルパー。
+ * 複数アプリで使う際は keys を別にできるよう引数化可能。
+ */
+export declare function isCoachCompleted(key?: string, version?: string): boolean;
+export declare function markCoachCompleted(key?: string, version?: string): void;
+export declare function resetCoach(key?: string): void;

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+interface BottomTabBarItem {
+    label: string;
+    icon: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    href?: string;
+    onClick?: () => void;
+    badgeCount?: number;
+    isActive?: boolean;
+}
+interface BottomTabBarProps extends React.ComponentProps<"nav"> {
+    items: BottomTabBarItem[];
+    /**
+     * "default" : 従来の全幅バー（ボーダー付き）
+     * "pill"    : iOS 26 スタイル — Liquid Glass フローティングピル
+     */
+    variant?: "default" | "pill";
+    /**
+     * pill variant の配置モード（デフォルト "fixed"）
+     * - "fixed"    : ビューポートに固定（実アプリ用）
+     * - "absolute" : 親要素内に配置（Storybook 等のデモ用）
+     */
+    pillPosition?: "fixed" | "absolute";
+}
+declare function BottomTabBar({ className, items, variant, pillPosition, ...props }: BottomTabBarProps): import("react/jsx-runtime").JSX.Element;
+export { BottomTabBar };
+export type { BottomTabBarItem, BottomTabBarProps };

package/dist/types/components/patterns/commerce/filter-bar.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+/** フィルターの選択肢 */
+interface FilterOption {
+    label: string;
+    value: string;
+}
+/** フィルターチップの定義 */
+interface FilterChip {
+    /** フィルターのラベル（例: "価格"） */
+    label: string;
+    /** 選択中の表示値（例: "¥3,000〜¥5,000"）。指定するとアクティブ表示 */
+    value?: string;
+    /** アクティブ状態 */
+    isActive?: boolean;
+    /** クリックハンドラ（options 未指定時に使用） */
+    onClick?: () => void;
+    /** 選択肢リスト（指定するとドロップダウンが開く） */
+    options?: FilterOption[];
+    /** 選択中の値 */
+    selectedValue?: string;
+    /** 選択時のコールバック */
+    onSelect?: (value: string | null) => void;
+}
+/** フィルターバーのプロパティ定義 */
+interface FilterBarProps extends React.ComponentProps<"nav"> {
+    filters: FilterChip[];
+    resultCount?: number;
+    sortLabel?: string;
+    sortOptions?: FilterOption[];
+    selectedSort?: string;
+    onSortSelect?: (value: string) => void;
+    onSortClick?: () => void;
+    onMoreFilters?: () => void;
+    activeFilterCount?: number;
+}
+/** 汎用フィルターバーコンポーネント */
+declare function FilterBar({ filters, resultCount, sortLabel, sortOptions, selectedSort, onSortSelect, onSortClick, onMoreFilters, activeFilterCount, className, ...props }: FilterBarProps): import("react/jsx-runtime").JSX.Element;
+export { FilterBar };
+export type { FilterChip, FilterOption, FilterBarProps };

package/dist/types/components/patterns/commerce/image-carousel.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+interface ImageCarouselProps extends React.ComponentProps<"div"> {
+    images: Array<{
+        src: string;
+        alt: string;
+        href?: string;
+    }>;
+    aspectRatio?: "square" | "video" | "banner";
+    showDots?: boolean;
+    showArrows?: boolean;
+    autoPlay?: number;
+}
+declare function ImageCarousel({ images, aspectRatio, showDots, showArrows, autoPlay, className, ...props }: ImageCarouselProps): import("react/jsx-runtime").JSX.Element;
+export { ImageCarousel };

package/dist/types/components/patterns/commerce/order-summary.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+/** 注文サマリーの明細行 */
+interface OrderSummaryLineItem {
+    /** ラベル（例: 小計、送料） */
+    label: string;
+    /** 値（文字列またはReactノード） */
+    value: React.ReactNode;
+}
+interface OrderSummaryProps extends React.ComponentProps<"div"> {
+    /** 明細行の配列 */
+    lineItems?: OrderSummaryLineItem[];
+    /** 合計ラベル */
+    totalLabel?: string;
+    /** 合計金額の表示文字列 */
+    totalValue: string;
+    /** CTAボタンのラベル */
+    ctaLabel: string;
+    /** CTAボタンクリック時のコールバック */
+    onCTAClick?: () => void;
+    /** CTAボタンの無効状態 */
+    ctaDisabled?: boolean;
+    /** 画面下部に固定表示するか */
+    fixed?: boolean;
+}
+declare function OrderSummary({ className, lineItems, totalLabel, totalValue, ctaLabel, onCTAClick, ctaDisabled, fixed, ...props }: OrderSummaryProps): import("react/jsx-runtime").JSX.Element;
+export { OrderSummary };

package/dist/types/components/patterns/commerce/price-display.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/** 価格表示バリアント定義 */
+declare const priceVariants: (props?: {
+    size?: "sm" | "lg" | "xl" | "md";
+} & import("class-variance-authority/types").ClassProp) => string;
+interface PriceDisplayProps extends React.ComponentProps<"div">, VariantProps<typeof priceVariants> {
+    /** 表示価格 */
+    price: number;
+    /** 価格範囲の最大値（範囲表示用） */
+    maxPrice?: number;
+    /** 元の価格（セール時の打ち消し線表示用） */
+    originalPrice?: number;
+    /** 税込ラベルを表示するか */
+    showTaxLabel?: boolean;
+    /** 通貨記号 */
+    currency?: string;
+}
+declare function PriceDisplay({ className, price, maxPrice, originalPrice, showTaxLabel, currency, size, ...props }: PriceDisplayProps): import("react/jsx-runtime").JSX.Element;
+export { PriceDisplay, priceVariants };

package/dist/types/components/patterns/commerce/product-card.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+interface ProductCardTag {
+    label: string;
+    variant?: "default" | "brand" | "caution" | "success";
+}
+interface ProductCardProps extends React.ComponentProps<"div"> {
+    name: string;
+    imageUrl: string;
+    imageAlt?: string;
+    price: number;
+    originalPrice?: number;
+    rating?: number;
+    reviewCount?: number;
+    shopName?: string;
+    tags?: ProductCardTag[];
+    isFavorite?: boolean;
+    onFavoriteToggle?: () => void;
+    href?: string;
+    onCardClick?: () => void;
+    ranking?: number;
+    /** @deprecated v1.30.0 以降は表示しません。既存 consumer の型互換のために残しています。 */
+    deliveryLabel?: string;
+    orientation?: "vertical" | "horizontal";
+    showCartButton?: boolean;
+    onCartAdd?: () => void;
+    cartButtonLabel?: string;
+}
+/**
+ * ProductCard — 商品表示カード（EC 系の中核）。
+ *
+ * orientation:
+ * - `vertical`（既定）: グリッド表示。商品一覧・カルーセル向け。
+ * - `horizontal`: リスト表示。カート・検索結果・履歴向け。
+ *
+ * stretched-link パターン:
+ *   `href` または `onCardClick` を渡すとカード全体が 1 つのクリッカブル領域に
+ *   なる（`<a class="absolute inset-0">` を内側に重ねる）。
+ *   FavoriteButton / CartButton は z-index で上に重ねつつ、
+ *   `e.stopPropagation()` で外側リンクの伝播を止めている。
+ *
+ * 機能:
+ * - `ranking`: ランキングバッジ表示（左上）
+ * - `tags`: TagBadge を画像下部に表示
+ * - `discountPercent`: `originalPrice > price` から自動算出
+ * - `isFavorite` / `onFavoriteToggle`: ハート（重ね・トグル）
+ * - `showCartButton`: カート追加 CTA（vertical のみ）
+ */
+declare function ProductCard({ className, name, imageUrl, imageAlt, price, originalPrice, rating, reviewCount, shopName, tags, isFavorite, onFavoriteToggle, href, onCardClick, ranking, deliveryLabel: _deliveryLabel, orientation, showCartButton, onCartAdd, cartButtonLabel, ...props }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export { ProductCard };
+export type { ProductCardProps, ProductCardTag };

package/dist/types/components/patterns/commerce/product-carousel.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type ProductCardProps } from "./product-card";
+interface ProductCarouselProps extends React.ComponentProps<"section"> {
+    title: string;
+    subtitle?: string;
+    moreHref?: string;
+    moreLabel?: string;
+    onMoreClick?: () => void;
+    products: ProductCardProps[];
+    cardSize?: "sm" | "md" | "lg";
+    showRanking?: boolean;
+    showCartButton?: boolean;
+}
+declare function ProductCarousel({ className, title, subtitle, moreHref, moreLabel, onMoreClick, products, cardSize, showRanking, showCartButton, ...props }: ProductCarouselProps): import("react/jsx-runtime").JSX.Element;
+export { ProductCarousel };

package/dist/types/components/patterns/commerce/quantity-selector.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+interface QuantitySelectorProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+    /** 現在の数量 */
+    value: number;
+    /** 最小値 */
+    min?: number;
+    /** 最大値 */
+    max?: number;
+    /** 数量変更時のコールバック */
+    onChange?: (value: number) => void;
+    /** 無効状態 */
+    disabled?: boolean;
+    /** 表示サイズ: sm（カート用コンパクトピル）/ md（詳細ページ用丸ボタン） */
+    size?: "sm" | "md";
+    /** 最小値以下でゴミ箱アイコンを表示するか */
+    showTrash?: boolean;
+    /** 削除時のコールバック */
+    onDelete?: () => void;
+}
+declare function QuantitySelector({ className, value, min, max, onChange, disabled, size, showTrash, onDelete, ...props }: QuantitySelectorProps): import("react/jsx-runtime").JSX.Element;
+export { QuantitySelector };

package/dist/types/components/patterns/commerce/rating-display.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+interface RatingDisplayProps extends React.ComponentProps<"div"> {
+    /** 評価値（0〜5） */
+    rating: number;
+    /** レビュー件数 */
+    reviewCount?: number;
+    /** 表示サイズ */
+    size?: "sm" | "md" | "lg";
+    /** レビュー件数を表示するか */
+    showCount?: boolean;
+    /** 評価値を数値で表示するか */
+    showValue?: boolean;
+}
+declare function RatingDisplay({ className, rating, reviewCount, size, showCount, showValue, ...props }: RatingDisplayProps): import("react/jsx-runtime").JSX.Element;
+export { RatingDisplay };

package/dist/types/components/patterns/commerce/review-card.d.ts

@@ -0,0 +1,22 @@
+interface ReviewCardProps {
+    reviewer: string;
+    /** アバターの頭文字（画像がない場合） */
+    avatarChar?: string;
+    avatarSrc?: string;
+    rating: number;
+    title?: string;
+    body: string;
+    date: string;
+    helpfulCount?: number;
+    onHelpful?: () => void;
+    /** helpful 済みかどうか */
+    helpful?: boolean;
+    className?: string;
+}
+declare function StarRow({ rating, size }: {
+    rating: number;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ReviewCard({ reviewer, avatarChar, avatarSrc, rating, title, body, date, helpfulCount, onHelpful, helpful, className, }: ReviewCardProps): import("react/jsx-runtime").JSX.Element;
+export { ReviewCard, StarRow };
+export type { ReviewCardProps };

package/dist/types/components/patterns/commerce/review-summary.d.ts

@@ -0,0 +1,12 @@
+interface ReviewSummaryProps {
+    /** 平均評価 (0-5) */
+    averageRating: number;
+    /** 総レビュー数 */
+    totalCount: number;
+    /** 各星評価の件数 [5星, 4星, 3星, 2星, 1星] */
+    distribution: [number, number, number, number, number];
+    className?: string;
+}
+declare function ReviewSummary({ averageRating, totalCount, distribution, className, }: ReviewSummaryProps): import("react/jsx-runtime").JSX.Element;
+export { ReviewSummary };
+export type { ReviewSummaryProps };

package/dist/types/components/patterns/confirm-dialog.d.ts

@@ -0,0 +1,32 @@
+interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /**
+     * 処理中に表示するラベル。
+     * i18n 対応: 英語では "Processing…" など任意文字列を渡す。
+     * @default "処理中…"
+     */
+    loadingLabel?: string;
+    /** destructive にすると確認ボタンが赤くなる */
+    variant?: "default" | "destructive";
+    onConfirm: () => void | Promise<void>;
+    loading?: boolean;
+}
+/**
+ * ConfirmDialog — 「アクションを止める」割り込み確認（破壊操作の二段階確認）。
+ *
+ * `role="alertdialog"`（AlertDialog 基盤）。タスク面の絞り込み・フォーム等とは
+ * 別カテゴリで、支援技術には緊急の確認として通知され、**オーバーレイの外側クリックでは
+ * 閉じない**（明示的に確認/キャンセルを選ばせる）。PC/SP とも中央表示の
+ * アラート（iOS/Android の確認アラート慣習に準拠）。
+ *
+ * タスク用の中央モーダル（絞り込み等）が要るときは `Dialog` / `Sheet` /
+ * `ResponsiveDialog` を使う。
+ */
+declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, loadingLabel, variant, onConfirm, loading, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export { ConfirmDialog };
+export type { ConfirmDialogProps };

package/dist/types/components/patterns/cookie-consent.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+export type CookieConsentChoice = "accept" | "essential";
+export interface CookieConsentProps {
+    /**
+     * 表示文言。i18n はアプリ側で解決して string で渡す。
+     * 未指定キーは英語デフォルトを使う。
+     */
+    labels?: {
+        title?: string;
+        description?: string;
+        /** "必要なもののみ" ボタン */
+        essentialOnly?: string;
+        /** "了解" / "すべて受け入れる" ボタン */
+        accept?: string;
+        /** aria-label */
+        ariaLabel?: string;
+    };
+    /** 表示前の遅延 (ms)。レイアウトシフト回避用。既定 1500ms */
+    showDelay?: number;
+    /** localStorage キー名（マルチアプリの衝突回避に） */
+    storageKey?: string;
+    /** 同意決定時に dispatch する CustomEvent 名 */
+    eventName?: string;
+    /** 装飾アイコン（既定: 🍪） */
+    icon?: React.ReactNode;
+    /** 同意決定時のコールバック */
+    onDecide?: (choice: CookieConsentChoice) => void;
+    className?: string;
+}
+/** 同意済かどうかを判定（SSR セーフ） */
+export declare function isCookieDecided(storageKey?: string): boolean;
+/**
+ * CookieConsent — GDPR / APPI 準拠の汎用クッキー同意バナー。
+ *
+ * 動作:
+ *  - 未決定なら `showDelay` 後に画面下に表示
+ *  - 「必要なもののみ」「了解」の 2 択。どちらでも localStorage に記録
+ *  - 決定時に `CustomEvent(eventName)` を window に dispatch
+ *    （CoachMark 等、同意後に出すべき UI が listen できる）
+ *
+ * 文言は labels prop で完全に上書き可能。i18n はアプリ側で解決して渡す。
+ *
+ * ### 使用例
+ * ```tsx
+ * import { CookieConsent, isCookieDecided } from "ksk-design-system"
+ * import { t } from "./i18n"
+ *
+ * <CookieConsent
+ *   labels={{
+ *     title: t("cookie.title"),
+ *     description: t("cookie.desc"),
+ *     essentialOnly: t("cookie.essential_only"),
+ *     accept: t("cookie.accept"),
+ *     ariaLabel: t("cookie.aria_label"),
+ *   }}
+ *   storageKey="myapp-cookie-consent"
+ *   eventName="myapp:cookie-decided"
+ *   onDecide={(choice) => analytics.track("cookie_consent", { choice })}
+ * />
+ * ```
+ */
+export declare function CookieConsent({ labels, showDelay, storageKey, eventName, icon, onDecide, className, }: CookieConsentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+interface EmptyStateProps extends React.ComponentProps<"div"> {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+    /**
+     * アイコンの色クラスを上書きする。コンテキストに応じてアイコン色を変えたいとき。
+     * @example iconClassName="text-[var(--Object-Caution)]"
+     * @default "text-[var(--Object-Low-Emphasis)]"
+     */
+    iconClassName?: string;
+}
+declare function EmptyState({ className, icon, title, description, action, iconClassName, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export { EmptyState };

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+interface ErrorStateProps extends React.ComponentProps<"div"> {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    onRetry?: () => void;
+    retryLabel?: string;
+}
+declare function ErrorState({ className, icon, title, description, onRetry, retryLabel, ...props }: ErrorStateProps): import("react/jsx-runtime").JSX.Element;
+export { ErrorState };

package/dist/types/components/patterns/file-upload.d.ts

@@ -0,0 +1,31 @@
+export interface UploadedFile {
+    file: File;
+    url: string;
+}
+export interface FileUploadProps {
+    /** 受け付けるファイル形式。例: "image/*", ".pdf,.doc" */
+    accept?: string;
+    /** 最大ファイルサイズ（バイト）。例: 5 * 1024 * 1024 = 5MB */
+    maxSize?: number;
+    /** 複数ファイルを許可するか @default false */
+    multiple?: boolean;
+    /** 最大ファイル数（multiple=true 時）@default 10 */
+    maxFiles?: number;
+    onUpload?: (files: File[]) => void;
+    disabled?: boolean;
+    className?: string;
+    /** ドラッグエリアのメインラベル @default "ここにファイルをドロップ" */
+    dragLabel?: string;
+    /** またはテキスト @default "または" */
+    orLabel?: string;
+    /** ブラウズボタンのラベル @default "ファイルを選択" */
+    browseLabel?: string;
+    /** ファイルサイズ超過エラーメッセージ生成関数 */
+    maxSizeLabel?: (maxBytes: number) => string;
+    /** 最大ファイル数超過エラーメッセージ生成関数 */
+    maxFilesLabel?: (max: number) => string;
+    /** 削除ボタンの aria-label @default "削除" */
+    removeLabel?: string;
+}
+declare function FileUpload({ accept, maxSize, multiple, maxFiles, onUpload, disabled, className, dragLabel, orLabel, browseLabel, maxSizeLabel, maxFilesLabel, removeLabel, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export { FileUpload };

package/dist/types/components/patterns/filter-chip.d.ts

@@ -0,0 +1,26 @@
+export interface FilterChipProps {
+    /** チップに表示するラベル */
+    label: string;
+    /** active 時に "ラベル: 値" 形式で併記する値 (任意) */
+    value?: string;
+    /** 絞り込み中（強調表示）か */
+    isActive?: boolean;
+    /** クリック時のコールバック。active なときも呼ばれる（再タップで off にしたい場合は外側で判断）。 */
+    onClick: () => void;
+    className?: string;
+}
+/**
+ * FilterChip — FilterBar の中で使う「絞り込み中かどうか」をトグルするチップ。
+ *
+ * - 非 active: outline スタイル、label のみ
+ * - active: filled (Brand 色)、`value` 指定時は "ラベル: 値"
+ * - 再タップ時は親が onClick で off に戻す想定（onRemove は廃止 — `◯` と `×` が
+ *   視覚的に混乱するためフィードバックを受け統一）
+ *
+ * @example
+ * <FilterChip label="エリア" value="渋谷" isActive onClick={clearAreaFilter} />
+ *
+ * 内部で key を active 状態に紐付けて強制再マウントするため、
+ * isActive=false に戻したときに Chip の selected キャッシュが残らない。
+ */
+export declare function FilterChip({ label, value, isActive, onClick, className }: FilterChipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+interface FooterLinkGroup {
+    title: string;
+    links: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    }[];
+}
+interface FooterProps {
+    logo?: React.ReactNode;
+    linkGroups?: FooterLinkGroup[];
+    paymentIcons?: string[];
+    socialLinks?: {
+        label: string;
+        href?: string;
+        icon: React.ReactNode;
+    }[];
+    copyright?: string;
+    className?: string;
+}
+declare function Footer({ logo, linkGroups, paymentIcons, socialLinks, copyright, className, }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export { Footer };
+export type { FooterProps, FooterLinkGroup };

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+/**
+ * `required` の見た目をどう出すか。
+ * - "asterisk"（既定）: `*` 1 文字。コンパクト・国際標準。
+ * - "pill"   : 「必須」/「任意」のバッジ。日本語フォーム慣習。
+ *              required=false でも「任意」を明示するため、optional 側の表示も
+ *              この prop が制御する。
+ * - "none"   : 何も出さない。required 単独で aria 属性のみ意味を持つ。
+ */
+type RequiredStyle = "asterisk" | "pill" | "none";
+interface FormFieldProps extends React.ComponentProps<"div"> {
+    label: string;
+    htmlFor?: string;
+    required?: boolean;
+    error?: string;
+    description?: string;
+    /**
+     * required の表示形式。詳細は RequiredStyle の JSDoc。
+     * 既定: "asterisk"。
+     */
+    requiredStyle?: RequiredStyle;
+    /**
+     * ラベル右側に置くメタ情報（バッジ / 文字数カウンタ / ヘルプアイコン等）。
+     * 「タイトル + 字数 12/200」「タイトル + 種別バッジ」のような用途。
+     */
+    endLabel?: React.ReactNode;
+}
+declare function FormField({ className, label, htmlFor, required, error, description, requiredStyle, endLabel, children, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export { FormField };
+export type { FormFieldProps, RequiredStyle };

package/dist/types/components/patterns/form.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+interface FormRootProps extends React.ComponentProps<"form"> {
+    /** Prevent default form submission */
+    preventDefault?: boolean;
+}
+declare function FormRoot({ className, preventDefault, onSubmit, ...props }: FormRootProps): import("react/jsx-runtime").JSX.Element;
+interface FormSectionProps extends React.ComponentProps<"fieldset"> {
+    title?: string;
+    description?: string;
+}
+declare function FormSection({ className, title, description, children, ...props }: FormSectionProps): import("react/jsx-runtime").JSX.Element;
+declare function FormActions({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { FormRoot, FormSection, FormActions };