@cakejp/design-system 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (131) hide show
  1. package/AGENTS.md +144 -0
  2. package/CHANGELOG.md +115 -0
  3. package/CLAUDE.md +188 -0
  4. package/CLAUDE_PRODUCTION.md +121 -0
  5. package/MIGRATION.md +228 -0
  6. package/README.md +79 -0
  7. package/RELEASE.md +205 -0
  8. package/bin/init.js +134 -0
  9. package/component-registry.json +1146 -0
  10. package/contracts/components.json +730 -0
  11. package/contracts/rules.json +559 -0
  12. package/dist/index.css +1 -0
  13. package/dist/index.js +9344 -0
  14. package/dist/types/components/ec/_mypage-menu-data.d.ts +15 -0
  15. package/dist/types/components/ec/admin-layout.d.ts +31 -0
  16. package/dist/types/components/ec/anniversary-card.d.ts +50 -0
  17. package/dist/types/components/ec/cake-logo.d.ts +22 -0
  18. package/dist/types/components/ec/chart-controls.d.ts +16 -0
  19. package/dist/types/components/ec/countdown-timer.d.ts +24 -0
  20. package/dist/types/components/ec/coupon-card.d.ts +47 -0
  21. package/dist/types/components/ec/delivery-calendar.d.ts +36 -0
  22. package/dist/types/components/ec/order-section.d.ts +29 -0
  23. package/dist/types/components/ec/order-summary.d.ts +36 -0
  24. package/dist/types/components/ec/payment-method.d.ts +41 -0
  25. package/dist/types/components/ec/product-card.d.ts +77 -0
  26. package/dist/types/components/ec/product-carousel.d.ts +56 -0
  27. package/dist/types/components/ec/product-cta.d.ts +35 -0
  28. package/dist/types/components/ec/product-detail-bar.d.ts +62 -0
  29. package/dist/types/components/ec/product-detail-sidebar.d.ts +115 -0
  30. package/dist/types/components/ec/product-list-item.d.ts +90 -0
  31. package/dist/types/components/ec/product-option.d.ts +62 -0
  32. package/dist/types/components/ec/rating-stars.d.ts +30 -0
  33. package/dist/types/components/ec/review-card.d.ts +44 -0
  34. package/dist/types/components/ec/review-form.d.ts +40 -0
  35. package/dist/types/components/ec/review-summary.d.ts +53 -0
  36. package/dist/types/components/ec/shop-card.d.ts +48 -0
  37. package/dist/types/components/ec/stat-card.d.ts +44 -0
  38. package/dist/types/components/foundations/accordion.d.ts +7 -0
  39. package/dist/types/components/foundations/alert-dialog.d.ts +18 -0
  40. package/dist/types/components/foundations/alert.d.ts +42 -0
  41. package/dist/types/components/foundations/aspect-ratio.d.ts +3 -0
  42. package/dist/types/components/foundations/avatar.d.ts +11 -0
  43. package/dist/types/components/foundations/badge.d.ts +9 -0
  44. package/dist/types/components/foundations/breadcrumb.d.ts +11 -0
  45. package/dist/types/components/foundations/button.d.ts +10 -0
  46. package/dist/types/components/foundations/calendar.d.ts +8 -0
  47. package/dist/types/components/foundations/card.d.ts +9 -0
  48. package/dist/types/components/foundations/checkbox-card.d.ts +30 -0
  49. package/dist/types/components/foundations/checkbox-group.d.ts +53 -0
  50. package/dist/types/components/foundations/checkbox.d.ts +4 -0
  51. package/dist/types/components/foundations/collapsible.d.ts +5 -0
  52. package/dist/types/components/foundations/command.d.ts +18 -0
  53. package/dist/types/components/foundations/context-menu.d.ts +25 -0
  54. package/dist/types/components/foundations/data-table.d.ts +104 -0
  55. package/dist/types/components/foundations/dialog.d.ts +17 -0
  56. package/dist/types/components/foundations/drawer.d.ts +13 -0
  57. package/dist/types/components/foundations/dropdown-menu.d.ts +25 -0
  58. package/dist/types/components/foundations/form.d.ts +24 -0
  59. package/dist/types/components/foundations/hover-card.d.ts +6 -0
  60. package/dist/types/components/foundations/input.d.ts +3 -0
  61. package/dist/types/components/foundations/label.d.ts +7 -0
  62. package/dist/types/components/foundations/menubar.d.ts +26 -0
  63. package/dist/types/components/foundations/navigation-menu.d.ts +14 -0
  64. package/dist/types/components/foundations/pagination.d.ts +13 -0
  65. package/dist/types/components/foundations/popover.d.ts +10 -0
  66. package/dist/types/components/foundations/progress.d.ts +4 -0
  67. package/dist/types/components/foundations/radio-group.d.ts +9 -0
  68. package/dist/types/components/foundations/responsive-dialog.d.ts +52 -0
  69. package/dist/types/components/foundations/scroll-area.d.ts +5 -0
  70. package/dist/types/components/foundations/select.d.ts +15 -0
  71. package/dist/types/components/foundations/separator.d.ts +4 -0
  72. package/dist/types/components/foundations/sheet.d.ts +14 -0
  73. package/dist/types/components/foundations/skeleton.d.ts +2 -0
  74. package/dist/types/components/foundations/slider.d.ts +4 -0
  75. package/dist/types/components/foundations/sonner.d.ts +3 -0
  76. package/dist/types/components/foundations/spinner.d.ts +6 -0
  77. package/dist/types/components/foundations/switch.d.ts +13 -0
  78. package/dist/types/components/foundations/table.d.ts +10 -0
  79. package/dist/types/components/foundations/tabs.d.ts +12 -0
  80. package/dist/types/components/foundations/textarea.d.ts +3 -0
  81. package/dist/types/components/foundations/toggle-group.d.ts +23 -0
  82. package/dist/types/components/foundations/toggle.d.ts +9 -0
  83. package/dist/types/components/foundations/tooltip.d.ts +7 -0
  84. package/dist/types/components/pages/cake/_mypage-shell.d.ts +41 -0
  85. package/dist/types/components/primitives/banner-carousel.d.ts +54 -0
  86. package/dist/types/components/primitives/bottom-tab-bar.d.ts +39 -0
  87. package/dist/types/components/primitives/bulk-action-bar.d.ts +32 -0
  88. package/dist/types/components/primitives/category-scroll.d.ts +70 -0
  89. package/dist/types/components/primitives/category-shortcuts.d.ts +44 -0
  90. package/dist/types/components/primitives/chip.d.ts +44 -0
  91. package/dist/types/components/primitives/coach-mark.d.ts +28 -0
  92. package/dist/types/components/primitives/empty-state.d.ts +36 -0
  93. package/dist/types/components/primitives/error-state.d.ts +41 -0
  94. package/dist/types/components/primitives/filter-bar.d.ts +56 -0
  95. package/dist/types/components/primitives/footer.d.ts +81 -0
  96. package/dist/types/components/primitives/form-field.d.ts +46 -0
  97. package/dist/types/components/primitives/header.d.ts +69 -0
  98. package/dist/types/components/primitives/image-carousel.d.ts +52 -0
  99. package/dist/types/components/primitives/image-gallery.d.ts +35 -0
  100. package/dist/types/components/primitives/image-uploader.d.ts +19 -0
  101. package/dist/types/components/primitives/kebab-menu.d.ts +38 -0
  102. package/dist/types/components/primitives/list-item.d.ts +60 -0
  103. package/dist/types/components/primitives/menu-drawer.d.ts +75 -0
  104. package/dist/types/components/primitives/notification-badge.d.ts +30 -0
  105. package/dist/types/components/primitives/notification-list.d.ts +45 -0
  106. package/dist/types/components/primitives/price-display.d.ts +33 -0
  107. package/dist/types/components/primitives/progress-steps.d.ts +27 -0
  108. package/dist/types/components/primitives/quantity-selector.d.ts +50 -0
  109. package/dist/types/components/primitives/search-bar.d.ts +31 -0
  110. package/dist/types/components/primitives/search-panel.d.ts +41 -0
  111. package/dist/types/components/primitives/section-header.d.ts +51 -0
  112. package/dist/types/components/primitives/share-buttons.d.ts +23 -0
  113. package/dist/types/components/primitives/side-nav.d.ts +62 -0
  114. package/dist/types/components/primitives/social-login-button.d.ts +24 -0
  115. package/dist/types/components/primitives/status-count-tabs.d.ts +14 -0
  116. package/dist/types/components/primitives/sticky-action-bar.d.ts +7 -0
  117. package/dist/types/components/primitives/sub-nav.d.ts +34 -0
  118. package/dist/types/components/primitives/tag.d.ts +19 -0
  119. package/dist/types/index.d.ts +109 -0
  120. package/dist/types/lib/utils.d.ts +2 -0
  121. package/package.json +186 -0
  122. package/scripts/codemod/check-migration.mjs +97 -0
  123. package/scripts/codemod/v0.2-to-v0.3.mjs +192 -0
  124. package/src/preset-standalone.css +109 -0
  125. package/src/preset.css +288 -0
  126. package/src/styles/primitive.css +139 -0
  127. package/src/styles/semantic.css +203 -0
  128. package/src/styles/typography.css +129 -0
  129. package/templates/AGENTS.md +56 -0
  130. package/templates/CLAUDE.md +56 -0
  131. package/tokens.json +127 -0
@@ -0,0 +1,50 @@
1
+ import * as React from "react";
2
+ export interface QuantitySelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
3
+ /** 現在の数量 */
4
+ value: number;
5
+ /** 最小値 */
6
+ min?: number;
7
+ /** 最大値 */
8
+ max?: number;
9
+ /** 数量変更時のコールバック */
10
+ onChange?: (value: number) => void;
11
+ /** 無効状態 */
12
+ disabled?: boolean;
13
+ /** エラー状態 */
14
+ error?: boolean;
15
+ /** サイズ(md = Pattern 2 サークル / sm = Pattern 1 ピル) */
16
+ size?: "sm" | "md";
17
+ /** 数値の直接入力を許可する(デフォルト: false — ボタン操作のみ) */
18
+ editable?: boolean;
19
+ /** 数量1のときにゴミ箱アイコンを表示する */
20
+ showTrash?: boolean;
21
+ /** ゴミ箱アイコン押下時のコールバック(削除確認ダイアログ表示等に使用) */
22
+ onDelete?: () => void;
23
+ }
24
+ /**
25
+ * 数量選択コンポーネント(Figma 準拠デザイン)
26
+ *
27
+ * Figma DS の Adjust コンポーネントを再現。2つのパターンを提供:
28
+ *
29
+ * - **`size="sm"`(Pattern 1: コンパクト型)** — カート内での使用。
30
+ * 100×32px のコンパクト型コンテナに −/数字/+ をインライン配置。
31
+ * 背景は `Surface/Tertiary`、角丸 32px。
32
+ *
33
+ * - **`size="md"`(Pattern 2: サークル型)** — 商品詳細での使用。
34
+ * 32×32px の円形ボタンが左右に独立し、中央に 44px 幅の数値コンテナ。
35
+ * ボタン間隔 12px。
36
+ *
37
+ * ### ステート
38
+ * - `disabled`: 全要素のテキスト/アイコンが `Text/Disable` (#B7B5B4)
39
+ * - `error`: コンパクト型は赤枠(2px)、サークル型は数値コンテナが赤枠
40
+ * - `showTrash`: 数量1のとき − がゴミ箱アイコンに変化
41
+ *
42
+ * ### AI 向け使用ルール
43
+ *
44
+ * - **商品詳細ページ**: `size="md"` で配置
45
+ * - **カート内**: `size="sm"` でコンパクトに表示
46
+ * - `min=1` が標準(0 にしない — 削除は別の UI で行う)
47
+ * - `editable=true` で数値の直接入力可能
48
+ */
49
+ declare function QuantitySelector({ className, value, min, max, onChange, disabled, error, size, editable, showTrash, onDelete, ...props }: QuantitySelectorProps): import("react/jsx-runtime").JSX.Element;
50
+ export { QuantitySelector };
@@ -0,0 +1,31 @@
1
+ import * as React from "react";
2
+ export interface SearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
3
+ /** 検索実行時のコールバック */
4
+ onSearch?: (query: string) => void;
5
+ /** サイズ */
6
+ size?: "sm" | "md";
7
+ /** 検索リンクURL({query} はクエリに置換) */
8
+ searchHref?: string;
9
+ }
10
+ /**
11
+ * 検索バーコンポーネント
12
+ *
13
+ * Cake.jp 本番準拠の検索バー。
14
+ * 入力フィールド + 右端の検索ボタンで構成。
15
+ *
16
+ * ### 本番準拠仕様
17
+ * - 角丸のボーダー付きボックス
18
+ * - 右端に検索アイコンボタン(クリックで検索実行)
19
+ * - ホバー時にボーダー色が変化
20
+ * - フォーカス時にアクセントカラーのリング
21
+ *
22
+ * ### AI 向け使用ルール
23
+ *
24
+ * - ヘッダー内の検索フィールドに使用
25
+ * - `size="sm"` はコンパクトなヘッダー向け
26
+ * - `size="md"` は検索専用ページ向け
27
+ * - `onSearch` で検索クエリを受け取る
28
+ * - `searchHref` で検索結果ページへの遷移リンクを生成
29
+ */
30
+ declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLInputElement>>;
31
+ export { SearchBar };
@@ -0,0 +1,41 @@
1
+ /**
2
+ * ## SearchPanel / 検索パネル
3
+ *
4
+ * 管理画面の一覧ページ上部に表示する検索フィルターパネル。
5
+ * 本番の p-search-panel パターンを DS コンポーネント化。
6
+ *
7
+ * ### インポート
8
+ * ```tsx
9
+ * import { SearchPanel } from '../../components/primitives/search-panel'
10
+ * ```
11
+ *
12
+ * ### Props
13
+ * | Prop | 型 | デフォルト | 説明 |
14
+ * |------|-----|-----------|------|
15
+ * | children | ReactNode | — | フィルターフィールド群 |
16
+ * | onSearch | () => void | — | 検索ボタンクリック時 |
17
+ * | onReset | () => void | — | リセットボタンクリック時 |
18
+ * | columns | 2\|3\|4 | 4 | グリッドカラム数(layout="grid" 時のみ有効) |
19
+ * | layout | "grid"\|"flex" | "grid" | レイアウトモード。flex は本番の flex-wrap パターン |
20
+ *
21
+ * ### AI 向け使用ルール
22
+ * - 管理画面の一覧ページで使用
23
+ * - children に FormField + Input/Select を並べる
24
+ * - フィールド数が多く均等幅で折り返したい場合は layout="flex" を使う
25
+ */
26
+ import * as React from "react";
27
+ export interface SearchPanelProps {
28
+ /** フィルターフィールド群 */
29
+ children: React.ReactNode;
30
+ /** 検索ボタンクリック時 */
31
+ onSearch?: () => void;
32
+ /** リセットボタンクリック時 */
33
+ onReset?: () => void;
34
+ /** グリッドカラム数(layout="grid" 時のみ有効) */
35
+ columns?: 2 | 3 | 4;
36
+ /** レイアウトモード。flex は本番の flex-wrap パターンで、フィールドが均等幅で自然に折り返す */
37
+ layout?: "grid" | "flex";
38
+ /** 追加クラス */
39
+ className?: string;
40
+ }
41
+ export declare function SearchPanel({ children, onSearch, onReset, columns, layout, className, }: SearchPanelProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,51 @@
1
+ import * as React from "react";
2
+ export type SectionHeaderSize = "3xl" | "2xl" | "xl" | "lg" | "md" | "sm";
3
+ export interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
4
+ /** セクションタイトル */
5
+ title: string;
6
+ /** サブタイトル / キャプション(タイトル行の下に表示) */
7
+ subtitle?: string;
8
+ /** 「もっと見る」リンクのURL */
9
+ moreHref?: string;
10
+ /** 「もっと見る」ラベル */
11
+ moreLabel?: string;
12
+ /** 「もっと見る」クリック時 */
13
+ onMoreClick?: () => void;
14
+ /** 右側に表示するアクションボタン(もっと見るの代わりに使用) */
15
+ action?: React.ReactNode;
16
+ /** カルーセル用: 前へボタンのクリックハンドラ(指定するとナビ矢印を表示) */
17
+ onPrev?: () => void;
18
+ /** カルーセル用: 次へボタンのクリックハンドラ */
19
+ onNext?: () => void;
20
+ /** カルーセル用: 前へボタン無効化 */
21
+ prevDisabled?: boolean;
22
+ /** カルーセル用: 次へボタン無効化 */
23
+ nextDisabled?: boolean;
24
+ /** タイトルのサイズ(Figma 準拠: 3xl=28px / 2xl=24px / xl=21px / lg=18px / md=16px / sm=14px) */
25
+ size?: SectionHeaderSize;
26
+ /** 見出しのHTML要素を上書き(デフォルトは size に応じて h1〜h6 を自動選択) */
27
+ as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
28
+ }
29
+ /**
30
+ * セクションヘッダーコンポーネント
31
+ *
32
+ * トップページや一覧ページでセクション区切りに使用するヘッダー。
33
+ * タイトル + 「もっと見る」リンクのパターンが基本。
34
+ *
35
+ * Figma準拠:
36
+ * - 6段階のサイズ(3xl〜sm)で見出し階層を表現
37
+ * - タイトル行: タイトル(左)+ もっと見る(右)を items-baseline で配置
38
+ * - もっと見る: Bold 14px、オレンジ(accent-primary)
39
+ * - キャプション: 3xl〜lg は 16px / md〜sm は 14px
40
+ *
41
+ * ### AI 向け使用ルール
42
+ *
43
+ * - ページの主タイトル: `size="3xl"` or `size="2xl"`
44
+ * - セクション見出し(ランキング等): `size="xl"` or `size="lg"`(デフォルト)
45
+ * - 小見出し・グループラベル: `size="md"` or `size="sm"`
46
+ * - `as` で見出しレベルを上書き可能(同一ページに h1 が複数必要な場合など)
47
+ * - `moreHref` 指定時はタイトル+サブタイトル全体がリンクになる(クリック領域拡大)
48
+ * - `action` に任意の ReactNode(Button 等)を渡して右側にアクションを配置可能
49
+ */
50
+ declare function SectionHeader({ className, title, subtitle, moreHref, moreLabel, onMoreClick, action, onPrev, onNext, prevDisabled, nextDisabled, size, as, ...props }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
51
+ export { SectionHeader };
@@ -0,0 +1,23 @@
1
+ import * as React from "react";
2
+ export interface ShareButtonsProps extends React.HTMLAttributes<HTMLDivElement> {
3
+ /** シェアURL */
4
+ url?: string;
5
+ /** シェアテキスト */
6
+ text?: string;
7
+ /** コピーボタンのラベル */
8
+ copyLabel?: string;
9
+ }
10
+ /**
11
+ * シェアボタンコンポーネント
12
+ *
13
+ * 商品をSNSやURLでシェアするためのボタン群。
14
+ * LINE、X(Twitter)、URLコピーに対応。
15
+ *
16
+ * ### AI 向け使用ルール
17
+ *
18
+ * - 商品詳細ページの共有セクションに使用
19
+ * - `url` と `text` でシェア内容を指定
20
+ * - ボタンは横並び、等幅表示
21
+ */
22
+ declare function ShareButtons({ className, url, text, copyLabel, ...props }: ShareButtonsProps): import("react/jsx-runtime").JSX.Element;
23
+ export { ShareButtons };
@@ -0,0 +1,62 @@
1
+ import * as React from "react";
2
+ export interface SideNavItem {
3
+ /** Lucide / iconsax アイコン等の ReactNode */
4
+ icon: React.ReactNode;
5
+ /** メニューラベル */
6
+ label: string;
7
+ /** リンク先 URL */
8
+ href: string;
9
+ /** アクティブ判定用キー */
10
+ key: string;
11
+ /** Storybook iframe 内で別ストーリーに遷移するための story ID */
12
+ storyId?: string;
13
+ }
14
+ export interface SideNavGroup {
15
+ /** グループラベル(省略時はラベルなし) */
16
+ groupLabel?: string;
17
+ /** グループ内のメニュー項目 */
18
+ items: SideNavItem[];
19
+ }
20
+ export interface SideNavProps extends React.HTMLAttributes<HTMLElement> {
21
+ /** 現在アクティブなメニューの key */
22
+ activeMenu?: string;
23
+ /** メニューグループ(必須) */
24
+ groups: SideNavGroup[];
25
+ /** aria-label */
26
+ ariaLabel?: string;
27
+ }
28
+ /**
29
+ * サイドナビゲーション
30
+ *
31
+ * 縦型メニューをグループ化して表示する汎用コンポーネント。
32
+ * マイページ・管理画面・ダッシュボードなど、サイドバーナビゲーション全般で利用可能。
33
+ *
34
+ * ### インポート
35
+ * ```tsx
36
+ * import { SideNav } from '../../components/primitives/side-nav'
37
+ * ```
38
+ *
39
+ * ### 使い方
40
+ * ```tsx
41
+ * <SideNav
42
+ * groups={[
43
+ * {
44
+ * groupLabel: "アカウント",
45
+ * items: [
46
+ * { icon: <User />, label: "プロフィール", href: "/profile", key: "profile" },
47
+ * ],
48
+ * },
49
+ * ]}
50
+ * activeMenu="profile"
51
+ * />
52
+ * ```
53
+ *
54
+ * ### Props
55
+ * | Prop | 型 | デフォルト | 説明 |
56
+ * |------|-----|-----------|------|
57
+ * | groups | SideNavGroup[] | — | メニューグループ(必須) |
58
+ * | activeMenu | string | — | アクティブなメニュー項目の key |
59
+ * | ariaLabel | string | "サイドメニュー" | aria-label |
60
+ */
61
+ declare function SideNav({ activeMenu, groups, ariaLabel, className, ...props }: SideNavProps): import("react/jsx-runtime").JSX.Element;
62
+ export { SideNav };
@@ -0,0 +1,24 @@
1
+ import * as React from "react";
2
+ export type SocialProvider = "line" | "amazon" | "google" | "apple";
3
+ export interface SocialLoginButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4
+ /** ソーシャルプロバイダー */
5
+ provider: SocialProvider;
6
+ /** ボタンサイズ */
7
+ size?: "default" | "icon";
8
+ /** ラベルの上書き */
9
+ label?: string;
10
+ }
11
+ /**
12
+ * ソーシャルログインボタン
13
+ *
14
+ * LINE, Amazon, Google, Apple のログインボタン。
15
+ * Figma: ログインボタン
16
+ *
17
+ * ### AI 向け使用ルール
18
+ *
19
+ * - フルサイズ: `<SocialLoginButton provider="line" />`
20
+ * - アイコンのみ: `<SocialLoginButton provider="google" size="icon" />`
21
+ * - LINE は緑背景、他は白背景、Apple は黒背景
22
+ */
23
+ declare function SocialLoginButton({ provider, size, label, className, ...props }: SocialLoginButtonProps): import("react/jsx-runtime").JSX.Element;
24
+ export { SocialLoginButton };
@@ -0,0 +1,14 @@
1
+ export interface StatusCountTabsProps {
2
+ /** タブアイテム */
3
+ items: {
4
+ label: string;
5
+ count: number;
6
+ }[];
7
+ /** アクティブなタブインデックス */
8
+ activeIndex?: number;
9
+ /** タブ選択時 */
10
+ onSelect?: (index: number) => void;
11
+ /** 追加クラス */
12
+ className?: string;
13
+ }
14
+ export declare function StatusCountTabs({ items, activeIndex, onSelect, className, }: StatusCountTabsProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ interface StickyActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
3
+ /** Whether to show a top border */
4
+ bordered?: boolean;
5
+ }
6
+ declare function StickyActionBar({ className, bordered, children, ...props }: StickyActionBarProps): import("react/jsx-runtime").JSX.Element;
7
+ export { StickyActionBar };
@@ -0,0 +1,34 @@
1
+ import * as React from "react";
2
+ export interface SubNavItem {
3
+ /** 表示ラベル */
4
+ label: string;
5
+ /** リンク先 */
6
+ href?: string;
7
+ /** クリックハンドラ(href未指定時に使用) */
8
+ onClick?: (e: React.MouseEvent) => void;
9
+ /** アクティブ状態 */
10
+ isActive?: boolean;
11
+ }
12
+ export interface SubNavProps extends React.HTMLAttributes<HTMLDivElement> {
13
+ /** ナビゲーション項目 */
14
+ items: SubNavItem[];
15
+ /** スタイルバリアント */
16
+ variant?: "text" | "chip";
17
+ }
18
+ /**
19
+ * ナビゲーションリボンコンポーネント
20
+ *
21
+ * ページ上部の横スクロール可能なナビゲーションリンク。
22
+ * Cake.jp のカテゴリタブやクイックフィルターを再現。
23
+ *
24
+ * ### AI 向け使用ルール
25
+ *
26
+ * - ヘッダー直下に配置する横スクロールナビゲーション
27
+ * - `variant="text"` はシンプルなテキストリンク(本番準拠)
28
+ * - `variant="chip"` はチップ型(Badge風)
29
+ * - アクティブ項目は `isActive: true` で下線を強調
30
+ * - テキスト色: アクティブ = 黒(High-Emphasis)、非アクティブ = グレー(Medium-Emphasis)
31
+ * - 必ず `overflow-x-auto` + `scrollbar-hide` で横スクロール対応
32
+ */
33
+ declare function SubNav({ className, items, variant, ...props }: SubNavProps): import("react/jsx-runtime").JSX.Element;
34
+ export { SubNav };
@@ -0,0 +1,19 @@
1
+ import * as React from "react";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ declare const tagVariants: (props?: {
4
+ variant?: "default" | "success" | "info" | "warning" | "accent" | "caution" | "sale" | "info-fill" | "timesale" | "berry" | "coupon";
5
+ size?: "sm" | "md";
6
+ } & import("class-variance-authority/types").ClassProp) => string;
7
+ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tagVariants> {
8
+ /** アイコン(左側に配置) */
9
+ icon?: React.ReactNode;
10
+ }
11
+ /**
12
+ * タグコンポーネント
13
+ *
14
+ * 商品の属性やステータスを視覚的にラベル表示。
15
+ * 配送方法(冷凍/冷蔵/常温)、キャンペーン、セール、新発売など
16
+ * バリエーション豊富なカラーバリアントを提供します。
17
+ */
18
+ declare function Tag({ className, variant, size, icon, children, ...props }: TagProps): import("react/jsx-runtime").JSX.Element;
19
+ export { Tag, tagVariants };
@@ -0,0 +1,109 @@
1
+ import "./index.css";
2
+ export { cn } from "./lib/utils";
3
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/foundations/accordion";
4
+ export { Alert, AlertDescription, AlertTitle } from "./components/foundations/alert";
5
+ export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./components/foundations/alert-dialog";
6
+ export { AspectRatio } from "./components/foundations/aspect-ratio";
7
+ export { Avatar, AvatarFallback, AvatarImage } from "./components/foundations/avatar";
8
+ export { Badge, badgeVariants } from "./components/foundations/badge";
9
+ export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/foundations/breadcrumb";
10
+ export { Button, buttonVariants } from "./components/foundations/button";
11
+ export { Calendar } from "./components/foundations/calendar";
12
+ export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/foundations/card";
13
+ export { Checkbox } from "./components/foundations/checkbox";
14
+ export { CheckboxCardGroup, CheckboxCardItem } from "./components/foundations/checkbox-card";
15
+ export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/foundations/collapsible";
16
+ export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/foundations/command";
17
+ export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/foundations/context-menu";
18
+ export { DataTable } from "./components/foundations/data-table";
19
+ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/foundations/dialog";
20
+ export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./components/foundations/drawer";
21
+ export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/foundations/dropdown-menu";
22
+ export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./components/foundations/form";
23
+ export { HoverCard, HoverCardContent, HoverCardTrigger } from "./components/foundations/hover-card";
24
+ export { Input } from "./components/foundations/input";
25
+ export { Label } from "./components/foundations/label";
26
+ export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./components/foundations/menubar";
27
+ export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./components/foundations/navigation-menu";
28
+ export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./components/foundations/pagination";
29
+ export { Popover, PopoverContent, PopoverTrigger } from "./components/foundations/popover";
30
+ export { Progress } from "./components/foundations/progress";
31
+ export { RadioGroup, RadioGroupItem } from "./components/foundations/radio-group";
32
+ export { ScrollArea, ScrollBar } from "./components/foundations/scroll-area";
33
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/foundations/select";
34
+ export { Separator } from "./components/foundations/separator";
35
+ export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/foundations/sheet";
36
+ export { Skeleton } from "./components/foundations/skeleton";
37
+ export { Slider } from "./components/foundations/slider";
38
+ export { Spinner } from "./components/foundations/spinner";
39
+ export { Switch } from "./components/foundations/switch";
40
+ export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/foundations/table";
41
+ export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/foundations/tabs";
42
+ export { Textarea } from "./components/foundations/textarea";
43
+ export { Toaster } from "./components/foundations/sonner";
44
+ export { Toggle, toggleVariants } from "./components/foundations/toggle";
45
+ export { ToggleGroup, ToggleGroupItem } from "./components/foundations/toggle-group";
46
+ export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/foundations/tooltip";
47
+ export { CoachMark } from "./components/primitives/coach-mark";
48
+ export { BannerCarousel } from "./components/primitives/banner-carousel";
49
+ export { StickyActionBar } from "./components/primitives/sticky-action-bar";
50
+ export { BottomTabBar } from "./components/primitives/bottom-tab-bar";
51
+ export { BulkActionBar } from "./components/primitives/bulk-action-bar";
52
+ export { CategoryShortcuts } from "./components/primitives/category-shortcuts";
53
+ export type { CategoryShortcutsProps, CategoryShortcutsItem } from "./components/primitives/category-shortcuts";
54
+ export { CategoryScroll } from "./components/primitives/category-scroll";
55
+ export type { CategoryScrollProps, CategoryItem } from "./components/primitives/category-scroll";
56
+ export { Chip, chipVariants } from "./components/primitives/chip";
57
+ export type { ChipProps } from "./components/primitives/chip";
58
+ export { EmptyState } from "./components/primitives/empty-state";
59
+ export { ErrorState } from "./components/primitives/error-state";
60
+ export { FilterBar } from "./components/primitives/filter-bar";
61
+ export { Footer } from "./components/primitives/footer";
62
+ export { FormField as CakeFormField } from "./components/primitives/form-field";
63
+ export { ImageCarousel } from "./components/primitives/image-carousel";
64
+ export { ImageGallery } from "./components/primitives/image-gallery";
65
+ export { ImageUploader } from "./components/primitives/image-uploader";
66
+ export { KebabMenu } from "./components/primitives/kebab-menu";
67
+ export { ListItem } from "./components/primitives/list-item";
68
+ export { MenuDrawer } from "./components/primitives/menu-drawer";
69
+ export { SubNav } from "./components/primitives/sub-nav";
70
+ export { NotificationBadge, notificationBadgeVariants } from "./components/primitives/notification-badge";
71
+ export { NotificationList } from "./components/primitives/notification-list";
72
+ export { PriceDisplay, priceDisplayVariants } from "./components/primitives/price-display";
73
+ export { ProgressSteps } from "./components/primitives/progress-steps";
74
+ export { QuantitySelector } from "./components/primitives/quantity-selector";
75
+ export { SearchBar } from "./components/primitives/search-bar";
76
+ export { SearchPanel } from "./components/primitives/search-panel";
77
+ export { SectionHeader } from "./components/primitives/section-header";
78
+ export { ShareButtons } from "./components/primitives/share-buttons";
79
+ export { SideNav } from "./components/primitives/side-nav";
80
+ export type { SideNavProps, SideNavGroup, SideNavItem } from "./components/primitives/side-nav";
81
+ export { SocialLoginButton } from "./components/primitives/social-login-button";
82
+ export { StatusCountTabs } from "./components/primitives/status-count-tabs";
83
+ export { Tag, tagVariants } from "./components/primitives/tag";
84
+ export { AdminLayout, MissingComponent } from "./components/ec/admin-layout";
85
+ export { AnniversaryCard } from "./components/ec/anniversary-card";
86
+ export { CakeLogo } from "./components/ec/cake-logo";
87
+ export { CountdownTimer } from "./components/ec/countdown-timer";
88
+ export { CouponCard } from "./components/ec/coupon-card";
89
+ export { DeliveryCalendar } from "./components/ec/delivery-calendar";
90
+ export { mypageMenuGroups } from "./components/ec/_mypage-menu-data";
91
+ export { OrderSection } from "./components/ec/order-section";
92
+ export { OrderSummary } from "./components/ec/order-summary";
93
+ export { PaymentMethodDisplay, CreditCardIcon } from "./components/ec/payment-method";
94
+ export { ProductCard } from "./components/ec/product-card";
95
+ export { ProductCarousel } from "./components/ec/product-carousel";
96
+ export { ProductCTA } from "./components/ec/product-cta";
97
+ export { ProductDetailBar } from "./components/ec/product-detail-bar";
98
+ export { ProductDetailSidebar } from "./components/ec/product-detail-sidebar";
99
+ export { ProductListItem } from "./components/ec/product-list-item";
100
+ export { ProductOption, OptionQuantity, OptionSelect, OptionText, OptionImageUpload } from "./components/ec/product-option";
101
+ export { RatingStars, SparkleIcon } from "./components/ec/rating-stars";
102
+ export { ReviewCard } from "./components/ec/review-card";
103
+ export { ReviewForm } from "./components/ec/review-form";
104
+ export { ReviewSummary, ReviewItem } from "./components/ec/review-summary";
105
+ export { ShopCard } from "./components/ec/shop-card";
106
+ export { StatCard } from "./components/ec/stat-card";
107
+ export { Header } from "./components/primitives/header";
108
+ export { MypageShell } from "./components/pages/cake/_mypage-shell";
109
+ export type { MypageShellProps, MypageShellBreadcrumb } from "./components/pages/cake/_mypage-shell";
@@ -0,0 +1,2 @@
1
+ import { type ClassValue } from "clsx";
2
+ export declare function cn(...inputs: ClassValue[]): string;