@cakejp/design-system 0.4.1 → 0.6.0

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

@@ -50,7 +50,7 @@ export interface ProductCarouselProps {
  * - `showCartButton` でカート追加ボタンを表示
  * - `sectionImage` でコラボ・ブランドロゴ等の画像をヘッダー左に表示
  * - `description` でセクション説明文を追加（コラボ紹介、特集説明等）
- * - 横パディングは SectionHeader（px-4）とスクロールコンテナ（px-4）が持つ
+ * - 横パディング(px-4)はヘッダー行（SectionHeader もしくは画像ラッパー）とスクロールコンテナが各自で持つ
  */
 declare function ProductCarousel({ title, subtitle, description, sectionImage, sectionImageAlt, sectionImageHref, moreHref, moreLabel, onMoreClick, headerSize, products, cardSize, showRanking, showCartButton, className, }: ProductCarouselProps): import("react/jsx-runtime").JSX.Element;
 export { ProductCarousel };

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

@@ -16,6 +16,7 @@
  * | required | boolean | false | 必須バッジ表示 |
  * | optional | boolean | false | 任意バッジ表示 |
  * | description | string | — | 補足テキスト |
+ * | descriptionPosition | "above" \| "below" | "above" | description の表示位置 |
  * | error | string | — | エラーメッセージ |
  * | children | ReactNode | — | 入力要素 |
  *
@@ -34,6 +35,14 @@ export interface FormFieldProps {
     optional?: boolean;
     /** 補足テキスト */
     description?: string;
+    /**
+     * description の表示位置。
+     * - `"above"` (デフォルト): ラベル直下・入力要素の上
+     * - `"below"`: 入力要素の下
+     *
+     * グリッド配置で横並びフィールドの高さを揃えたい場合は `"below"` を使う。
+     */
+    descriptionPosition?: "above" | "below";
     /** エラーメッセージ */
     error?: string;
     /** htmlFor 属性 */
@@ -43,4 +52,4 @@ export interface FormFieldProps {
     /** 追加クラス */
     className?: string;
 }
-export declare function FormField({ label, required, optional, description, error, htmlFor, children, className, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormField({ label, required, optional, description, descriptionPosition, error, htmlFor, children, className, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/primitives/list-item.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
     /** メインタイトル */
     title: string;
     /** キャプション（サブテキスト） */
@@ -55,6 +55,9 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
  * - アイコン付き: `<ListItem title="注文履歴" leftIcon={<Icon />} size="lg" />`
  * - トグル行: `<ListItem title="通知設定" rightType="toggle" toggleChecked={true} />`
  * - テキスト値付き: `<ListItem title="言語" rightType="text" rightText="日本語" />`
+ *
+ * `href` か `onClick` を渡すとインタラクティブ行になり、hover 背景と focus リングが付く。
+ * 表示専用（href/onClick なし）の行は状態スタイルが付かない。
  */
 declare function ListItem({ title, caption, rightType, rightText, badgeCount, toggleChecked, onToggleChange, leftIcon, leftImageUrl, size, selected, showBorder, showBadgeDot, href, className, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export { ListItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -31,7 +31,6 @@
     "cakejp-ds": "./bin/init.js"
   },
   "files": [
-    "AGENTS.md",
     "CHANGELOG.md",
     "CLAUDE.md",
     "CLAUDE_PRODUCTION.md",
@@ -88,8 +87,9 @@
     "build-storybook": "storybook build",
     "lint:scratch": "bash scripts/lint-scratch.sh",
     "lint:reuse": "bash scripts/check-story-reuse.sh",
+    "lint:border": "node scripts/check-border-color.mjs",
     "generate:lint-rules": "node scripts/generate-lint-rules.mjs",
-    "check": "tsc --noEmit && bash scripts/check-deps.sh && bash scripts/check-drift.sh && bash scripts/lint-scratch.sh && bash scripts/check-story-reuse.sh && bash scripts/check-responsive.sh",
+    "check": "tsc --noEmit && bash scripts/check-deps.sh && bash scripts/check-drift.sh && bash scripts/lint-scratch.sh && bash scripts/check-story-reuse.sh && bash scripts/check-responsive.sh && node scripts/check-border-color.mjs",
     "test": "vitest run --config vitest.config.ts"
   },
   "dependencies": {

package/templates/AGENTS.md

@@ -11,7 +11,7 @@ Codex（および他の AI エージェント）は UI 作業を始める前に
 
 | ファイル | 内容 |
 |---------|------|
-| `node_modules/@cakejp/design-system/AGENTS.md` | DS 全体のルール・禁止パターン |
+| `node_modules/@cakejp/design-system/CLAUDE.md` | DS 利用ガイド・禁止パターン |
 | `node_modules/@cakejp/design-system/contracts/components.json` | 全コンポーネントの定義・バリアント |
 | `node_modules/@cakejp/design-system/contracts/rules.json` | 禁止パターン・アクセシビリティ要件 |
 | `node_modules/@cakejp/design-system/tokens.json` | カラー・余白・角丸・影・タイポ |

package/templates/CLAUDE.md

@@ -11,7 +11,7 @@ Codex（および他の AI エージェント）は UI 作業を始める前に
 
 | ファイル | 内容 |
 |---------|------|
-| `node_modules/@cakejp/design-system/AGENTS.md` | DS 全体のルール・禁止パターン |
+| `node_modules/@cakejp/design-system/CLAUDE.md` | DS 利用ガイド・禁止パターン |
 | `node_modules/@cakejp/design-system/contracts/components.json` | 全コンポーネントの定義・バリアント |
 | `node_modules/@cakejp/design-system/contracts/rules.json` | 禁止パターン・アクセシビリティ要件 |
 | `node_modules/@cakejp/design-system/tokens.json` | カラー・余白・角丸・影・タイポ |

package/AGENTS.md

@@ -1,144 +0,0 @@
-# Cake.jp Design System — AGENTS.md（Codex向け）
-
-## このDSについて
-
-Cake.jp のフロントエンドとデザインシステムを正式に接続する統合デザインシステム。
-EC / BtoC / コマース向け。**3-tier 構造で 104 コンポーネント**:
-- foundations: 46個（shadcn ベース汎用 UI）
-- primitives: 35個（業界汎用パターン・jobboard 等他事業でも再利用可）
-- ec: 23個（Cake.jp / EC 事業特化）
-
----
-
-## 必須: セッション開始時に読み込むファイル
-
-Codex はファイルを自動読み込みしないため、**タスク開始前に以下を明示的に読み込むこと**:
-
-```
-1. contracts/rules.json        # 禁止パターン・アクセシビリティ要件
-2. contracts/components.json   # 全104コンポーネント定義（3-tier）
-3. tokens.json                 # カラー・タイポグラフィ・スペーシングトークン
-```
-
-本番実装・新規コンポーネント作成の場合はさらに:
-```
-4. CLAUDE_PRODUCTION.md        # 本番参照ルール・Figmaチェックリスト
-```
-
----
-
-## 技術スタック
-
-- React 19 + TypeScript
-- Vite（ビルド）
-- **Tailwind CSS v4**（`@import "tailwindcss"` 構文。`@tailwind base` / `@tailwind components` は v3 記法で**使用禁止**）
-- shadcn/ui（Radix UI ベース、Cake.jp テーマ適用済み）
-- Storybook（`@storybook/react-vite`）
-- CVA（class-variance-authority）でバリアント管理
-- **Lucide React + iconsax-react**（アイコン。`heroicons` `phosphor-icons` への置き換え禁止）
-
----
-
-## ディレクトリ構成
-
-```
-src/
-├── components/
-│   ├── foundations/ # shadcn ベース汎用 UI（46個・全事業共通）
-│   ├── primitives/  # 業界汎用パターン（35個・jobboard等他事業でも再利用可）
-│   ├── ec/          # Cake.jp / EC 事業特化（23個・商品・配送・クーポン等）
-│   └── pages/       # ページ単位のストーリー
-├── prototypes/      # /mock スキルで生成されたプロトタイプ
-├── lib/
-│   └── utils.ts     # cn() ユーティリティ
-└── index.css        # カラートークン定義 + Tailwind 設定
-```
-
-### 3層構造の依存ルール
-
-```
-ec/         ← Cake.jp 特化（最上位）
-  ↓
-primitives/ ← 業界汎用パターン
-  ↓
-foundations/ ← shadcn ベース（最下位）
-```
-
-- `foundations/` は他層に依存しない
-- `primitives/` は `foundations/` のみ参照可
-- `ec/` は `foundations/` と `primitives/` を参照可
-- **逆方向の依存は禁止**（`bash scripts/check-deps.sh` で検証）
-
----
-
-## ❌ スクラッチコード禁止ルール（強制）
-
-### 書く前ゲート
-
-以下のいずれかを書こうとしたら**手を止めて** `contracts/components.json` と Storybook で同等パターンを探すこと:
-
-| 書こうとしているもの | 確認先 |
-|-------------------|--------|
-| `::before` / `::after` 装飾（バー・ドット・矢印） | SectionHeader, Chip, Badge, ListItem の variants |
-| `rgba(...)` / `#xxxxxx` ハードコードカラー | `tokens.json` のトークン名を使う |
-| `box-shadow: ...` カスタム影 | `tokens.json` の `shadow.*` |
-| `border-radius: ...px` カスタム角丸 | `tokens.json` の `radius.*` |
-| カスタムフォントサイズ・ウェイト | `tokens.json` の `typography.*` |
-
-DSに存在しない場合のみカスタム実装を許可。その場合はコメントで理由を記載すること。
-
-### 書いた後ゲート（強制）
-
-**.tsx / .css / .module.css を編集したら必ず実行**:
-
-```bash
-bash scripts/lint-scratch.sh
-```
-
-エラーが出たら修正してから次のタスクに進むこと。**エラーありのまま完了報告禁止。**
-
-**コンポーネントを追加・削除したら必ず実行**:
-
-```bash
-bash scripts/check-drift.sh   # contracts と実ファイルの一致を検証
-bash scripts/check-deps.sh    # 3-tier 依存方向違反を検出
-```
-
-`contracts/components.json` の `meta.counts` と実ファイル数が一致していること、
-foundations → primitives → ec の依存方向が正しいことを確認すること。
-
----
-
-## コンポーネント追加時のチェックリスト
-
-- [ ] `src/index.tsx` にエクスポートを追加
-- [ ] `contracts/components.json` にコンポーネント定義を追加
-- [ ] `contracts/components.json` の `meta.counts` を更新
-- [ ] `bash scripts/check-drift.sh` を実行して乖離がないことを確認
-- [ ] Storybook のストーリーファイル（`.stories.tsx`）を作成
-
----
-
-## ドキュメント構成
-
-| ファイル | 内容 |
-|---------|------|
-| **AGENTS.md**（本ファイル） | Codex向け。セッション開始時の読み込み指示・編集後コマンドを明記 |
-| **CLAUDE.md** | Claude Code向け概要（フック自動実行） |
-| **contracts/components.json** | 全104コンポーネントの構造化定義（3-tier・バリアント・アクセシビリティ要件） |
-| **contracts/rules.json** | 禁止パターン・アクセシビリティ要件・タイポグラフィ定義 |
-| **tokens.json** | カラー・スペーシング・シャドウトークンの機械可読定義 |
-| **CLAUDE_PRODUCTION.md** | 本番実装参照ルール・Figmaチェックリスト（Cake.jp固有） |
-
----
-
-## 重要な制約（AI生成コードの典型的な誤り）
-
-`contracts/rules.json` の `aiPatterns` セクションで詳細を確認すること。主な注意点:
-
-- **価格表記**: `¥{数字,区切り}（税込）` — `円` `税込み` `(税込)` は禁止
-- **日付表記**: `M月D日（曜日）` — `YYYY/MM/DD` や英語表記禁止
-- **aria-label**: 日本語で記述 — 英語 aria-label 禁止
-- **input type="date"**: 使用禁止 — PopoverとCalendarを組み合わせる
-- **Tag に onClick**: 禁止 — 押せるものは Chip を使う
-- **SectionHeader 手書き**: 禁止 — `SectionHeader` コンポーネントを使う