ksk-design-system 1.35.0

package/dist/server-variants-Dr_V3bDI.js

@@ -0,0 +1,55 @@
+import { cva as e } from "class-variance-authority";
+const t = e(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap typo-label-md transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--Brand-Primary)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Primary-Button)] active:bg-[var(--Active-Primary-Button)] rounded-full",
+        secondary: "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)] border border-[var(--Border-Medium-Emphasis)] hover:bg-[var(--Hover-Secondary-Button)] rounded-full",
+        "secondary-switch": "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)] border border-[var(--Border-Accent-Primary)] hover:bg-[var(--Hover-Secondary-Button)] rounded-full",
+        tertiary: "bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)] border border-[var(--Border-Medium-Emphasis)] hover:bg-[var(--Hover-Tertiary-Button)] rounded-full",
+        ghost: "text-[var(--Text-Accent-Primary)] hover:bg-[var(--Hover-Ghost-Button)] rounded-full",
+        destructive: "bg-[var(--Caution-Base)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Destructive-Button)] active:bg-[var(--Active-Destructive-Button)] rounded-full",
+        link: "text-[var(--Text-Accent-Primary)] underline-offset-4 hover:underline",
+        // glass の押下は不透明度を落とさず「わずかに縮んで増光」させる
+        // （iOS の Liquid Glass はタップでガラスがハイライトする挙動）。
+        // リリース時はオーバーシュートする bezier で液体的に弾ませる。
+        glass: "glass glass-specular text-[var(--Text-High-Emphasis)] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] hover:brightness-[1.06] active:scale-[0.96] active:brightness-110 rounded-full",
+        accent: "bg-gradient-to-r from-[var(--Brand-Primary)] to-[var(--Brand-Action)] text-[var(--Text-on-Inverse)] border border-transparent hover:opacity-90 rounded-full",
+        // inverse — 暗背景・ヒーローセクション上に乗せる primary CTA。
+        // 白背景 + アクセント文字（Brand-Primary）。
+        inverse: "bg-[var(--Surface-Primary)] text-[var(--Brand-Primary)] hover:bg-[var(--Primitive-White-Alpha-900)] active:bg-[var(--Primitive-White-Alpha-800)] disabled:bg-[var(--Primitive-White-Alpha-300)] disabled:text-[var(--Text-Disable)] rounded-full",
+        // ghost-inverse — 暗背景・ヒーローセクション上の secondary CTA。
+        // 透過背景 + 白文字 + 白枠。
+        "ghost-inverse": "border border-[var(--Primitive-White-Alpha-300)] bg-transparent text-[var(--Text-on-Inverse)] hover:bg-[var(--Primitive-White-Alpha-200)] hover:border-[var(--Primitive-White-Alpha-900)] active:bg-[var(--Primitive-White-Alpha-300)] disabled:border-[var(--Primitive-White-Alpha-200)] disabled:text-[var(--Primitive-White-Alpha-300)] rounded-full"
+      },
+      size: {
+        xs: "h-6 px-2 typo-label-xs",
+        sm: "h-8 px-3 typo-label-sm",
+        default: "h-10 px-4 typo-label-md",
+        lg: "h-12 px-6 typo-label-md",
+        xl: "h-14 px-8 typo-label-lg",
+        // hero — トップページの hero / final-CTA 専用のピル型特大 CTA。
+        // min-h-14 + rounded-full + typo-label-lg。xl とは異なり常に丸い。
+        hero: "min-h-14 rounded-full px-6 typo-label-lg",
+        icon: "size-10",
+        "icon-sm": "size-8",
+        "icon-lg": "size-12",
+        "icon-xl": "size-11",
+        match: "h-12 px-4 typo-label-md"
+      },
+      layout: {
+        horizontal: "",
+        vertical: "flex-col gap-1 h-14 rounded-2xl py-2 typo-label-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      layout: "horizontal"
+    }
+  }
+);
+export {
+  t as b
+};

package/dist/types/class-names.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Server-safe class-name generators.
+ *
+ * このエントリは **"use client" を持たない**ため Next.js App Router の
+ * Server Component から直接 import できる。Button などコンポーネント本体は
+ * React フックを含むため "use client" バンドルに入るが、その className
+ * 生成関数 (`buttonVariants` 等) は純粋な cva 呼び出しなので、ここから
+ * 提供する。
+ *
+ * 使い方:
+ * ```tsx
+ * // app/some-rsc/page.tsx — Server Component
+ * import { buttonVariants } from "ksk-design-system/class-names"
+ *
+ * export default function Page() {
+ *   return (
+ *     <Link href="/" className={buttonVariants({ variant: "tertiary" })}>
+ *       戻る
+ *     </Link>
+ *   )
+ * }
+ * ```
+ *
+ * 既存の `import { buttonVariants } from "ksk-design-system"` も引き続き
+ * 動作するが、Server Component から呼ぶ場合はこちら経由が必須。
+ */
+export { buttonVariants, type ButtonVariantsProps, } from "@/lib/server-variants/button-variants";

package/dist/types/components/patterns/admin/bulk-actions.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+interface BulkActionsProps extends React.ComponentProps<"div"> {
+    /** 選択件数 */
+    selectedCount: number;
+    /** 選択解除ボタンクリック時 */
+    onClear?: () => void;
+}
+/**
+ * 一括操作バー（FAB型）
+ *
+ * テーブル行を1件以上選択すると画面下部に浮き上がるフローティングバー。
+ * 選択件数 + アクションボタン群を横並びで表示。
+ * selectedCount が 0 のとき自動で非表示になる。
+ */
+declare function BulkActions({ selectedCount, onClear, children, className, ...props }: BulkActionsProps): import("react/jsx-runtime").JSX.Element;
+export { BulkActions };
+export type { BulkActionsProps };

package/dist/types/components/patterns/admin/chart-controls.d.ts

@@ -0,0 +1,16 @@
+type Granularity = "hour" | "day" | "week" | "month";
+type Period = "7d" | "30d" | "90d" | "1y" | "custom";
+interface ChartControlsProps {
+    granularity?: Granularity;
+    onGranularityChange?: (value: Granularity) => void;
+    period?: Period;
+    onPeriodChange?: (value: Period) => void;
+    showComparison?: boolean;
+    onComparisonChange?: (value: boolean) => void;
+    /** カスタム期間ボタンクリック */
+    onCustomPeriod?: () => void;
+    className?: string;
+}
+declare function ChartControls({ granularity, onGranularityChange, period, onPeriodChange, showComparison, onComparisonChange, onCustomPeriod, className, }: ChartControlsProps): import("react/jsx-runtime").JSX.Element;
+export { ChartControls };
+export type { ChartControlsProps, Granularity, Period };

package/dist/types/components/patterns/admin/data-table.d.ts

@@ -0,0 +1,165 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+type SortDirection = "asc" | "desc" | null;
+/** 列の sticky 位置。`true` は `"left"` のエイリアス。 */
+type StickyPosition = "left" | "right" | true;
+/**
+ * 横スクロール時に列を「貼り付け」表示するためのスタイル/クラスを生成するヘルパ。
+ *
+ * `DataTable` 自体が `overflow-x-auto` のスクロールコンテナになっているため、
+ * 子の `<th>` / `<td>` に `position: sticky` と `left`/`right` を指定するだけで
+ * 縦方向（行）にもスクロールしながら水平方向の固定が可能になります。
+ *
+ * 行ホバー時の背景色を上書きするため、固定列は不透明な `--Surface-Primary` を
+ * 明示的に塗ります（ヘッダー行は `--Surface-Secondary`）。
+ *
+ * @param position - "left" | "right" | true (= "left")
+ * @param offset - 同じ側に複数の固定列がある場合のオフセット(px)
+ * @param isHeader - ヘッダー行のセルの場合は true
+ */
+declare function getStickyCellProps(position: StickyPosition, offset?: number, isHeader?: boolean): {
+    className: string;
+    style: React.CSSProperties;
+};
+interface DataTableProps extends React.ComponentProps<"div"> {
+}
+declare function DataTable({ className, children, ...props }: DataTableProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableTableProps extends React.ComponentProps<"table"> {
+}
+declare function DataTableTable({ className, children, ...props }: DataTableTableProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableHeaderProps extends React.ComponentProps<"thead"> {
+}
+declare function DataTableHeader({ className, children, ...props }: DataTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableBodyProps extends React.ComponentProps<"tbody"> {
+}
+declare function DataTableBody({ className, children, ...props }: DataTableBodyProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableRowProps extends React.ComponentProps<"tr"> {
+    selected?: boolean;
+}
+declare function DataTableRow({ className, selected, children, ...props }: DataTableRowProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableHeadProps extends React.ComponentProps<"th"> {
+    sortable?: boolean;
+    sortDirection?: SortDirection;
+    onSort?: () => void;
+    /** 横スクロール時に列を貼り付け表示する */
+    sticky?: StickyPosition;
+    /** 同じ側に複数の固定列がある場合のオフセット(px) */
+    stickyOffset?: number;
+}
+declare function DataTableHead({ className, children, sortable, sortDirection, onSort, sticky, stickyOffset, style, ...props }: DataTableHeadProps): import("react/jsx-runtime").JSX.Element;
+declare const dataTableCellVariants: (props?: {
+    align?: "center" | "left" | "right";
+    width?: "checkbox" | "auto" | "action" | "sm" | "lg" | "xl" | "md" | "narrow";
+} & import("class-variance-authority/types").ClassProp) => string;
+interface DataTableCellProps extends Omit<React.ComponentProps<"td">, "align" | "width">, VariantProps<typeof dataTableCellVariants> {
+    /** 横スクロール時に列を貼り付け表示する */
+    sticky?: StickyPosition;
+    /** 同じ側に複数の固定列がある場合のオフセット(px) */
+    stickyOffset?: number;
+}
+declare function DataTableCell({ className, align, width, children, sticky, stickyOffset, style, ...props }: DataTableCellProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableAvatarCellProps extends React.ComponentProps<"td"> {
+    src?: string;
+    fallback?: string;
+    title: string;
+    caption?: string;
+    /** 横スクロール時に列を貼り付け表示する */
+    sticky?: StickyPosition;
+    /** 同じ側に複数の固定列がある場合のオフセット(px) */
+    stickyOffset?: number;
+}
+declare function DataTableAvatarCell({ className, src, fallback, title, caption, sticky, stickyOffset, style, ...props }: DataTableAvatarCellProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableImageCellProps extends React.ComponentProps<"td"> {
+    src: string;
+    alt?: string;
+    title?: string;
+    caption?: string;
+    imageSize?: number;
+}
+declare function DataTableImageCell({ className, src, alt, title, caption, imageSize, ...props }: DataTableImageCellProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableCheckboxCellProps extends React.ComponentProps<"td"> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    indeterminate?: boolean;
+    /**
+     * 描画する要素。ヘッダー行（`<tr>` in `<thead>`）では `"th"` を指定して
+     * `<th>` の中に `<td>` がネストされる HTML 妥当性 / hydration エラーを避ける。
+     * @default "td"
+     */
+    as?: "td" | "th";
+    /** 横スクロール時に列を貼り付け表示する */
+    sticky?: StickyPosition;
+    /** 同じ側に複数の固定列がある場合のオフセット(px) */
+    stickyOffset?: number;
+}
+declare function DataTableCheckboxCell({ className, checked, onCheckedChange, indeterminate, as: Element, sticky, stickyOffset, style, ...props }: DataTableCheckboxCellProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableActionMenuItem {
+    label: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    destructive?: boolean;
+}
+interface DataTableActionCellProps extends React.ComponentProps<"td"> {
+    items: DataTableActionMenuItem[];
+}
+declare function DataTableActionCell({ className, items, ...props }: DataTableActionCellProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableInputCellProps extends Omit<React.ComponentProps<"td">, "onChange"> {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+}
+declare function DataTableInputCell({ className, value, onChange, placeholder, ...props }: DataTableInputCellProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableSelectCellProps extends React.ComponentProps<"td"> {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+}
+declare function DataTableSelectCell({ className, value, onValueChange, placeholder, options, ...props }: DataTableSelectCellProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableNumberCellProps extends React.ComponentProps<"td"> {
+    value: number | string;
+    prefix?: string;
+    suffix?: string;
+}
+declare function DataTableNumberCell({ className, value, prefix, suffix, children, ...props }: DataTableNumberCellProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableDragHandleCellProps extends React.ComponentProps<"td"> {
+}
+declare function DataTableDragHandleCell({ className, ...props }: DataTableDragHandleCellProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableLinkCellProps extends React.ComponentProps<"td"> {
+    href: string;
+    external?: boolean;
+    children: React.ReactNode;
+}
+declare function DataTableLinkCell({ className, href, external, children, ...props }: DataTableLinkCellProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableBulkActionsProps extends React.ComponentProps<"div"> {
+    selectedCount: number;
+}
+declare function DataTableBulkActions({ className, selectedCount, children, ...props }: DataTableBulkActionsProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableSectionRowProps extends React.ComponentProps<"tr"> {
+    label: string;
+    count?: number;
+    open?: boolean;
+    onToggle?: () => void;
+    colSpan?: number;
+}
+declare function DataTableSectionRow({ className, label, count, open, onToggle, colSpan, ...props }: DataTableSectionRowProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableAddRowProps extends React.ComponentProps<"tr"> {
+    label?: string;
+    onClick?: () => void;
+    colSpan?: number;
+}
+declare function DataTableAddRow({ className, label, onClick, colSpan, ...props }: DataTableAddRowProps): import("react/jsx-runtime").JSX.Element;
+interface DataTableEmptyStateProps extends React.ComponentProps<"tr"> {
+    icon?: React.ReactNode;
+    message?: string;
+    description?: string;
+    action?: React.ReactNode;
+    colSpan?: number;
+}
+declare function DataTableEmptyState({ className, icon, message, description, action, colSpan, ...props }: DataTableEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export { DataTable, DataTableTable, DataTableHeader, DataTableBody, DataTableRow, DataTableHead, DataTableCell, DataTableAvatarCell, DataTableImageCell, DataTableCheckboxCell, DataTableActionCell, DataTableInputCell, DataTableSelectCell, DataTableNumberCell, DataTableDragHandleCell, DataTableLinkCell, DataTableBulkActions, DataTableSectionRow, DataTableAddRow, DataTableEmptyState, };
+export { getStickyCellProps };
+export type { SortDirection, DataTableActionMenuItem, StickyPosition };

package/dist/types/components/patterns/admin/image-uploader.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+interface ImageUploaderImage {
+    src: string;
+    alt: string;
+}
+interface ImageUploaderProps extends React.ComponentProps<"div"> {
+    images?: ImageUploaderImage[];
+    onAdd?: () => void;
+    onRemove?: (index: number) => void;
+    maxImages?: number;
+    columns?: number;
+}
+declare function ImageUploader({ images, onAdd, onRemove, maxImages, columns, className, ...props }: ImageUploaderProps): import("react/jsx-runtime").JSX.Element;
+export { ImageUploader };

package/dist/types/components/patterns/admin/kebab-menu.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+interface KebabMenuItem {
+    label: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    destructive?: boolean;
+}
+interface KebabMenuProps extends React.ComponentProps<"button"> {
+    items: KebabMenuItem[];
+}
+/**
+ * 縦三点メニュー。DropdownMenu（Radix）を内部利用しており、
+ * キーボード操作・Esc クローズ・フォーカス管理・role="menu" を備える。
+ */
+declare function KebabMenu({ items, className, ...props }: KebabMenuProps): import("react/jsx-runtime").JSX.Element;
+export { KebabMenu };
+export type { KebabMenuItem };

package/dist/types/components/patterns/admin/notification-list.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+interface NotificationItem {
+    id: string;
+    message: string;
+    date: string;
+    isUnread?: boolean;
+    href?: string;
+}
+interface NotificationListProps extends React.ComponentProps<"div"> {
+    notifications: NotificationItem[];
+    variant?: "vertical" | "horizontal";
+    emptyMessage?: string;
+}
+declare function NotificationList({ notifications, variant, emptyMessage, className, ...props }: NotificationListProps): import("react/jsx-runtime").JSX.Element;
+export { NotificationList };
+export type { NotificationItem };

package/dist/types/components/patterns/admin/search-panel.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+interface SearchPanelProps extends React.ComponentProps<"div"> {
+    onSearch?: () => void;
+    onReset?: () => void;
+    columns?: 2 | 3 | 4;
+    layout?: "grid" | "flex";
+}
+declare function SearchPanel({ children, onSearch, onReset, columns, layout, className, ...props }: SearchPanelProps): import("react/jsx-runtime").JSX.Element;
+export { SearchPanel };

package/dist/types/components/patterns/admin/status-tabs.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+interface StatusTabItem {
+    label: string;
+    count: number;
+}
+interface StatusTabsProps extends Omit<React.ComponentProps<"div">, "onSelect"> {
+    items: StatusTabItem[];
+    activeIndex?: number;
+    onSelect?: (index: number) => void;
+}
+declare function StatusTabs({ items, activeIndex, onSelect, className, ...props }: StatusTabsProps): import("react/jsx-runtime").JSX.Element;
+export { StatusTabs };
+export type { StatusTabItem };

package/dist/types/components/patterns/app-header.d.ts

@@ -0,0 +1,76 @@
+import * as React from "react";
+interface AppHeaderNavItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    isActive?: boolean;
+}
+interface AppHeaderProps {
+    /**
+     * レイアウト:
+     * - `default`（既定）: `leading` + `title` + `trailing` の 3 カラム
+     * - `logo`: 左にロゴ、右に actions（top page 想定）
+     * - `logo-center`: ロゴ中央（checkout / minimal flow 想定）
+     * - `back`: 左に戻るボタン、中央タイトル、右 actions（sub page）
+     * - `back-search`: 左に戻るボタン、中央に検索 slot、右 actions
+     */
+    layout?: "default" | "logo" | "logo-center" | "back" | "back-search";
+    /** 左端スロット（戻るボタン、ハンバーガー等） */
+    leading?: React.ReactNode;
+    /** ロゴ要素（layout="logo" / "logo-center" で使用） */
+    logo?: React.ReactNode;
+    /** 中央タイトル（layout="default" / "back" で使用） */
+    title?: React.ReactNode;
+    /** サブタイトル（タイトルの下に表示） */
+    subtitle?: React.ReactNode;
+    /** 中央スロット（layout="back-search" で使用） */
+    centerSlot?: React.ReactNode;
+    /** 右端スロット（アクションボタン群） */
+    trailing?: React.ReactNode;
+    /** 旧 prop 名（trailing と等価）。互換用 */
+    rightSlot?: React.ReactNode;
+    /**
+     * PC 用インラインナビ。`@[768px]` 以上で表示される。
+     * SP では非表示（ハンバーガー → MenuDrawer 経由を想定）。
+     */
+    nav?: AppHeaderNavItem[];
+    /** ヘッダー下部に追加で出すスロット（タブ・ブレッドクラム等） */
+    bottomSlot?: React.ReactNode;
+    /** 固定ヘッダー（スクロールに追従しない） */
+    sticky?: boolean;
+    /** 下線ボーダー */
+    bordered?: boolean;
+    /**
+     * 外観バリアント:
+     * - "default"     : 通常（Surface-Primary 背景 + ボーダー）
+     * - "glass"       : Liquid Glass（コンテンツに重ねる半透明）
+     * - "transparent" : 完全透明（スクロール連動で背景を切り替えるときの初期状態）
+     */
+    variant?: "default" | "glass" | "transparent";
+    className?: string;
+}
+/**
+ * AppHeader — アプリ汎用ヘッダー。
+ *
+ * 5 つの layout モード × 3 つの visual variant の組み合わせで、
+ * SP / PC で別実装が必要だったヘッダーを 1 コンポーネントに統合する。
+ *
+ * @container クエリで SP/PC を切り替えるため、利用側で `@container` を
+ * 宣言した親要素の中に置く必要がある（通常 layout shell が宣言）。
+ *
+ * @example
+ * // サブページ（戻る + タイトル）
+ * <AppHeader layout="back" leading={<BackButton />} title="設定" />
+ *
+ * @example
+ * // トップ（ロゴ + PC 用 inline nav）
+ * <AppHeader
+ *   layout="logo"
+ *   logo={<Logo />}
+ *   nav={[{label: "求人", href: "/jobs"}, {label: "企業", href: "/companies"}]}
+ *   trailing={<UserMenu />}
+ * />
+ */
+declare function AppHeader({ layout, leading, logo, title, subtitle, centerSlot, trailing, rightSlot, nav, bottomSlot, sticky, bordered, variant, className, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { AppHeader };
+export type { AppHeaderProps, AppHeaderNavItem };

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

@@ -0,0 +1,25 @@
+interface BannerItem {
+    /** 背景画像URL（なければ gradient） */
+    imageSrc?: string;
+    /** グラデーション色（imageSrcがない場合） */
+    gradient?: string;
+    caption?: string;
+    subCaption?: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface BannerCarouselProps {
+    title?: string;
+    items: BannerItem[];
+    /** 「もっと見る」テキスト */
+    moreLabel?: string;
+    onMore?: () => void;
+    /** バナーの縦横比 */
+    itemAspectRatio?: "2/1" | "3/2" | "4/3";
+    /** バナー幅（px） */
+    itemWidth?: number;
+    className?: string;
+}
+declare function BannerCarousel({ title, items, moreLabel, onMore, itemAspectRatio, itemWidth, className, }: BannerCarouselProps): import("react/jsx-runtime").JSX.Element;
+export { BannerCarousel };
+export type { BannerCarouselProps, BannerItem };

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const bannerVariants: (props?: {
+    variant?: "success" | "info" | "warning" | "caution";
+} & import("class-variance-authority/types").ClassProp) => string;
+interface BannerProps extends React.ComponentProps<"div">, VariantProps<typeof bannerVariants> {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+declare function Banner({ className, variant, icon, title, description, action, children, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
+export { Banner, bannerVariants };

package/dist/types/components/patterns/bottom-sheet-form.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+interface BottomSheetFormProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    onSubmit: () => void | Promise<void>;
+    loading?: boolean;
+    /** フォームコンテンツ */
+    children: React.ReactNode;
+    className?: string;
+}
+declare function BottomSheetForm({ open, onOpenChange, title, description, submitLabel, cancelLabel, onSubmit, loading, children, className, }: BottomSheetFormProps): import("react/jsx-runtime").JSX.Element;
+export { BottomSheetForm };
+export type { BottomSheetFormProps };

package/dist/types/components/patterns/category-nav.d.ts

@@ -0,0 +1,43 @@
+export interface CategoryNavItem {
+    /** カテゴリ名 */
+    name: string;
+    /** リンクURL */
+    href?: string;
+    /** アイコン画像URL */
+    imageUrl: string;
+    /** アイコンの代替テキスト */
+    imageAlt?: string;
+    /** 選択中フラグ */
+    isSelected?: boolean;
+    /** クリックハンドラ */
+    onClick?: () => void;
+}
+export interface CategoryNavProps {
+    /** カテゴリリスト */
+    items: CategoryNavItem[];
+    /** 追加クラス */
+    className?: string;
+}
+/**
+ * CategoryIconStrip — カテゴリアイコンフィルター行
+ *
+ * 商品一覧・検索結果ページ上部に設置するコンパクトなカテゴリフィルター。
+ * 小さな円アイコン（40px）＋ラベルを横スクロールで並べる。
+ *
+ * CategoryScroll との違い:
+ * - セクションタイトルなし（フィルターとして使用）
+ * - アイコンが小さい（40px）
+ * - isSelected で選択状態を持てる
+ *
+ * ### 使用例
+ * ```tsx
+ * <CategoryIconStrip
+ *   items={[
+ *     { name: "バースデー", imageUrl: "/cat1.jpg", isSelected: true, onClick: () => setFilter("birthday") },
+ *     { name: "記念日", imageUrl: "/cat2.jpg", onClick: () => setFilter("anniversary") },
+ *   ]}
+ * />
+ * ```
+ */
+declare function CategoryNav({ items, className }: CategoryNavProps): import("react/jsx-runtime").JSX.Element;
+export { CategoryNav };

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

@@ -0,0 +1,53 @@
+export interface CategoryScrollItem {
+    /** カテゴリ名 */
+    name: string;
+    /** リンクURL */
+    href: string;
+    /** サムネイル画像URL */
+    imageUrl: string;
+}
+export interface CategoryScrollProps {
+    /** セクションタイトル */
+    title: string;
+    /** 「もっと見る」リンクURL */
+    moreHref?: string;
+    /** カテゴリリスト */
+    items: CategoryScrollItem[];
+    /** サムネイルサイズ (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: 列×行のグリッド（横スクロール）
+     */
+    layout?: "scroll" | "grid";
+    /** グリッドの行数 (layout="grid" 時, default: 3) */
+    gridRows?: number;
+    /** 追加クラス */
+    className?: string;
+}
+/**
+ * CategoryScroll — カテゴリスクロールセクション
+ *
+ * セクションタイトル + カテゴリサムネイル（画像＋ラベル）を横スクロールで表示。
+ * トップページ・一覧ページのカテゴリナビゲーションに使用。
+ *
+ * ### 使用例
+ * ```tsx
+ * <CategoryScroll
+ *   title="カテゴリから探す"
+ *   moreHref="/categories"
+ *   items={categories}
+ *   thumbnailSize="md"
+ *   thumbnailShape="square"
+ * />
+ * ```
+ *
+ * ### AI 向け使用ルール
+ * - thumbnailShape="circle" + thumbnailSize="sm" でクイックアクセスアイコン風
+ * - layout="grid" で複数行グリッド表示（本番カテゴリ準拠）
+ */
+declare function CategoryScroll({ title, moreHref, items, thumbnailSize, thumbnailShape, layout, gridRows, className, }: CategoryScrollProps): import("react/jsx-runtime").JSX.Element;
+export { CategoryScroll };

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+interface ChipSelectorOption<T extends string = string> {
+    label: string;
+    value: T;
+    icon?: React.ReactNode;
+}
+interface ChipSelectorProps<T extends string = string> {
+    options: ChipSelectorOption<T>[];
+    value: T[];
+    onChange: (value: T[]) => void;
+    /** true: 複数選択可 / false: 1つのみ */
+    multiple?: boolean;
+    /** 最大選択数（multiple=true 時のみ有効） */
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+declare function ChipSelector<T extends string = string>({ options, value, onChange, multiple, max, size, className, }: ChipSelectorProps<T>): import("react/jsx-runtime").JSX.Element;
+export { ChipSelector };
+export type { ChipSelectorProps, ChipSelectorOption };