@cakejp/design-system 0.20.1 → 0.21.0

package/contracts/composition.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Composition Contracts",
-    "version": "0.20.1",
+    "version": "0.21.0",
     "description": "ページ骨格・視覚階層・余白リズムの機械可読な正本。画面パターンを選んだ後の「実際の組み方」を規定する。ページの外枠（モバイル/デスクトップ/管理）、商品グリッドの列数、余白の4段リズム、Surface のネスト階層、テキスト階層、CTA の優先順位を構造化する。人間向けの解説は guidelines/composition/layout.md・guidelines/composition/hierarchy.md・guidelines/overview.md。",
     "source": "guidelines/composition/layout.md, guidelines/composition/hierarchy.md, guidelines/overview.md, guidelines/components/button.md（CTA 密度ルール）を正本化",
     "roleSeparation": "screen-patterns.json はページ種別（Standard Page / Focused Workspace / ResponsiveDialog / Dialog）を選ぶための契約。composition.json は選んだ後、その骨格をどう組むか（外枠構造・余白リズム・階層）の契約。前者=何を使うか、後者=どう並べるか。",
@@ -24,7 +24,8 @@
         "スクロール本文は flex-1 で伸縮させる。高さをハードコードしない",
         "下部に StickyActionBar（固定 CTA）がある場合、main に pb-20 を付けて本文が隠れないようにする",
         "モバイルの全ページは原則 Header を上端・BottomTabBar を下端に持つ（下部 CTA ページでは BottomTabBar の代わりに StickyActionBar）",
-        "横スクロールリストは flex.overflow-x-auto.gap-3.[-webkit-overflow-scrolling:touch]（カテゴリ横スクロールは CategoryScroll を使う）"
+        "横スクロールリストは ScrollRow を使う（flex.overflow-x-auto.gap-3.[-webkit-overflow-scrolling:touch] の手組みをしない。カテゴリ横スクロールは CategoryScroll、自動再生・ドット付きは ContentCarousel）",
+        "横スクロールの行の端の余白は Container の gutter にそろえる: Container の直下で gutter 分だけ外へはみ出し（SP では画面端までスクロール）、同じ幅の padding と scroll-padding を付ける。1 枚目の左端が見出しとそろい、スナップ後・最後の要素の右にも余白が残る。ScrollRow と ContentCarousel・ImageCarousel の peek はこれを内蔵しているので、外側に -mx-4 等を足さない。Card など余白を持つ親の中では ScrollRow に bleed={false} を渡す（変数は Container の子孫すべてに届く）。手組みが避けられないときは -mx-4 px-4 を直書きせず -mx-[var(--Container-Gutter)] px-[var(--Container-Gutter)] scroll-px-[var(--Container-Gutter)] を使う（md 以上の 24px・gutter=tight にも追従する）"
       ]
     },
     "desktop": {
@@ -149,15 +150,48 @@
       { "variant": "default", "role": "Primary CTA（前進・確定）", "appearance": "ブランドオレンジのベタ塗り", "note": "1ビューポートに1つまで（唯一の主 CTA）" },
       { "variant": "secondary", "role": "Secondary action（前進系の副 CTA。例: 「サンプルを見る」「詳細を見る」）", "appearance": "⚠️ ブランドアクセント（Surface-Accent-Primary-Light 地 + Brand-Cake-Orange 文字）。Material / Bootstrap / shadcn の secondary（グレー・控えめ）とは別物", "note": "アクセント色が付くため、戻る・キャンセル・閉じる等の後退/中立アクションには使わない（→ tertiary）" },
       { "variant": "tertiary", "role": "Tertiary action / 後退・中立アクション（戻る・キャンセル・閉じる・スキップ・あとで）", "appearance": "ニュートラルなグレー（Surface-Tertiary 地 + Text-High-Emphasis 文字）", "note": "他 DS の secondary に相当する見た目。主 CTA の隣に置く「戻る」「キャンセル」はこれを使う" },
+      { "variant": "outline", "role": "準主役の前進アクション（ブランド色を使わない）。「一覧を見る」等の移動ボタン、一覧・カードで1件ごとに繰り返す操作（商品カードの「カートに追加」等）、ブックマーク等の保存トグルのボタン本体", "appearance": "白地（Surface-Primary）+ 1px の黒系の枠（Border-High-Emphasis）+ Text-High-Emphasis 文字。hover / active は薄い下地（Hover-Text-Button / Active-Text-Button）", "note": "ブランド色を使わないので何個並んでもよい。ただし繰り返す操作は見た目が増えるので、ボタンに頼らずカード全体のリンクで足りるときは置かない" },
       { "variant": "ghost", "role": "Minimal action（メニュー・ツールバー内）", "appearance": "下地なし・hover で薄い下地" },
-      { "variant": "link", "role": "Inline link", "appearance": "テキストリンク意匠" }
+      { "variant": "link", "role": "補助リンク（「もっと見る」「利用規約を見る」等のインラインの移動）", "appearance": "ブランド色を使わない。Text-Medium-Emphasis（グレー）+ 常時下線。hover で Text-High-Emphasis", "note": "セクション見出し横の「もっと見る」は SectionHeader が同じ意匠で描く" }
     ],
     "rules": [
       "default（オレンジ）の CTA は1ビューポートに1つまで。主アクションを1つに絞る",
       "複数アクションを並べる時は default を tertiary / ghost と組み合わせる",
       "「戻る」「キャンセル」「閉じる」「スキップ」「あとで」は tertiary（グレー）。secondary はアクセント色なので後退アクションに使わない",
+      "ブランド色を使わずに「押せるボタン」の存在感がほしい前進アクション（「一覧を見る」、1件ごとに繰り返す操作、保存トグルのボタン本体）は outline。黒ベタ塗りにしない",
+      "「もっと見る」等の補助リンクは link（グレー + 下線）。ブランド色の文字リンクにしない",
       "secondary を使うのは、主 CTA と別方向の“前進”を促す副 CTA のとき（例: 主=「購入する」に対し副=「サンプルを見る」）",
-      "モバイルの全幅下部 CTA は size=\"xl\" + w-full（StickyActionBar 内）"
+      "モバイルの全幅下部 CTA は size=\"xl\" + w-full（StickyActionBar 内）",
+      "ブランド色を使ってよい場所・使わない場所の正本は brandColorUsage"
+    ]
+  },
+  "brandColorUsage": {
+    "description": "ブランド色を使ってよい場所と使わない場所。ブランド色が付いた部品が画面に多いと、どれが主役か分からなくなり目立ちすぎる。そのため「1つの主 CTA」「価格の最強調」「入力部品のオン状態」など、色そのものが意味を持つ場所にだけ使う。色相に依存しない書き方にしてあり、ブランド色が別の色相に変わってもこのルールは同じ（トークン名や hex ではなく役割で判断する）。",
+    "brandTokens": ["--Brand-Cake-Orange", "--Brand-Cake-Orange-Light", "--Brand-Cake-Orange-Ultra-Light", "--Text-Accent-Primary", "--Surface-Accent-Primary-Light", "--Object-Accent-Primary", "--Border-Accent-Primary"],
+    "principle": "強調は色の量ではなく、サイズ・余白・配置・文字の太さで作る。ブランド色の部品が1ビューポートに複数あるなら、主役以外は黒系（Text-High-Emphasis / Border-High-Emphasis）かグレー（Text-Medium-Emphasis / Surface-Tertiary）に落とす。",
+    "allowed": [
+      { "place": "1ビューポートに1つの主 CTA", "use": "Button variant=\"default\"（暗背景の上は inverse）", "note": "ctaHierarchy の default。副 CTA の secondary もアクセント色なので、主 CTA と合わせて画面の「前進アクション」を2つ程度に絞る" },
+      { "place": "価格の最強調", "use": "typo-label-lg + --Text-Accent-Primary（PriceDisplay 等）", "note": "textHierarchy.accentNote と同じ。font-bold は足さない" },
+      { "place": "ロゴ・ブランドの印", "use": "ブランド色のロゴ素材そのもの", "note": "UI 部品の色としては使わない" },
+      { "place": "入力部品のオン状態", "use": "Checkbox / CheckboxGroup / CheckboxCard / RadioGroup / Switch / Slider のチェック・選択・つまみ（--Object-Accent-Primary / --Brand-Cake-Orange）", "note": "状態そのものを示す色なので、ボタンや文字リンクには広げない" },
+      { "place": "進捗・処理中の表示", "use": "ProgressSteps / FunnelShell のステップの完了・現在、Progress の帯、Spinner の回る円弧", "note": "完了と現在地を示す表示に限る。装飾には使わない" },
+      { "place": "未読・件数などの小さな状態の印", "use": "NotificationList の未読ドット、FilterBar・MenuDrawer の件数バッジ、ImageGallery の現在位置ドット", "note": "面積が小さい印に限る。バッジを並べて画面を埋めない" },
+      { "place": "ヘッダーの「会員登録・ログイン」（未ログイン時の入会・ログイン導線）", "use": "Button variant=\"default\" size=\"sm\"（ブランド色の塗り）", "note": "会員になることは事業上の主導線なので、全ページに出てもブランド色の塗りを維持する。ヘッダーの中でブランド色の塗りにしてよいのはこの1つだけ（カート・ナビ項目・ログイン後のアカウント操作は notAllowed のとおり）" }
+    ],
+    "notAllowed": [
+      { "place": "ヘッダー・グローバルナビの操作（カート、ナビ項目、ログイン後のアカウント操作など。会員登録・ログインだけは allowed の例外）", "instead": "Button variant=\"outline\"（強調したいとき）/ ghost（通常）/ tertiary", "note": "毎ページに出るので、ブランド色を置くとページごとの主 CTA と競合する" },
+      { "place": "一覧・カードで1件ごとに繰り返す操作（商品カードの「カートに追加」、クーポンの「獲得する」等）", "instead": "Button variant=\"outline\"（ProductCard のカートボタンは対応済み）", "note": "件数分だけブランド色のベタ塗りが並び、一覧全体がブランド色に染まって見える" },
+      { "place": "ブックマーク・お気に入り等の保存トグルのボタン本体（「ブックマークを追加」「保存」）", "instead": "Button variant=\"outline\"（保存済みは文言とアイコンの形で示す。ブランド色のベタ塗りにしない）", "note": "保存は主 CTA ではなく補助の操作" },
+      { "place": "「もっと見る」「すべて見る」「一覧を見る」等の移動", "instead": "文字リンクは Button variant=\"link\"（SectionHeader の moreHref も同じ意匠）。ボタンにするときは variant=\"outline\"（黒ベタ塗りにしない）", "note": "色ではなく下線で「押せる」ことを示す" },
+      { "place": "ナビの選択中表示（チップ・タブ・サイドナビ・ボトムタブ）", "instead": "Text-High-Emphasis の文字・下線・左ライン（Tabs の underbar が見本）。チップは Chip の selected（グレー地 + 黒系の枠）", "note": "選択中を色の薄い地で塗らない。Chip の selected は対応済み（Surface-Tertiary 地 + Text-High-Emphasis 文字 + 内側 1px の Border-High-Emphasis の枠）。今の SideNav / BottomTabBar / SectionNav / SubNav はブランド色のままで、変更は別途（未対応）" },
+      { "place": "評価の星・評価の数値", "instead": "RatingStars は --Text-High-Emphasis（黒系）。入力用の星（ReviewForm の選択済み）はブランド色のまま", "note": "表示用の評価はブランド色の目立つ要素にしない" },
+      { "place": "装飾目的の成功色・アクセント色の情報ラベル（「最短 〇月〇日お届け」等）", "instead": "--Text-Medium-Emphasis（Text-Success は成功メッセージ・結果の状態だけに使う）", "note": "情報ラベルを色で目立たせない" }
+    ],
+    "rules": [
+      "新しい部品や画面でブランド色を使うときは、allowed のどれに当たるかを説明できること。当たらないなら黒系・グレー系（Text-High-Emphasis / Text-Medium-Emphasis / Border-High-Emphasis / Surface-Tertiary）か、Button の outline / link を使う",
+      "ブランド色のベタ塗り・薄い地は、1ビューポートに主 CTA 1つと、状態を示す小さな印を除いて置かない",
+      "文字リンクにブランド色（--Text-Accent-Primary）を使わない。リンクは下線で示す。価格の最強調だけがアクセント色の文字",
+      "DS 内に notAllowed に当たる既存部品が残っているときは、新規実装にそれを真似しない（部品の追従は個別に行う）"
     ]
   }
 }

package/contracts/rules.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Rules Contracts",
-    "version": "0.20.1",
+    "version": "0.21.0",
     "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。"
   },
   "prohibited": [
@@ -515,7 +515,7 @@
         "components/ec/"
       ],
       "message": "outline-none でフォーカスリングを消す禁止",
-      "fix": "focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50"
+      "fix": "FOCUS_RING / FOCUS_RING_ONLY（src/lib/focus-ring.ts）を使う。focus-visible:ring-[3px] に続けるリング色は ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--Focus-High-Emphasis)_50%,transparent))]"
     },
     {
       "id": "R42",
@@ -614,6 +614,13 @@
       ],
       "message": "Input type='number' を直接使わない",
       "fix": "数値入力はカート数量・価格・在庫すべて <NumberInput /> を使う（size=\"sm\" コンパクト型 / size=\"md\" サークル型）"
+    },
+    {
+      "id": "R57",
+      "severity": "warning",
+      "category": "component",
+      "message": "ブランド色（--Brand-Cake-Orange / --Text-Accent-Primary / --Surface-Accent-Primary-Light 等）を、主 CTA・価格の最強調・入力部品のオン状態・進捗や件数の小さな印以外に使わない。特に、ヘッダー・グローバルナビの操作、一覧やカードで1件ごとに繰り返す操作、ブックマーク等の保存トグルのボタン本体、「もっと見る」等の移動リンク、ナビの選択中表示、評価の星、情報ラベルをブランド色にしない（正規表現では検出できないため、レビューで見る）",
+      "fix": "使ってよい場所と代わりの部品は contracts/composition.json の brandColorUsage を見る。繰り返す操作・移動ボタン・保存トグルは <Button variant=\"outline\">、「もっと見る」等の文字リンクは <Button variant=\"link\">（グレー + 下線）、評価の星は --Text-High-Emphasis、情報ラベルは --Text-Medium-Emphasis"
     }
   ],
   "accessibility": {
@@ -629,7 +636,7 @@
       },
       {
         "id": "A003",
-        "rule": "UIコンポーネント境界・アイコンのコントラスト比 3:1 以上"
+        "rule": "UIコンポーネント境界・アイコンのコントラスト比 3:1 以上。既定で届かない枠・溝・輪郭・リングだけのフォーカスは、見た目の既定を変えずに、高コントラスト（OS の prefers-contrast: more か data-contrast=\"more\"）のときだけ新ロール（--Border-Control / --Surface-Control-Track / --Focus-Ring-Control）で 3:1 以上にする。入力・選択の操作部品の枠は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形（フォールバック付き）で書く。新ロールはフォールバックなしで参照せず、:root / .dark では宣言しない（semantic.css の High Contrast 節だけ）。検査は npm run lint:contrast（既定 + 高コントラスト 2 モード）"
       },
       {
         "id": "A004",
@@ -637,7 +644,7 @@
       },
       {
         "id": "A005",
-        "rule": "フォーカスリング必須: focus-visible:border-[var(--Focus-High-Emphasis)] focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50（DS の FOCUS_RING 定数。入力系・操作系はすべてこれを使い、独自の ring 幅・色を作らない）"
+        "rule": "フォーカスリング必須: focus-visible:border-[var(--Focus-High-Emphasis)] focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--Focus-High-Emphasis)_50%,transparent))]（DS の FOCUS_RING 定数。リングの色は既定では緑の 50% 透過で、高コントラストのときだけ不透明な --Focus-Ring-Control に切り替わる。入力系・操作系はすべてこれを使い、独自の ring 幅・色を作らない）。枠を変えずリングだけで示す部品（Switch / ListItem / カルーセル等）は FOCUS_RING_ONLY（内側に描くなら FOCUS_RING_INSET）を使う。ring-[var(--Focus-High-Emphasis)]/50 や ring-ring/50 の直書きは、高コントラストで不透明なリング（--Focus-Ring-Control）に切り替わらないため禁止。リングは box-shadow なので forced-colors（Windows のハイコントラスト）では描かれない。forced-colors では outline（実線 2px・Highlight）で示す: FOCUS_RING / FOCUS_RING_WITHIN / FOCUS_RING_INSET / FOCUS_RING_ONLY は含んでいる。ring を自前で書く場合は FORCED_COLORS_FOCUS（外側）/ FORCED_COLORS_FOCUS_INSET / FORCED_COLORS_FOCUS_WITHIN を足す。メニュー項目の選択位置は forced-colors で Highlight / HighlightText の塗りにする（FORCED_COLORS_MENU_ITEM / cmdk は FORCED_COLORS_COMMAND_ITEM。項目は outline-none。outline-hidden は forced-colors で常時 2px の輪郭線が出る）"
       },
       {
         "id": "A011",
@@ -661,7 +668,7 @@
       },
       {
         "id": "A013",
-        "rule": "Radix ベースのコントロール（Select / Switch / Checkbox / Combobox / Slider 等）は <button> や <span role=\"slider\"> として描画されるため、<Label htmlFor> や外側の <label> ラップでは名前が付かない。FormField でラップして aria-labelledby を自動付与させるか、単体利用なら日本語の aria-label をコントロール自身に書く（issue #202）"
+        "rule": "Radix ベースのコントロール（Select / Switch / Checkbox / Combobox / Slider 等）は、単一フィールドでは FormField の aria-labelledby で名前を付ける。複数選択肢では各コントロールを native label に関連付けるか、日本語の aria-label / aria-labelledby を明示する。明示ARIAは自動のフィールド名より優先し、description / error は aria-describedby で関連付ける（issue #202）"
       },
       {
         "id": "A008",
@@ -839,6 +846,7 @@
         }
       ],
       "usage": "Tailwind では duration-[var(--Motion-Duration-Base)] / ease-[var(--Motion-Easing-Standard)]。素の CSS では var() を直接参照する。",
+      "reducedMotion": "prefers-reduced-motion: reduce では、--Motion-Duration-* を参照する動きと tw-animate-css の animate-in / animate-out（preset が再生時間を 0.01ms に落とす）は自動で止まる。Tailwind の animate-spin / animate-pulse など無限に繰り返すアニメーションは止まらないため motion-reduce:animate-none を必ず併記する。JS で動かすもの（カルーセルの自動再生・scrollTo の smooth 等）は matchMedia で prefers-reduced-motion を判定して止める",
       "note": "Tailwind の ease-out / ease-in-out クラス（別曲線）を使っている既存箇所は体感が変わるため Standard に寄せていない。曲線を何本に整理するかは視覚が変わる設計判断として別途扱う。"
     },
     "zIndex": {
@@ -984,6 +992,20 @@
         "excludes": [
           ".stories."
         ]
+      },
+      {
+        "id": "AI8",
+        "name": "window.confirm",
+        "pattern": "",
+        "description": "AI生成パターン: window.confirm() で確認する（ブラウザ標準の意匠で、文言・ボタン・フォーカスを DS の規約に合わせられない）",
+        "fix": "useConfirm を使う（アプリのルートに ConfirmDialogProvider を 1 つ置き、const ok = await confirm({ title, description, confirmLabel, tone }) で受け取る）"
+      },
+      {
+        "id": "AI9",
+        "name": "処理中ボタンの自作",
+        "pattern": "",
+        "description": "AI生成パターン: 処理中のボタンを disabled + 自作スピナーで組む（disabled でフォーカスが外れ、ラベルの差し替えで幅も変わる）。例: <Button disabled><Spinner /> 送信中...</Button> / <Button disabled={busy}>{busy ? <Loader2 className=\"animate-spin\" /> : \"保存\"}</Button> / <Button disabled={busy}>{busy && <Spinner />}保存</Button>",
+        "fix": "Button の loading を使う（<Button loading>保存</Button>。幅を保ち、フォーカスを保ったまま click 系を止める。読み上げ文言は loadingLabel、既定「処理中」）"
       }
     ]
   }

package/contracts/screen-patterns.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Screen Patterns Contracts",
-    "version": "0.20.1",
+    "version": "0.21.0",
     "description": "CRUD 機能でどの画面パターンを使うかの機械可読な判断基準。5パターンの定義・CRUD 対応・決定木・編集UIの観点比較を構造化する。人間向けの解説は guidelines/foundations/screen-patterns.md。",
     "source": "GitHub issue #37 CRUDの画面設計の型化と基本パターンの整備",
     "relatedContract": "本契約はページ種別の選択（何を使うか）を担う。選んだ後の骨格の組み方（外枠構造・余白リズム・視覚階層）は contracts/composition.json を参照する。",
@@ -113,7 +113,7 @@
       "aliases": ["Semi Modal"],
       "purpose": "軽〜中程度の作成・編集。一覧のコンテキストを維持したまま素早く終える。",
       "dsComponents": ["ResponsiveDialog"],
-      "dsComponentsNote": "PC=Dialog / SP=Sheet を自動切替。素の Dialog / Sheet を手組みで出し分けない。",
+      "dsComponentsNote": "PC=Dialog / SP=Drawer（下部のボトムシート）を自動切替。素の Dialog / Sheet を手組みで出し分けない。",
       "navigation": {
         "globalNav": "元画面のまま（オーバーレイ表示）",
         "breadcrumb": "元画面のまま",
@@ -148,11 +148,13 @@
         "削除確認・実行確認・警告",
         "操作を一度止めて明示的な確認を取りたい",
         "選択肢を提示して分岐させたい",
-        "破壊的操作（削除・取り消し）の確認は AlertDialog"
+        "破壊的操作（削除・取り消し）の確認は AlertDialog",
+        "はい / いいえを 1 回聞くだけの確認（window.confirm() の置き換え）は useConfirm。アプリのルートに ConfirmDialogProvider を 1 つ置き、const ok = await confirm({ title, description }) で受け取る（中身は AlertDialog）"
       ],
       "whenNotToUse": [
         "フォーム入力（→ ResponsiveDialog）",
-        "破壊的確認なのに素の Dialog で組む（→ AlertDialog）"
+        "破壊的確認なのに素の Dialog で組む（→ AlertDialog）",
+        "window.confirm() で確認する（→ useConfirm）"
       ]
     }
   ],

package/dist/components/ec/admin-shell.js

@@ -1,24 +1,24 @@
 "use client";
-import { jsxs as r, jsx as e, Fragment as N } from "react/jsx-runtime";
-import * as d from "react";
-import { cn as k } from "../../lib/utils.js";
-import M from "iconsax-reactjs/dist/esm/Home2.js";
-import z from "iconsax-reactjs/dist/esm/ShoppingCart.js";
-import C from "iconsax-reactjs/dist/esm/Cake.js";
-import A from "iconsax-reactjs/dist/esm/Shop.js";
-import T from "iconsax-reactjs/dist/esm/Chart2.js";
-import H from "iconsax-reactjs/dist/esm/Box.js";
-import P from "iconsax-reactjs/dist/esm/Setting2.js";
-import E from "iconsax-reactjs/dist/esm/InfoCircle.js";
-import j from "iconsax-reactjs/dist/esm/Notification.js";
-import w from "iconsax-reactjs/dist/esm/User.js";
-import F from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import I from "iconsax-reactjs/dist/esm/ArrowLeft.js";
-import { AdminSideNav as O } from "../primitives/admin-side-nav.js";
-import { AdminHeader as L } from "../primitives/admin-header.js";
-import { Button as R } from "../foundations/button.js";
-import { SkipLink as B } from "../foundations/skip-link.js";
-function te({
+import { jsxs as r, jsx as e, Fragment as M } from "react/jsx-runtime";
+import * as b from "react";
+import { cn as z } from "../../lib/utils.js";
+import C from "iconsax-reactjs/dist/esm/Home2.js";
+import A from "iconsax-reactjs/dist/esm/ShoppingCart.js";
+import T from "iconsax-reactjs/dist/esm/Cake.js";
+import H from "iconsax-reactjs/dist/esm/Shop.js";
+import E from "iconsax-reactjs/dist/esm/Chart2.js";
+import P from "iconsax-reactjs/dist/esm/Box.js";
+import j from "iconsax-reactjs/dist/esm/Setting2.js";
+import w from "iconsax-reactjs/dist/esm/InfoCircle.js";
+import F from "iconsax-reactjs/dist/esm/Notification.js";
+import I from "iconsax-reactjs/dist/esm/User.js";
+import L from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import O from "iconsax-reactjs/dist/esm/ArrowLeft.js";
+import { AdminSideNav as B } from "../primitives/admin-side-nav.js";
+import { AdminHeader as D } from "../primitives/admin-header.js";
+import { Button as K } from "../foundations/button.js";
+import { SkipLink as R } from "../foundations/skip-link.js";
+function oe({
   name: i,
   children: t,
   className: l
@@ -26,12 +26,12 @@ function te({
   return /* @__PURE__ */ r(
     "div",
     {
-      className: k(
+      className: z(
         "relative border-2 border-dashed border-red-500 rounded-lg",
         l
       ),
       children: [
-        /* @__PURE__ */ r("span", { className: "absolute -top-3 left-2 bg-[var(--Primitive-Red-500)] text-[var(--Primitive-White-alpha-1000)] typo-label-xs px-1.5 py-0.5 rounded z-10", children: [
+        /* @__PURE__ */ r("span", { className: "absolute -top-3 left-2 bg-[var(--Surface-Caution)] text-[var(--Primitive-White-alpha-1000)] typo-label-xs px-1.5 py-0.5 rounded z-10", children: [
           "DS未実装: ",
           i
         ] }),
@@ -49,12 +49,12 @@ function a(i) {
     }
   );
 }
-const D = [
-  { key: "home", label: "ホーム", icon: a(M) },
+const $ = [
+  { key: "home", label: "ホーム", icon: a(C) },
   {
     key: "orders",
     label: "注文管理",
-    icon: a(z),
+    icon: a(A),
     subMenus: [
       { label: "注文一覧", href: "#" },
       { label: "注文CSV出力", href: "#" },
@@ -66,7 +66,7 @@ const D = [
   {
     key: "items",
     label: "商品管理",
-    icon: a(C),
+    icon: a(T),
     subMenus: [
       { label: "商品一覧", href: "#" },
       { label: "商品登録", href: "#" },
@@ -79,7 +79,7 @@ const D = [
   {
     key: "shop",
     label: "ショップ管理",
-    icon: a(A),
+    icon: a(H),
     subMenus: [
       { label: "ショップ情報", href: "#" },
       { label: "休業日設定", href: "#" },
@@ -93,7 +93,7 @@ const D = [
   {
     key: "sales",
     label: "売上管理",
-    icon: a(T),
+    icon: a(E),
     subMenus: [
       { label: "売上詳細", href: "#" },
       { label: "振込一覧", href: "#" },
@@ -101,11 +101,11 @@ const D = [
       { label: "広告管理", href: "#" }
     ]
   },
-  { key: "services", label: "サービス", icon: a(H) },
+  { key: "services", label: "サービス", icon: a(P) },
   {
     key: "settings",
     label: "設定",
-    icon: a(P),
+    icon: a(j),
     subMenus: [
       { label: "アカウント設定", href: "#" },
       { label: "銀行口座", href: "#" },
@@ -114,29 +114,30 @@ const D = [
       { label: "メールテンプレート", href: "#" }
     ]
   },
-  { key: "faq", label: "FAQ", icon: a(E) }
+  { key: "faq", label: "FAQ", icon: a(w) }
 ];
-function ne({
+function se({
   children: i,
   activeNav: t = "home",
   title: l = "",
   breadcrumbs: n,
   shopName: s = "Sample Shop",
-  brand: b,
-  sidebarHeader: p,
-  navItems: u = D,
-  headerActions: v,
+  brand: p,
+  sidebarHeader: u,
+  navItems: v = $,
+  headerActions: x,
   onBack: m,
-  backLabel: x = "戻る",
+  backLabel: g = "戻る",
   mainId: f = "main-content",
-  skipLink: g
+  skipLink: y,
+  linkComponent: c
 }) {
-  const [y, c] = d.useState(!1), S = /* @__PURE__ */ r(N, { children: [
+  const S = c ?? "a", [N, h] = b.useState(!1), k = /* @__PURE__ */ r(M, { children: [
     /* @__PURE__ */ r("button", { className: "relative flex items-center justify-center size-10 shrink-0 rounded-lg hover:bg-[var(--Surface-Secondary)]", "aria-label": "通知", children: [
-      /* @__PURE__ */ e(j, { size: 20, className: "text-[var(--Text-High-Emphasis)]" }),
+      /* @__PURE__ */ e(F, { size: 20, className: "text-[var(--Text-High-Emphasis)]" }),
       /* @__PURE__ */ e("span", { className: "absolute top-1.5 right-1.5 size-2 rounded-full bg-[var(--Surface-Caution)]" })
     ] }),
-    /* @__PURE__ */ e("button", { className: "flex items-center justify-center size-10 shrink-0 rounded-full bg-[var(--Surface-Tertiary)]", "aria-label": "プロフィール", children: /* @__PURE__ */ e(w, { size: 20, className: "text-[var(--Text-Medium-Emphasis)]" }) })
+    /* @__PURE__ */ e("button", { className: "flex items-center justify-center size-10 shrink-0 rounded-full bg-[var(--Surface-Tertiary)]", "aria-label": "プロフィール", children: /* @__PURE__ */ e(I, { size: 20, className: "text-[var(--Text-Medium-Emphasis)]" }) })
   ] });
   return (
     // 地が Surface-Secondary なので、配下 Card の既定サーフェスを白に切り替える文脈を宣言する
@@ -147,46 +148,47 @@ function ne({
         className: "@container flex min-h-screen bg-[var(--Surface-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]",
         "data-slot": "admin-shell",
         children: [
-          g !== !1 && /* @__PURE__ */ e(B, { href: `#${f}` }),
+          y !== !1 && /* @__PURE__ */ e(R, { href: `#${f}` }),
           /* @__PURE__ */ e(
-            O,
+            B,
             {
-              items: u,
+              items: v,
               activeKey: t,
-              drawerTitle: p ?? s,
-              open: y,
-              onOpenChange: c
+              drawerTitle: u ?? s,
+              open: N,
+              onOpenChange: h,
+              linkComponent: c
             }
           ),
           /* @__PURE__ */ r("div", { className: "@container/main flex flex-1 flex-col @md:pl-18", children: [
             /* @__PURE__ */ e(
-              L,
+              D,
               {
-                brand: b ?? `${s}管理`,
-                onMenuClick: () => c(!0),
-                actions: v ?? S
+                brand: p ?? `${s}管理`,
+                onMenuClick: () => h(!0),
+                actions: x ?? k
               }
             ),
             /* @__PURE__ */ r("main", { id: f, className: "mt-14 @md:mt-16 flex-1 p-4 @md:p-6", children: [
               m && /* @__PURE__ */ r(
-                R,
+                K,
                 {
                   variant: "ghost",
                   size: "sm",
                   className: "mb-2 gap-1",
                   onClick: m,
                   children: [
-                    /* @__PURE__ */ e(I, { size: 16 }),
+                    /* @__PURE__ */ e(O, { size: 16 }),
                     " ",
-                    x
+                    g
                   ]
                 }
               ),
               (n || l) && /* @__PURE__ */ r("div", { className: "mb-4 space-y-1", children: [
-                n && n.length > 0 && /* @__PURE__ */ e("nav", { className: "flex items-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", "aria-label": "パンくず", children: n.map((o, h) => /* @__PURE__ */ r(d.Fragment, { children: [
-                  h > 0 && /* @__PURE__ */ e(F, { size: 12 }),
-                  o.href ? /* @__PURE__ */ e("a", { href: o.href, className: "hover:text-[var(--Text-Accent-Primary)] transition-colors", children: o.label }) : /* @__PURE__ */ e("span", { className: "text-[var(--Text-High-Emphasis)]", children: o.label })
-                ] }, h)) }),
+                n && n.length > 0 && /* @__PURE__ */ e("nav", { className: "flex items-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", "aria-label": "パンくず", children: n.map((o, d) => /* @__PURE__ */ r(b.Fragment, { children: [
+                  d > 0 && /* @__PURE__ */ e(L, { size: 12 }),
+                  o.href ? /* @__PURE__ */ e(S, { href: o.href, className: "hover:text-[var(--Text-Accent-Primary)] transition-colors", children: o.label }) : /* @__PURE__ */ e("span", { className: "text-[var(--Text-High-Emphasis)]", children: o.label })
+                ] }, d)) }),
                 l && /* @__PURE__ */ e("h1", { className: "typo-heading-2xl text-[var(--Text-High-Emphasis)]", children: l })
               ] }),
               i
@@ -198,6 +200,6 @@ function ne({
   );
 }
 export {
-  ne as AdminShell,
-  te as MissingComponent
+  se as AdminShell,
+  oe as MissingComponent
 };

package/dist/components/ec/anniversary-card.js

@@ -1,9 +1,9 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import "react";
-import h from "iconsax-reactjs/dist/esm/Calendar.js";
-import { cn as u } from "../../lib/utils.js";
+import u from "iconsax-reactjs/dist/esm/Calendar.js";
+import { cn as v } from "../../lib/utils.js";
 import { Button as i } from "../foundations/button.js";
-function N({
+function T({
   name: n,
   relation: d,
   type: l,
@@ -12,26 +12,27 @@ function N({
   memo: r,
   editHref: s,
   onEdit: t,
-  className: p,
-  ...o
+  linkComponent: p,
+  className: o,
+  ...x
 }) {
-  const x = s ? /* @__PURE__ */ e(i, { variant: "tertiary", size: "xs", asChild: !0, children: /* @__PURE__ */ e("a", { href: s, children: "編集" }) }) : t ? /* @__PURE__ */ e(i, { variant: "tertiary", size: "xs", onClick: t, children: "編集" }) : null;
+  const h = s ? /* @__PURE__ */ e(i, { variant: "tertiary", size: "xs", asChild: !0, children: /* @__PURE__ */ e(p ?? "a", { href: s, children: "編集" }) }) : t ? /* @__PURE__ */ e(i, { variant: "tertiary", size: "xs", onClick: t, children: "編集" }) : null;
   return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "anniversary-card",
-      className: u(
+      className: v(
         "min-w-[200px] rounded-xl border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-4 space-y-2",
-        p
+        o
       ),
-      ...o,
+      ...x,
       children: [
         /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ e("p", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: n }),
             /* @__PURE__ */ e("span", { className: "typo-label-xs text-[var(--Text-Medium-Emphasis)] bg-[var(--Surface-Secondary)] px-2 py-0.5 rounded-full", children: d })
           ] }),
-          x
+          h
         ] }),
         /* @__PURE__ */ a("p", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: [
           l,
@@ -40,7 +41,7 @@ function N({
         ] }),
         /* @__PURE__ */ a("div", { className: "flex items-center gap-2 bg-[var(--Surface-Accent-Primary-Light)] rounded-lg px-3 py-2", children: [
           /* @__PURE__ */ e(
-            h,
+            u,
             {
               size: 16,
               className: "text-[var(--Brand-Cake-Orange)]",
@@ -59,5 +60,5 @@ function N({
   );
 }
 export {
-  N as AnniversaryCard
+  T as AnniversaryCard
 };

package/dist/components/ec/coupon-card.js

@@ -10,8 +10,8 @@ function P({
   imageAlt: o,
   shopThumbnailUrl: s,
   shopName: a,
-  status: c = "available",
-  onAcquire: n,
+  status: n = "available",
+  onAcquire: c,
   acquireLabel: u = "クーポンを獲得する",
   layout: p = "vertical",
   limitLabel: f,
@@ -27,8 +27,8 @@ function P({
       limitLabel: f,
       conditionText: b,
       expiryText: x,
-      status: c,
-      onAcquire: n,
+      status: n,
+      onAcquire: c,
       className: m,
       ...v
     }
@@ -38,7 +38,7 @@ function P({
       "data-slot": "coupon-card",
       className: d(
         "min-w-[200px] overflow-hidden rounded-xl border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)]",
-        c === "unavailable" && "opacity-50",
+        n === "unavailable" && "opacity-50",
         m
       ),
       ...v,
@@ -68,7 +68,7 @@ function P({
           t && /* @__PURE__ */ e("p", { className: "mt-1 break-words typo-body-md text-[var(--Text-Medium-Emphasis)]", children: t })
         ] }),
         /* @__PURE__ */ e("div", { className: "px-4 py-3", children: /* @__PURE__ */ e("div", { className: "border-t border-dashed border-[var(--Border-Medium-Emphasis)]" }) }),
-        /* @__PURE__ */ e("div", { className: "px-4 pb-4", children: /* @__PURE__ */ e(h, { status: c, onAcquire: n, label: u, size: "lg" }) })
+        /* @__PURE__ */ e("div", { className: "px-4 pb-4", children: /* @__PURE__ */ e(h, { status: n, onAcquire: c, label: u, size: "lg" }) })
       ]
     }
   );
@@ -80,16 +80,16 @@ function w({
   expiryText: o,
   status: s = "available",
   onAcquire: a,
-  className: c,
-  ...n
+  className: n,
+  ...c
 }) {
   return /* @__PURE__ */ i(
     "div",
     {
       "data-slot": "coupon-card",
       "data-layout": "horizontal",
-      className: d("flex items-stretch min-w-0 overflow-hidden", c),
-      ...n,
+      className: d("flex items-stretch min-w-0 overflow-hidden", n),
+      ...c,
       children: [
         /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col items-start justify-center gap-1 rounded-l-lg border-b border-l border-t border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] px-3 py-2", children: [
           t && /* @__PURE__ */ e("span", { className: "shrink-0 rounded-full bg-[var(--Surface-Accent-Primary-Light)] px-2 py-0.5 typo-body-sm text-[var(--Text-Accent-Primary)]", children: t }),
@@ -126,7 +126,7 @@ function h({
         l
       ]
     }
-  ) : r === "acquiring" ? /* @__PURE__ */ e("div", { className: d(a, "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]"), children: /* @__PURE__ */ e(g, { className: "size-5 animate-spin" }) }) : r === "acquired" ? /* @__PURE__ */ i("div", { className: d(a, "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] animate-in fade-in duration-[var(--Motion-Duration-Slow)] gap-1.5"), children: [
+  ) : r === "acquiring" ? /* @__PURE__ */ e("div", { className: d(a, "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]"), children: /* @__PURE__ */ e(g, { className: "size-5 animate-spin motion-reduce:animate-none" }) }) : r === "acquired" ? /* @__PURE__ */ i("div", { className: d(a, "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] animate-in fade-in duration-[var(--Motion-Duration-Slow)] gap-1.5"), children: [
     /* @__PURE__ */ e(N, { className: "size-4" }),
     "獲得済み"
   ] }) : /* @__PURE__ */ e("div", { className: d(a, "bg-[var(--Surface-Secondary)] text-[var(--Text-Low-Emphasis)]"), children: "獲得不可" });