@cakejp/design-system 0.10.0 → 0.11.0

package/dist/types/components/ec/mypage-shell.d.ts

@@ -20,12 +20,15 @@
  * ## 事業横断での再利用
  *
  * 骨格（ヘッダー＋2カラム＋BottomTabBar）は事業横断で再利用できる。
- * ジョブボード等の他事業では `menuGroups` / `breadcrumbs` / `bottomNavItems` / `headerActions`
- * を差し替えて骨格を再利用する。既定値は Cake.jp EC のマイページメニュー。
+ * ジョブボード・他ブランドの consumer では `logo` / `navItems` / `menuGroups` /
+ * `breadcrumbs` / `bottomNavItems` / `headerActions` を差し替えて骨格を再利用する。
+ * 既定値は Cake.jp EC（ロゴ＝CakeLogo、メニュー＝マイページメニュー）。
+ * `logo` / `navItems` を渡せば PC ヘッダーのブランドを差し替えられ、
+ * 「マイページ配下だけ Cake.jp ロゴに割れる」問題を避けられる。
  */
 import React from "react";
-import { type HeaderAction } from "../../components/primitives/header";
-import { type SideNavGroup } from "../../components/primitives/side-nav";
+import { type HeaderAction, type HeaderNavItem } from "../../components/primitives/header";
+import { type SideNavGroup, type SideNavItem } from "../../components/primitives/side-nav";
 import { type BottomTabBarItem } from "../../components/primitives/bottom-tab-bar";
 export interface MypageShellBreadcrumb {
     label: string;
@@ -34,8 +37,20 @@ export interface MypageShellBreadcrumb {
 export interface MypageShellProps {
     /** ページタイトル（SP の h1 + PC の main h1 + 末尾パンくず に使用） */
     title: string;
-    /** SideNav の activeMenu に渡すキー */
-    activeMenu: string;
+    /** SideNav の activeMenu に渡すキー（完全一致）。`currentPath` / `isActiveMenuItem` 使用時は省略可。 */
+    activeMenu?: string;
+    /**
+     * 現在の URL パス。渡すと SideNav が `href` と照合してアクティブ項目を自動判定する
+     * （`activeMenu` の手動指定が不要になる）。既定の照合は完全一致（`activeMatch="prefix"` で配下ページ全体を対象に）。
+     */
+    currentPath?: string;
+    /**
+     * `currentPath` と SideNav 各項目 `href` の照合方法（既定 `"exact"`）。
+     * `"prefix"` にすると詳細・配下ページ（例: `/mypage/orders/123/`）でも一覧項目（`/mypage/orders/`）がアクティブになる。
+     */
+    activeMatch?: "exact" | "prefix";
+    /** SideNav のアクティブ判定を上書きする述語（最優先）。consumer 固有の URL 集約ロジックを注入する。 */
+    isActiveMenuItem?: (item: SideNavItem) => boolean;
     /** コンテンツ */
     children: React.ReactNode;
     /** パンくず（省略時はデフォルト: ホーム > 山田 太郎 さまのマイページ > {title}） */
@@ -52,8 +67,20 @@ export interface MypageShellProps {
      * 他事業では差し替えて骨格を再利用する。
      */
     headerActions?: HeaderAction[];
+    /**
+     * PC ヘッダーのロゴ（既定=`CakeLogo`）。
+     * 他ブランドの consumer は自社ロゴを渡してマイページのブランド割れを防ぐ。
+     * ※ SP は `Header variant="back"`（戻るボタン）でロゴを表示しないため、この prop は PC ヘッダーにのみ作用する。
+     */
+    logo?: React.ReactNode;
+    /**
+     * PC ヘッダーのグローバルナビ（既定=なし）。
+     * 他ブランドの consumer は自社ナビ（例: 商品を探す／ご利用ガイド／よくある質問）を渡して骨格を再利用する。
+     * SP では非表示（`Header` の仕様）。
+     */
+    navItems?: HeaderNavItem[];
     /** SP の戻るボタン押下時のハンドラ（Header variant="back" に委譲） */
     onBack?: () => void;
 }
-declare function MypageShell({ title, activeMenu, children, breadcrumbs, bottomNavItems, menuGroups, headerActions, onBack, }: MypageShellProps): import("react/jsx-runtime").JSX.Element;
+declare function MypageShell({ title, activeMenu, currentPath, activeMatch, isActiveMenuItem, children, breadcrumbs, bottomNavItems, menuGroups, headerActions, logo, navItems, onBack, }: MypageShellProps): import("react/jsx-runtime").JSX.Element;
 export { MypageShell };

package/dist/types/components/primitives/side-nav.d.ts

@@ -18,8 +18,26 @@ export interface SideNavGroup {
     items: SideNavItem[];
 }
 export interface SideNavProps extends React.HTMLAttributes<HTMLElement> {
-    /** 現在アクティブなメニューの key */
+    /** 現在アクティブなメニューの key（完全一致）。`currentPath` / `isActive` 未指定時の既定判定。 */
     activeMenu?: string;
+    /**
+     * 現在の URL パス。指定すると各項目の `href` と照合してアクティブ項目を自動判定する
+     * （`activeMenu` より優先）。詳細ページや配下ページで `activeMenu` を手動指定する必要がなくなる。
+     */
+    currentPath?: string;
+    /**
+     * `currentPath` と `href` の照合方法（既定 `"exact"`）。
+     * - `"exact"`: `href === currentPath`
+     * - `"prefix"`: `currentPath` が `href` 配下（前方一致）。1 項目が配下ページ全体でアクティブになる
+     *   （例: 「注文履歴」`/mypage/orders/` が `/mypage/orders/123/` でもアクティブ）。
+     *   複数項目が一致した場合は**最長 href の 1 項目のみ**アクティブにし、親子の二重アクティブを防ぐ。
+     */
+    activeMatch?: "exact" | "prefix";
+    /**
+     * アクティブ判定を完全に上書きする述語（最優先）。
+     * consumer 固有の URL 集約ロジック（複数 URL を 1 項目へ束ねる等）を注入する。
+     */
+    isActive?: (item: SideNavItem) => boolean;
     /** メニューグループ（必須） */
     groups: SideNavGroup[];
     /** aria-label */
@@ -55,8 +73,11 @@ export interface SideNavProps extends React.HTMLAttributes<HTMLElement> {
  * | Prop | 型 | デフォルト | 説明 |
  * |------|-----|-----------|------|
  * | groups | SideNavGroup[] | — | メニューグループ（必須） |
- * | activeMenu | string | — | アクティブなメニュー項目の key |
+ * | activeMenu | string | — | アクティブなメニュー項目の key（完全一致・後方互換） |
+ * | currentPath | string | — | 現在 URL。href と照合して自動判定（activeMenu より優先） |
+ * | activeMatch | "exact" \| "prefix" | "exact" | currentPath の照合方法。prefix は配下ページ全体でアクティブ |
+ * | isActive | (item) => boolean | — | アクティブ判定を上書きする述語（最優先） |
  * | ariaLabel | string | "サイドメニュー" | aria-label |
  */
-declare function SideNav({ activeMenu, groups, ariaLabel, className, ...props }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+declare function SideNav({ activeMenu, currentPath, activeMatch, isActive, groups, ariaLabel, className, ...props }: SideNavProps): import("react/jsx-runtime").JSX.Element;
 export { SideNav };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -97,52 +97,34 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^3.5.0"
+    "cmdk": "^1.0.0",
+    "next-themes": "^0.4.0",
+    "react-day-picker": "^9.0.0",
+    "react-hook-form": "^7.0.0",
+    "sonner": "^2.0.0",
+    "tailwind-merge": "^3.5.0",
+    "vaul": "^1.0.0"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.0.0",
-    "cmdk": "^1.0.0",
     "date-fns": "^4.0.0",
     "iconsax-reactjs": "^0.0.8",
     "lucide-react": ">=0.400.0",
-    "next-themes": "^0.4.0",
     "radix-ui": "^1.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-day-picker": "^9.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "react-hook-form": "^7.0.0",
-    "sonner": "^2.0.0",
     "tailwindcss": "^4.0.0",
-    "vaul": "^1.0.0",
     "zod": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@hookform/resolvers": {
       "optional": true
     },
-    "react-hook-form": {
-      "optional": true
-    },
     "zod": {
       "optional": true
     },
-    "react-day-picker": {
-      "optional": true
-    },
     "date-fns": {
       "optional": true
-    },
-    "cmdk": {
-      "optional": true
-    },
-    "next-themes": {
-      "optional": true
-    },
-    "vaul": {
-      "optional": true
-    },
-    "sonner": {
-      "optional": true
     }
   },
   "devDependencies": {

package/templates/AGENTS.md

@@ -36,18 +36,45 @@ DS に該当パターンが無い場合のみカスタム実装を許可。そ
 
 ### CSS のセットアップ（重要）
 
-DS のプリビルド CSS（`dist/index.css`）を**必ず**プロジェクトのエントリ CSS で
-`@import` すること。これにより consumer の Tailwind 設定に依存せず、DS と同じ
-見た目が保証される。
+#### ✅ 推奨（consumer が Tailwind v4 を使う場合）: `@source` 単一ビルド方式
+
+consumer のエントリ CSS で Tailwind を読み込み、`preset`（トークン・`typo-*`・
+コンテナクエリ段・dark variant）を足したうえで、DS の className を **consumer と
+同じ Tailwind ビルド**でスキャン・生成させる。
+
+```css
+/* globals.css / app.css など。@source のパスは この CSS ファイルからの相対で
+   node_modules/@cakejp/design-system/dist/index.js を指す */
+@import "tailwindcss";
+@import "@cakejp/design-system/preset";                          /* トークン・typo-*・コンテナ段・dark variant */
+@source "../node_modules/@cakejp/design-system/dist/index.js";   /* DS の className を consumer と同一ビルドで生成 */
+```
+
+**なぜこれが推奨か:** ユーティリティのビルドが 1 つに統一されるため、Tailwind の
+「基底ユーティリティ→バリアント」の並び順が保証される。consumer が `.hidden` /
+`.border-transparent` 等 DS と同名のユーティリティを 1 箇所でも使っても、DS の
+コンテナクエリ・データ属性バリアント（`@lg:block`・
+`group-data-[state=active]:border-…` 等）が同一 `@layer utilities` 内で正しく後勝ち
+する。
+
+> `@source` のパスは CSS ファイルからの相対。深さが違う場合は `../` の数を調整して
+> 必ず `node_modules/@cakejp/design-system/dist/index.js` を指すこと。Tailwind v4 は
+> 既定で `node_modules` をスキャンしないため、この明示 `@source` が要（かなめ）。
+
+#### プリビルド CSS 方式（`dist/index.css`）: **consumer が Tailwind を使わない場合のみ**
 
 ```css
-/* globals.css / app.css など */
 @import "@cakejp/design-system/dist/index.css"; /* DS のコンポーネントスタイル・トークン・preflight */
-@import "tailwindcss";                          /* consumer 自身の utility */
 ```
 
-> ❌ `@source` ディレクティブで DS を再ビルドする方式は非推奨。consumer の
-> Tailwind 設定次第で出力がズレるリスクがある（トークン値の差・preflight の差等）。
+> ⚠️ **consumer が Tailwind v4 を併用する構成でこの方式を使ってはいけない。**
+> DS のプリビルド CSS と consumer の Tailwind は**独立した 2 つのビルド**で、同名
+> ユーティリティ（`.hidden` 等）を別々に同じ `@layer utilities` へ二重出力する。
+> 後段（consumer）の基底ルールが前段（DS）のバリアントルールを宣言順で打ち消し、
+> **DS のバリアントが効かなくなる**。実害例: `Header` / `Footer` / `MenuDrawer` が
+> デスクトップ幅でも永久にモバイル表示になる（consumer の `.hidden` が DS の
+> `@lg:block` に後勝ちする）。import 順を入れ替えても解決しない。**Tailwind 併用時は
+> 上の `@source` 方式を使うこと。**
 
 ### コンポーネントの使用
 

package/templates/CLAUDE.md

@@ -38,18 +38,46 @@ DS に該当パターンが無い場合のみカスタム実装を許可。そ
 
 ### CSS のセットアップ（重要）
 
-DS のプリビルド CSS（`dist/index.css`）を**必ず**プロジェクトのエントリ CSS で
-`@import` すること。これにより consumer の Tailwind 設定に依存せず、DS と同じ
-見た目が保証される。
+#### ✅ 推奨（consumer が Tailwind v4 を使う場合）: `@source` 単一ビルド方式
+
+consumer のエントリ CSS で Tailwind を読み込み、`preset`（トークン・`typo-*`・
+コンテナクエリ段・dark variant）を足したうえで、DS の className を **consumer と
+同じ Tailwind ビルド**でスキャン・生成させる。
+
+```css
+/* globals.css / app.css など。@source のパスは この CSS ファイルからの相対で
+   node_modules/@cakejp/design-system/dist/index.js を指す */
+@import "tailwindcss";
+@import "@cakejp/design-system/preset";                          /* トークン・typo-*・コンテナ段・dark variant */
+@source "../node_modules/@cakejp/design-system/dist/index.js";   /* DS の className を consumer と同一ビルドで生成 */
+```
+
+**なぜこれが推奨か:** ユーティリティのビルドが 1 つに統一されるため、Tailwind の
+「基底ユーティリティ→バリアント」の並び順が保証される。consumer が `.hidden` /
+`.border-transparent` 等 DS と同名のユーティリティを 1 箇所でも使っても、DS の
+コンテナクエリ・データ属性バリアント（`@lg:block`・
+`group-data-[state=active]:border-…` 等）が同一 `@layer utilities` 内で正しく後勝ち
+する。プリビルド CSS 方式（下記）はこの整列が破れる（詳細は警告を参照）。
+
+> `@source` のパスは CSS ファイルからの相対。深さが違う場合は `../` の数を調整して
+> 必ず `node_modules/@cakejp/design-system/dist/index.js` を指すこと。Tailwind v4 は
+> 既定で `node_modules` をスキャンしないため、この明示 `@source` が DS の className を
+> 拾わせる要（かなめ）になる。
+
+#### プリビルド CSS 方式（`dist/index.css`）: **consumer が Tailwind を使わない場合のみ**
 
 ```css
-/* globals.css / app.css など */
 @import "@cakejp/design-system/dist/index.css"; /* DS のコンポーネントスタイル・トークン・preflight */
-@import "tailwindcss";                          /* consumer 自身の utility */
 ```
 
-> ❌ `@source` ディレクティブで DS を再ビルドする方式は非推奨。consumer の
-> Tailwind 設定次第で出力がズレるリスクがある（トークン値の差・preflight の差等）。
+> ⚠️ **consumer が Tailwind v4 を併用する構成でこの方式を使ってはいけない。**
+> DS のプリビルド CSS と consumer の Tailwind は**独立した 2 つのビルド**で、同名
+> ユーティリティ（`.hidden` 等）を別々に同じ `@layer utilities` へ二重出力する。
+> 後段（consumer）の基底ルールが前段（DS）のバリアントルールを宣言順で打ち消し、
+> **DS のバリアントが効かなくなる**。実害例: `Header` / `Footer` / `MenuDrawer` が
+> デスクトップ幅でも永久にモバイル表示になる（consumer の `.hidden` が DS の
+> `@lg:block` に後勝ちする）。import 順を入れ替えても被害者が DS↔consumer で
+> 入れ替わるだけで解決しない。**Tailwind 併用時は上の `@source` 方式を使うこと。**
 
 ### コンポーネントの使用