@cakejp/design-system 0.7.0 → 0.10.0

package/tokens.json

@@ -108,6 +108,13 @@
     }
   },
 
+  "breakpoints": {
+    "comment": "役割は二層。(1) 切替段=md / lg の2つだけ（値は本番 cakejp.css の境界に一致させた正本。レイアウトの変形はこの2段でのみ行う）。(2) 上限段=xl（1280。「切替段」ではなく DS が定めるコンテンツ幅の上限段。本番に 1280 の切替段は無い＝1025/1441 はある）。DS 内部はコンテナクエリ @md: / @lg: / @xl:（preset.css の --container-md / --container-lg / --container-xl）で参照し、生 CSS ではこの px 値をメディアクエリに直書きする（CSS 変数はメディアクエリに使えないため、値の配布は本トークンが担う）。独自のブレイクポイント値を発明しない",
+    "md": { "px": 768, "rem": "48rem", "container": "--container-md", "role": "切替段", "usage": "SP/PC 境界。767px 以下=SP / 768px 以上=PC。本番 cakejp.css の max-width:767px / min-width:768px と一致" },
+    "lg": { "px": 960, "rem": "60rem", "container": "--container-lg", "role": "切替段", "usage": "PC 中段。本番 cakejp.css の min-width:960px 段と一致" },
+    "xl": { "px": 1280, "rem": "80rem", "container": "--container-xl", "role": "上限段", "usage": "コンテンツ上限段（切替段ではない）。ページコンテナの標準上限で、1280px 以上では原則レイアウト変形を追加しない。本番 cakejp.css に 1280 の切替段は無い（1025 / 1441 はある）——DS が定める標準上限。実例: MypageShell の PC グリッド max-w-[1280px]" }
+  },
+
   "touchTarget": {
     "button-cta":    { "min": "40px", "recommended": "48px" },
     "icon-button":   { "min": "40px", "recommended": "44px" },

package/dist/types/components/ec/admin-layout.d.ts

@@ -1,31 +0,0 @@
-/**
- * AdminLayout — 管理画面の共通レイアウト
- *
- * 本番の shop_layout.ctp を参考に、Header + SideNav + Main Content の構造を再現。
- * 参照元:
- * - admin-test-htdocs/app/views/layouts/shop_layout.ctp
- * - admin-test-htdocs/app/views/elements/shop_layout/header.ctp
- * - admin-test-htdocs/app/views/elements/shop_layout/side_menu.ctp
- * - CSS: admin_shops/layout/nav_layout.css
- */
-import * as React from "react";
-export declare function MissingComponent({ name, children, className, }: {
-    name: string;
-    children: React.ReactNode;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export interface AdminLayoutProps {
-    children: React.ReactNode;
-    /** 現在アクティブなナビアイテム */
-    activeNav?: string;
-    /** ページタイトル（ヘッダー表示用） */
-    title?: string;
-    /** パンくず */
-    breadcrumbs?: {
-        label: string;
-        href?: string;
-    }[];
-    /** ショップ名 */
-    shopName?: string;
-}
-export declare function AdminLayout({ children, activeNav, title, breadcrumbs, shopName, }: AdminLayoutProps): import("react/jsx-runtime").JSX.Element;