@cakejp/design-system 0.12.0 → 0.14.0

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 export type SectionHeaderSize = "3xl" | "2xl" | "xl" | "lg" | "md" | "sm";
+export type SectionHeaderDesktopSize = "5xl" | "4xl";
 export interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     /** セクションタイトル */
     title: string;
@@ -21,8 +22,13 @@ export interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
     prevDisabled?: boolean;
     /** カルーセル用: 次へボタン無効化 */
     nextDisabled?: boolean;
-    /** タイトルのサイズ（Figma 準拠: 3xl=28px / 2xl=24px / xl=21px / lg=18px / md=16px / sm=14px） */
+    /** SPを含む基本サイズ（3xl=通常ページの主見出し。2xl以下=セクション見出し） */
     size?: SectionHeaderSize;
+    /**
+     * LP・マーケティング系ヒーローのPCサイズ。
+     * `size="3xl" desktopSize="5xl"` のように指定し、通常ページでは使わない。
+     */
+    desktopSize?: SectionHeaderDesktopSize;
     /** 見出しのHTML要素を上書き（デフォルトは size に応じて h1〜h6 を自動選択） */
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
     /**
@@ -48,6 +54,7 @@ export interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
  * ### AI 向け使用ルール
  *
  * - ページの主タイトル: `size="3xl"` or `size="2xl"`
+ * - LP・マーケティング系ヒーロー: `size="3xl" desktopSize="4xl"` または `desktopSize="5xl"`
  * - セクション見出し（ランキング等）: `size="xl"` or `size="lg"`（デフォルト）
  * - 小見出し・グループラベル: `size="md"` or `size="sm"`
  * - `as` で見出しレベルを上書き可能（同一ページに h1 が複数必要な場合など）
@@ -55,5 +62,5 @@ export interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
  * - `action` に任意の ReactNode（Button 等）を渡して右側にアクションを配置可能
  * - `align="center"` でランディング/ガイド系の中央寄せ大見出しに切替（`eyebrow` に Badge 等を載せられる）
  */
-declare function SectionHeader({ className, title, subtitle, moreHref, moreLabel, onMoreClick, action, onPrev, onNext, prevDisabled, nextDisabled, size, as, align, eyebrow, ...props }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function SectionHeader({ className, title, subtitle, moreHref, moreLabel, onMoreClick, action, onPrev, onNext, prevDisabled, nextDisabled, size, desktopSize, as, align, eyebrow, ...props }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
 export { SectionHeader };

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

@@ -1,5 +1,12 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
+export type SectionScrim = "none" | "dark" | "light" | "bottom-dark";
+export interface SectionProps extends Omit<React.ComponentProps<"section">, "background">, VariantProps<typeof sectionVariants> {
+    /** 背景画像 URL。左右余白は引き続き内側の Container が所有する */
+    backgroundImage?: string;
+    /** 背景画像上の文字を読みやすくする DS 管理のオーバーレイ */
+    scrim?: SectionScrim;
+}
 /**
  * Section — 全幅の縦リズム＋（任意で）背景色付きの帯。
  *
@@ -8,6 +15,8 @@ import { type VariantProps } from "class-variance-authority";
  *   背景色は Section（全幅）が持ち、中央寄せは Container が持つ ── この分担により
  *   「背景帯は画面端まで、コンテンツは中央寄せ」が二重がけなしで成立する。
  * - 縦余白は SP/PC ペアで `--Space-Section-*` トークンを消費する（rem 直書きの撲滅）。
+ * - **色地の Section（`subtle` / `accent-subtle`）は配下 Card のサーフェス文脈を宣言する**
+ *   （`--card-surface: var(--Surface-Primary)`）。詳細は下記。
  *
  * 推奨パターン:
  * ```tsx
@@ -17,10 +26,34 @@ import { type VariantProps } from "class-variance-authority";
  *   </Container>
  * </Section>
  * ```
+ *
+ * ## 配下 Card へのサーフェス伝播（#150）
+ *
+ * `background="subtle"`（Surface-Tertiary）/ `"accent-subtle"` は色地なので、既定の
+ * `bg-card`（Surface-Secondary）のままでは Card が地に沈む。Section が
+ * `--card-surface: var(--Surface-Primary)` を配下に流すことで、**Section 配下の Card は
+ * `surface` 未指定でも白**になる（`Card surface="primary"` の明示指定は従来通り優先）。
+ *
+ * 「グレー地の上の Card は白」を**構造で**保証するのが狙いで、あとからカードを足しても
+ * prop の付け忘れが起きない。伝播は CSS カスタムプロパティのカスケードのみで、React context は
+ * 使わない（Server Component のまま使える／DS 外の要素は影響を受けない）。
+ *
+ * `background="none"` は文脈をリセットしない。色地 Section の内側に入れ子にした
+ * `background="none"` の Section は背景が透過して外側の色地が見えるため、
+ * 配下の Card も外側の文脈（白）を引き継ぐのが正しい。
+ *
+ * dark では伝播値を切り替えない（`Surface-Secondary` のまま）。dark の Surface-Secondary は
+ * 「地の上に重ねる半透明白」なので色地の上でも一段明るく浮き、そもそも沈まない。
+ * ここで `Surface-Primary`（ほぼ不透明の黒）を強制すると地より暗い「穴」になり
+ * elevation が反転する。※ `Card surface="primary"` の**明示指定**は light/dark とも
+ * Surface-Primary で固定（明示は明示のまま）。
  */
 declare const sectionVariants: (props?: {
     spacing?: "sm" | "lg" | "xl" | "md";
     background?: "none" | "accent-subtle" | "subtle";
 } & import("class-variance-authority/types").ClassProp) => string;
-declare function Section({ className, spacing, background, ...props }: React.ComponentProps<"section"> & VariantProps<typeof sectionVariants>): import("react/jsx-runtime").JSX.Element;
-export { Section, sectionVariants };
+declare const sectionScrimVariants: (props?: {
+    scrim?: "none" | "dark" | "light" | "bottom-dark";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function Section({ className, spacing, background, backgroundImage, scrim, style, ...props }: SectionProps): import("react/jsx-runtime").JSX.Element;
+export { Section, sectionVariants, sectionScrimVariants };

package/dist/types/components/primitives/social-login-button.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-export type SocialProvider = "line" | "amazon" | "google" | "apple";
+import { type SocialPlatform } from "../../components/foundations/social-icon";
+export type SocialProvider = Extract<SocialPlatform, "line" | "amazon" | "google" | "apple">;
 export interface SocialLoginButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** ソーシャルプロバイダー */
     provider: SocialProvider;
@@ -19,6 +20,7 @@ export interface SocialLoginButtonProps extends React.ButtonHTMLAttributes<HTMLB
  * - フルサイズ: `<SocialLoginButton provider="line" />`
  * - アイコンのみ: `<SocialLoginButton provider="google" size="icon" />`
  * - LINE は緑背景、他は白背景、Apple は黒背景
+ * - ブランドロゴは `SocialIcon` に集約している。個別に SVG を手組みしない
  */
 declare function SocialLoginButton({ provider, size, label, className, ...props }: SocialLoginButtonProps): import("react/jsx-runtime").JSX.Element;
 export { SocialLoginButton };

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface TimelineItem {
+    /** 省略時は1始まりの連番を表示。IconBadge 等の ReactNode も渡せる */
+    marker?: React.ReactNode;
+    /** 各項目の見出し */
+    title: React.ReactNode;
+    /** Card・本文・メタ情報等の任意コンテンツ */
+    children?: React.ReactNode;
+}
+export interface TimelineProps extends Omit<React.ComponentProps<"ol">, "children"> {
+    items: TimelineItem[];
+    /** タイムライン全体の日本語ラベル */
+    ariaLabel?: string;
+}
+/**
+ * 本文付きの縦タイムライン。
+ *
+ * 応募フロー・オンボーディング手順・注文／配送履歴のように、各段階へ本文を
+ * ぶら下げる用途で使う。現在位置を示す横型の `ProgressSteps` とは役割が異なる。
+ * コネクター線は DS が所有するため consumer 側で `::before` を手組みしない。
+ */
+declare function Timeline({ items, ariaLabel, className, ...props }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+export { Timeline };

package/dist/types/components/primitives/workspace-shell.d.ts

@@ -62,6 +62,8 @@ export interface WorkspaceShellProps {
  *   右上=`primaryAction`（ワークスペース全体の上位アクションがある場合のみ）。
  * - `sectionNav` は編集内ナビのみ。グロナビは置かない。
  * - `sectionNav` は Surface-Secondary から浮いた独立パネルとして、シェル側で角丸パネルにラップされる。
+ * - 地が Surface-Secondary なので、配下 `Card` の既定サーフェスを白にする文脈
+ *   （`--card-surface`）をシェルが宣言する。`Card` は `surface` 未指定のまま地から浮く（#150）。
  * - 標準的な編集は `AdminShell`（Standard Page（Edit）／旧 Form Page）。複雑・集中編集・没入執筆のみ本コンポーネント。
  *
  * 判断基準は contracts/screen-patterns.json / guidelines/foundations/screen-patterns.md を参照。

package/dist/types/index.d.ts

@@ -14,6 +14,8 @@ export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader,
 export { Checkbox } from "./components/foundations/checkbox";
 export type { CheckboxProps } from "./components/foundations/checkbox";
 export { CheckboxCardGroup, CheckboxCardItem } from "./components/foundations/checkbox-card";
+export { CheckboxGroup, CheckboxGroupItem } from "./components/foundations/checkbox-group";
+export type { CheckboxGroupProps } from "./components/foundations/checkbox-group";
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/foundations/collapsible";
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/foundations/command";
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/foundations/context-menu";
@@ -21,7 +23,8 @@ export { DataTable } from "./components/foundations/data-table";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/foundations/dialog";
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./components/foundations/drawer";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/foundations/dropdown-menu";
-export { FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator } from "./components/foundations/field";
+export { Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator, fieldVariants } from "./components/foundations/field";
+export type { FieldProps } from "./components/foundations/field";
 export { FileInput, formatFileNames, validateFileSize } from "./components/foundations/file-input";
 export type { FileInputProps, FileInputError } from "./components/foundations/file-input";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./components/foundations/form";
@@ -33,7 +36,9 @@ export { Label } from "./components/foundations/label";
 export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./components/foundations/menubar";
 export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./components/foundations/navigation-menu";
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./components/foundations/pagination";
-export { Popover, PopoverContent, PopoverTrigger } from "./components/foundations/popover";
+export { getPaginationRange } from "./lib/pagination-range";
+export type { GetPaginationRangeOptions, PaginationRangeItem } from "./lib/pagination-range";
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./components/foundations/popover";
 export { Progress } from "./components/foundations/progress";
 export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger, useIsMobile } from "./components/foundations/responsive-dialog";
 export { RadioGroup, RadioGroupItem } from "./components/foundations/radio-group";
@@ -47,6 +52,8 @@ export { SkipLink } from "./components/foundations/skip-link";
 export type { SkipLinkProps } from "./components/foundations/skip-link";
 export { Slider } from "./components/foundations/slider";
 export { Spinner } from "./components/foundations/spinner";
+export { SocialIcon } from "./components/foundations/social-icon";
+export type { SocialIconProps, SocialPlatform } from "./components/foundations/social-icon";
 export { Switch } from "./components/foundations/switch";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/foundations/table";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/foundations/tabs";
@@ -62,10 +69,14 @@ export { AdminHeader } from "./components/primitives/admin-header";
 export type { AdminHeaderProps } from "./components/primitives/admin-header";
 export { CoachMark } from "./components/primitives/coach-mark";
 export type { CoachMarkProps, CoachMarkDirection } from "./components/primitives/coach-mark";
+export { Combobox } from "./components/primitives/combobox";
+export type { ComboboxOption, ComboboxProps } from "./components/primitives/combobox";
 export { BannerCarousel } from "./components/primitives/banner-carousel";
 export type { BannerCarouselProps, BannerItem } from "./components/primitives/banner-carousel";
 export { ContentCarousel } from "./components/primitives/content-carousel";
-export type { ContentCarouselProps } from "./components/primitives/content-carousel";
+export type { ContentCarouselProps, ContentCarouselItemsPerView } from "./components/primitives/content-carousel";
+export { MultiSelect } from "./components/primitives/multi-select";
+export type { MultiSelectOption, MultiSelectProps } from "./components/primitives/multi-select";
 export { StickyActionBar } from "./components/primitives/sticky-action-bar";
 export { BottomTabBar } from "./components/primitives/bottom-tab-bar";
 export type { BottomTabBarProps, BottomTabBarItem } from "./components/primitives/bottom-tab-bar";
@@ -75,6 +86,8 @@ export { CategoryShortcuts } from "./components/primitives/category-shortcuts";
 export type { CategoryShortcutsProps, CategoryShortcutsItem } from "./components/primitives/category-shortcuts";
 export { CategoryScroll } from "./components/primitives/category-scroll";
 export type { CategoryScrollProps, CategoryItem } from "./components/primitives/category-scroll";
+export { ChatComposer } from "./components/primitives/chat-composer";
+export type { ChatComposerProps, ChatComposerAttachmentError } from "./components/primitives/chat-composer";
 export { Chip, chipVariants } from "./components/primitives/chip";
 export type { ChipProps } from "./components/primitives/chip";
 export { StandardPageShell } from "./components/primitives/standard-page-shell";
@@ -107,6 +120,8 @@ export { ImageCarousel } from "./components/primitives/image-carousel";
 export type { ImageCarouselProps } from "./components/primitives/image-carousel";
 export { ImageGallery } from "./components/primitives/image-gallery";
 export type { ImageGalleryProps } from "./components/primitives/image-gallery";
+export { ImageInput, imageInputPreviewVariants } from "./components/primitives/image-input";
+export type { ImageInputProps, ImageInputValidationError } from "./components/primitives/image-input";
 export { ImageUploader } from "./components/primitives/image-uploader";
 export type { ImageUploaderProps, ImageUploaderImage } from "./components/primitives/image-uploader";
 export { KebabMenu } from "./components/primitives/kebab-menu";
@@ -125,16 +140,19 @@ export { PriceDisplay, priceDisplayVariants } from "./components/primitives/pric
 export type { PriceDisplayProps } from "./components/primitives/price-display";
 export { ProgressSteps } from "./components/primitives/progress-steps";
 export type { ProgressStepsProps } from "./components/primitives/progress-steps";
-export { QuantitySelector } from "./components/primitives/quantity-selector";
-export type { QuantitySelectorProps } from "./components/primitives/quantity-selector";
+export { Timeline } from "./components/primitives/timeline";
+export type { TimelineItem, TimelineProps } from "./components/primitives/timeline";
+export { NumberInput, QuantitySelector } from "./components/primitives/number-input";
+export type { NumberInputProps, QuantitySelectorProps } from "./components/primitives/number-input";
 export { SearchBar } from "./components/primitives/search-bar";
 export type { SearchBarProps } from "./components/primitives/search-bar";
 export { SearchPanel } from "./components/primitives/search-panel";
 export type { SearchPanelProps } from "./components/primitives/search-panel";
 export { Container, containerVariants } from "./components/primitives/container";
-export { Section, sectionVariants } from "./components/primitives/section";
+export { Section, sectionVariants, sectionScrimVariants } from "./components/primitives/section";
+export type { SectionProps, SectionScrim } from "./components/primitives/section";
 export { SectionHeader } from "./components/primitives/section-header";
-export type { SectionHeaderProps, SectionHeaderSize } from "./components/primitives/section-header";
+export type { SectionHeaderDesktopSize, SectionHeaderProps, SectionHeaderSize, } from "./components/primitives/section-header";
 export { SectionNav } from "./components/primitives/section-nav";
 export type { SectionNavProps, SectionNavItem } from "./components/primitives/section-nav";
 export { ShareButtons } from "./components/primitives/share-buttons";

package/dist/types/lib/pagination-range.d.ts

@@ -0,0 +1,16 @@
+export type PaginationRangeItem = number | "ellipsis";
+export interface GetPaginationRangeOptions {
+    /** 現在ページ（1始まり）。範囲外は 1〜totalPages に丸める */
+    currentPage: number;
+    /** 総ページ数。0以下は空配列を返す */
+    totalPages: number;
+    /** 現在ページの左右に常時表示するページ数 */
+    siblingCount?: number;
+}
+/**
+ * ページネーションに表示するページ番号と省略記号の窓を返す。
+ *
+ * 先頭・末尾ページは常に残し、現在ページの前後を siblingCount 件ずつ表示する。
+ * 描画は既存の PaginationItem / PaginationLink / PaginationEllipsis を使う。
+ */
+export declare function getPaginationRange({ currentPage, totalPages, siblingCount, }: GetPaginationRangeOptions): PaginationRangeItem[];

package/dist/types/lib/use-value-length.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+type CountableElement = HTMLInputElement | HTMLTextAreaElement;
+/**
+ * `showCount` 用の文字数を求めるための内部フック。
+ *
+ * 制御（`value` 指定）のときは `value` をそのまま数える。
+ * 非制御のときは **内部 state ではなく実際の DOM の `value`** を数える。
+ * react-hook-form の `register()` は `ref` 経由で DOM に直接初期値を書き込み
+ * （`reset()` / `defaultValues`）、その経路では `onChange` が発火しないため、
+ * 内部 state だけを見ていると初期表示のカウントが 0 のままになる。
+ *
+ * 初期表示は layout effect で DOM を読み、以後の programmatic な `.value` 代入は
+ * 要素自身の value descriptor を監視して拾う。MutationObserver は DOM property の
+ * 変更を観測できず、RHF の `setValue()` は再 render を伴わない場合があるため。
+ * 元 descriptor（React の value tracker を含む）へ処理を委譲し、detach 時に復元する。
+ *
+ * consumer の callback ref が返す cleanup は保持し、detach 時に実行する。
+ * cleanup を返さない従来の callback ref は detach 時に null を渡すため、
+ * React 18/19 どちらの ref 契約も維持する。
+ */
+export declare function useValueLength<T extends CountableElement>({ enabled, value, defaultValue, forwardedRef, }: {
+    enabled: boolean;
+    value: string | number | readonly string[] | undefined;
+    defaultValue: string | number | readonly string[] | undefined;
+    forwardedRef: React.Ref<T> | undefined;
+}): {
+    ref: React.RefCallback<T>;
+    length: number;
+    syncFromDom: () => void;
+};
+export {};

package/eslint/deprecated.js

@@ -0,0 +1,44 @@
+import { readFileSync } from "node:fs"
+
+const contractUrl = new URL("../contracts/components.json", import.meta.url)
+const contracts = JSON.parse(readFileSync(contractUrl, "utf8"))
+const entries = ["foundations", "primitives", "ec"].flatMap(
+  (tier) => contracts[tier] ?? []
+)
+const deprecated = new Map(
+  entries.flatMap((entry) =>
+    (entry.deprecatedAliases ?? []).map((alias) => [alias, entry.name])
+  )
+)
+
+const noDeprecated = {
+  meta: {
+    type: "suggestion",
+    docs: { description: "Cake.jp DS の非推奨 export を検出する" },
+    schema: [],
+    messages: {
+      deprecated: "[cakejp-ds] {{name}} は非推奨です。{{replacement}} を使ってください。",
+    },
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== "@cakejp/design-system") return
+        for (const specifier of node.specifiers) {
+          if (specifier.type !== "ImportSpecifier") continue
+          const imported = specifier.imported.name
+          const replacement = deprecated.get(imported)
+          if (replacement) {
+            context.report({
+              node: specifier,
+              messageId: "deprecated",
+              data: { name: imported, replacement },
+            })
+          }
+        }
+      },
+    }
+  },
+}
+
+export default { rules: { "no-deprecated": noDeprecated } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -39,7 +39,9 @@
     "bin",
     "contracts",
     "dist",
+    "eslint",
     "scripts/codemod",
+    "src/components/COMPONENT_LOOKUP.md",
     "src/preset-standalone.css",
     "src/preset.css",
     "src/styles",
@@ -68,7 +70,8 @@
     "./styles": "./src/preset.css",
     "./tokens/primitive": "./src/styles/primitive.css",
     "./tokens/semantic": "./src/styles/semantic.css",
-    "./tokens/typography": "./src/styles/typography.css"
+    "./tokens/typography": "./src/styles/typography.css",
+    "./eslint/deprecated": "./eslint/deprecated.js"
   },
   "sideEffects": [
     "*.css"
@@ -91,7 +94,8 @@
     "typecheck:stories": "tsc --noEmit -p tsconfig.stories.json",
     "generate:lint-rules": "node scripts/generate-lint-rules.mjs",
     "generate:lookup": "node scripts/generate-component-lookup.mjs",
-    "check": "tsc --noEmit -p tsconfig.app.json && npm run typecheck:stories && bash scripts/check-deps.sh && bash scripts/check-drift.sh && bash scripts/check-docs-drift.sh && bash scripts/lint-scratch.sh && bash scripts/check-story-reuse.sh && bash scripts/check-responsive.sh && node scripts/check-border-color.mjs && bash scripts/lint-scratch.sh --components && bash scripts/check-generated-drift.sh",
+    "lint:contrast": "node scripts/check-contrast.mjs",
+    "check": "tsc --noEmit -p tsconfig.app.json && npm run typecheck:stories && bash scripts/check-deps.sh && bash scripts/check-drift.sh && bash scripts/check-docs-drift.sh && bash scripts/lint-scratch.sh && bash scripts/check-story-reuse.sh && bash scripts/check-responsive.sh && node scripts/check-border-color.mjs && npm run lint:contrast && bash scripts/lint-scratch.sh --components && bash scripts/check-generated-drift.sh",
     "test": "vitest run --config vitest.config.ts"
   },
   "dependencies": {
@@ -153,6 +157,7 @@
     "eslint-plugin-storybook": "^10.3.3",
     "globals": "^16.5.0",
     "iconsax-reactjs": "^0.0.8",
+    "jsdom": "^29.1.1",
     "lucide-react": "^0.577.0",
     "next-themes": "^0.4.6",
     "playwright": "^1.58.2",

package/scripts/codemod/README.md

@@ -0,0 +1,14 @@
+# Codemod
+
+破壊的変更では `template.mjs` を複製し、`RENAMES`、`PROP_RENAMES`、
+`WARNINGS` の3箇所を埋めて移行スクリプトを作ります。
+
+```bash
+cp scripts/codemod/template.mjs scripts/codemod/v1-to-v2.mjs
+node scripts/codemod/v1-to-v2.mjs --dry ./src
+node scripts/codemod/v1-to-v2.mjs ./src
+```
+
+正規表現ベースのため、必ずコミット済みの利用側で `--dry` を先に実行し、
+適用後は `git diff` と ESLint の `@cakejp/design-system/eslint/deprecated`
+で残件を確認してください。

package/scripts/codemod/template.mjs

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+import fs from "node:fs"
+import path from "node:path"
+
+const PACKAGE_PATTERN = /@cakejp\/design-system/
+const RENAMES = []
+const PROP_RENAMES = []
+const WARNINGS = []
+
+const args = process.argv.slice(2)
+const dry = args.includes("--dry")
+const targetDir = args.find((arg) => !arg.startsWith("--")) ?? "./src"
+if (!fs.existsSync(targetDir)) {
+  console.error(`Directory not found: ${targetDir}`)
+  process.exit(1)
+}
+
+function filesIn(directory) {
+  return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const full = path.join(directory, entry.name)
+    if (entry.isDirectory()) {
+      return ["node_modules", "dist"].includes(entry.name) || entry.name.startsWith(".")
+        ? []
+        : filesIn(full)
+    }
+    return /\.(?:ts|tsx|js|jsx|mjs|cjs)$/.test(entry.name) ? [full] : []
+  })
+}
+
+let changedFiles = 0
+let changedItems = 0
+for (const file of filesIn(targetDir)) {
+  const source = fs.readFileSync(file, "utf8")
+  if (!PACKAGE_PATTERN.test(source)) continue
+  let output = source
+  let count = 0
+  for (const [before, after] of [...RENAMES].sort((a, b) => b[0].length - a[0].length)) {
+    const pattern = new RegExp(`\\b${before}\\b`, "g")
+    const matches = output.match(pattern)
+    if (matches) {
+      output = output.replace(pattern, after)
+      count += matches.length
+    }
+  }
+  for (const [component, before, after] of PROP_RENAMES) {
+    const pattern = new RegExp(`(<${component}[^>]*\\s)${before}=`, "g")
+    const matches = output.match(pattern)
+    if (matches) {
+      output = output.replace(pattern, `$1${after}=`)
+      count += matches.length
+    }
+  }
+  for (const warning of WARNINGS) {
+    if (warning.pattern.test(source)) console.warn(`⚠ ${file}: ${warning.message}`)
+  }
+  if (!count) continue
+  changedFiles++
+  changedItems += count
+  if (!dry) fs.writeFileSync(file, output)
+  console.log(`${dry ? "[dry]" : "✓"} ${file}: ${count}`)
+}
+console.log(`${changedFiles} files / ${changedItems} replacements`)