@cakejp/design-system 0.20.1 → 0.21.1

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 (161) hide show
  1. package/CHANGELOG.md +181 -0
  2. package/CLAUDE.md +5 -3
  3. package/MIGRATION.md +3 -3
  4. package/README.md +31 -11
  5. package/contracts/components.json +420 -63
  6. package/contracts/composition.json +38 -4
  7. package/contracts/rules.json +27 -5
  8. package/contracts/screen-patterns.json +6 -4
  9. package/dist/components/ec/admin-shell.js +62 -60
  10. package/dist/components/ec/anniversary-card.js +13 -12
  11. package/dist/components/ec/coupon-card.js +11 -11
  12. package/dist/components/ec/delivery-calendar.js +51 -45
  13. package/dist/components/ec/mypage-shell.js +80 -69
  14. package/dist/components/ec/product-card.js +93 -76
  15. package/dist/components/ec/product-carousel.js +65 -60
  16. package/dist/components/ec/product-detail-bar.js +13 -11
  17. package/dist/components/ec/product-detail-sidebar.js +60 -58
  18. package/dist/components/ec/product-list-item.js +64 -63
  19. package/dist/components/ec/product-option.js +30 -26
  20. package/dist/components/ec/rating-stars.js +27 -27
  21. package/dist/components/ec/review-card.js +32 -32
  22. package/dist/components/ec/review-form.js +37 -37
  23. package/dist/components/ec/shop-card.js +21 -19
  24. package/dist/components/foundations/accordion.js +33 -31
  25. package/dist/components/foundations/alert-dialog.js +4 -5
  26. package/dist/components/foundations/badge.js +5 -5
  27. package/dist/components/foundations/breadcrumb.js +27 -26
  28. package/dist/components/foundations/button.js +144 -25
  29. package/dist/components/foundations/calendar.js +28 -26
  30. package/dist/components/foundations/checkbox-card.js +71 -47
  31. package/dist/components/foundations/checkbox-group.js +30 -27
  32. package/dist/components/foundations/checkbox.js +69 -52
  33. package/dist/components/foundations/chip-variants.js +13 -0
  34. package/dist/components/foundations/command.js +81 -79
  35. package/dist/components/foundations/confirm-dialog.js +136 -0
  36. package/dist/components/foundations/context-menu.js +43 -38
  37. package/dist/components/foundations/data-table.js +87 -84
  38. package/dist/components/foundations/dialog.js +45 -36
  39. package/dist/components/foundations/dropdown-menu.js +47 -42
  40. package/dist/components/foundations/file-input.js +97 -67
  41. package/dist/components/foundations/hover-card.js +21 -21
  42. package/dist/components/foundations/menubar.js +75 -69
  43. package/dist/components/foundations/navigation-menu.js +31 -26
  44. package/dist/components/foundations/pagination.js +54 -50
  45. package/dist/components/foundations/popover.js +7 -7
  46. package/dist/components/foundations/progress.js +10 -6
  47. package/dist/components/foundations/radio-group.js +6 -3
  48. package/dist/components/foundations/responsive-dialog.js +73 -55
  49. package/dist/components/foundations/scroll-area.js +18 -14
  50. package/dist/components/foundations/select.js +44 -39
  51. package/dist/components/foundations/sheet.js +45 -37
  52. package/dist/components/foundations/skeleton.js +6 -6
  53. package/dist/components/foundations/skip-link.js +10 -8
  54. package/dist/components/foundations/slider.js +73 -48
  55. package/dist/components/foundations/sonner.js +5 -4
  56. package/dist/components/foundations/spinner.js +7 -5
  57. package/dist/components/foundations/switch.js +11 -10
  58. package/dist/components/foundations/tabs.js +54 -39
  59. package/dist/components/foundations/toggle-group.js +29 -21
  60. package/dist/components/foundations/toggle.js +20 -16
  61. package/dist/components/primitives/admin-side-nav.js +65 -62
  62. package/dist/components/primitives/banner-carousel.js +32 -29
  63. package/dist/components/primitives/bottom-tab-bar.js +16 -15
  64. package/dist/components/primitives/category-scroll.js +39 -29
  65. package/dist/components/primitives/category-shortcuts.js +9 -9
  66. package/dist/components/primitives/chat-composer.js +77 -74
  67. package/dist/components/primitives/chip.js +84 -61
  68. package/dist/components/primitives/combobox.js +63 -47
  69. package/dist/components/primitives/container.js +9 -9
  70. package/dist/components/primitives/content-card.js +15 -17
  71. package/dist/components/primitives/content-carousel.js +103 -83
  72. package/dist/components/primitives/date-picker.js +137 -99
  73. package/dist/components/primitives/footer.js +36 -37
  74. package/dist/components/primitives/header.js +175 -168
  75. package/dist/components/primitives/image-carousel.js +107 -87
  76. package/dist/components/primitives/image-gallery.js +32 -27
  77. package/dist/components/primitives/image-uploader.js +6 -6
  78. package/dist/components/primitives/list-item.js +59 -51
  79. package/dist/components/primitives/menu-drawer.js +36 -38
  80. package/dist/components/primitives/multi-select.js +89 -58
  81. package/dist/components/primitives/notification-list.js +10 -9
  82. package/dist/components/primitives/number-input.js +116 -105
  83. package/dist/components/primitives/scroll-row.js +21 -0
  84. package/dist/components/primitives/search-bar.js +31 -28
  85. package/dist/components/primitives/section-header.js +54 -53
  86. package/dist/components/primitives/side-nav.js +57 -56
  87. package/dist/components/primitives/sub-nav.js +13 -14
  88. package/dist/components/primitives/tag.js +4 -2
  89. package/dist/index.css +1 -1
  90. package/dist/index.js +3070 -925
  91. package/dist/lib/field-labelling.js +31 -21
  92. package/dist/lib/focus-ring.js +22 -4
  93. package/dist/lib/high-contrast.js +4 -0
  94. package/dist/lib/image-index.js +8 -0
  95. package/dist/lib/use-prefers-reduced-motion.js +21 -0
  96. package/dist/types/components/ec/admin-shell.d.ts +11 -1
  97. package/dist/types/components/ec/anniversary-card.d.ts +9 -1
  98. package/dist/types/components/ec/mypage-shell.d.ts +12 -1
  99. package/dist/types/components/ec/product-card.d.ts +13 -1
  100. package/dist/types/components/ec/product-carousel.d.ts +13 -1
  101. package/dist/types/components/ec/product-detail-bar.d.ts +12 -1
  102. package/dist/types/components/ec/product-detail-sidebar.d.ts +11 -1
  103. package/dist/types/components/ec/product-list-item.d.ts +9 -1
  104. package/dist/types/components/ec/rating-stars.d.ts +2 -0
  105. package/dist/types/components/ec/review-card.d.ts +1 -1
  106. package/dist/types/components/ec/shop-card.d.ts +8 -1
  107. package/dist/types/components/foundations/badge.d.ts +1 -1
  108. package/dist/types/components/foundations/breadcrumb.d.ts +8 -1
  109. package/dist/types/components/foundations/button.d.ts +38 -3
  110. package/dist/types/components/foundations/checkbox-card.d.ts +7 -1
  111. package/dist/types/components/foundations/checkbox.d.ts +1 -1
  112. package/dist/types/components/foundations/chip-variants.d.ts +2 -2
  113. package/dist/types/components/foundations/confirm-dialog.d.ts +61 -0
  114. package/dist/types/components/foundations/data-table.d.ts +9 -2
  115. package/dist/types/components/foundations/dialog.d.ts +16 -1
  116. package/dist/types/components/foundations/pagination.d.ts +1 -1
  117. package/dist/types/components/foundations/responsive-dialog.d.ts +2 -1
  118. package/dist/types/components/foundations/sheet.d.ts +12 -1
  119. package/dist/types/components/foundations/skeleton.d.ts +6 -0
  120. package/dist/types/components/foundations/slider.d.ts +15 -1
  121. package/dist/types/components/foundations/tabs.d.ts +7 -0
  122. package/dist/types/components/primitives/admin-side-nav.d.ts +22 -2
  123. package/dist/types/components/primitives/banner-carousel.d.ts +9 -1
  124. package/dist/types/components/primitives/bottom-tab-bar.d.ts +13 -2
  125. package/dist/types/components/primitives/category-scroll.d.ts +10 -1
  126. package/dist/types/components/primitives/category-shortcuts.d.ts +11 -2
  127. package/dist/types/components/primitives/chip.d.ts +22 -3
  128. package/dist/types/components/primitives/combobox.d.ts +7 -2
  129. package/dist/types/components/primitives/container.d.ts +3 -0
  130. package/dist/types/components/primitives/content-card.d.ts +1 -1
  131. package/dist/types/components/primitives/content-carousel.d.ts +13 -4
  132. package/dist/types/components/primitives/date-picker.d.ts +10 -3
  133. package/dist/types/components/primitives/footer.d.ts +1 -1
  134. package/dist/types/components/primitives/header.d.ts +14 -2
  135. package/dist/types/components/primitives/image-carousel.d.ts +23 -5
  136. package/dist/types/components/primitives/list-item.d.ts +10 -1
  137. package/dist/types/components/primitives/menu-drawer.d.ts +1 -1
  138. package/dist/types/components/primitives/multi-select.d.ts +7 -2
  139. package/dist/types/components/primitives/notification-list.d.ts +10 -1
  140. package/dist/types/components/primitives/number-input.d.ts +18 -5
  141. package/dist/types/components/primitives/scroll-row.d.ts +43 -0
  142. package/dist/types/components/primitives/section-header.d.ts +9 -2
  143. package/dist/types/components/primitives/side-nav.d.ts +13 -1
  144. package/dist/types/components/primitives/sub-nav.d.ts +1 -1
  145. package/dist/types/components/primitives/tag.d.ts +1 -1
  146. package/dist/types/index.d.ts +7 -1
  147. package/dist/types/lib/field-labelling.d.ts +23 -8
  148. package/dist/types/lib/focus-ring.d.ts +70 -3
  149. package/dist/types/lib/high-contrast.d.ts +25 -0
  150. package/dist/types/lib/image-index.d.ts +2 -0
  151. package/dist/types/lib/link-component.d.ts +26 -21
  152. package/dist/types/lib/use-prefers-reduced-motion.d.ts +9 -0
  153. package/package.json +11 -3
  154. package/src/components/COMPONENT_LOOKUP.md +18 -16
  155. package/src/preset-standalone.css +42 -0
  156. package/src/preset.css +20 -1
  157. package/src/styles/semantic.css +57 -0
  158. package/templates/AGENTS.md +5 -1
  159. package/templates/CLAUDE.md +3 -1
  160. package/tokens.json +49 -0
  161. package/dist/lib/link-component.js +0 -6
@@ -1,35 +1,36 @@
1
1
  "use client";
2
2
  import { jsx as e, jsxs as d } from "react/jsx-runtime";
3
3
  import "react";
4
- import { CheckIcon as i, CircleIcon as u, ChevronRightIcon as c } from "lucide-react";
4
+ import { CheckIcon as u, CircleIcon as c, ChevronRightIcon as l } from "lucide-react";
5
5
  import { ContextMenu as o } from "radix-ui";
6
6
  import { cn as r } from "../../lib/utils.js";
7
- function g({
7
+ import { FORCED_COLORS_MENU_ITEM as i } from "../../lib/focus-ring.js";
8
+ function b({
8
9
  ...t
9
10
  }) {
10
11
  return /* @__PURE__ */ e(o.Root, { "data-slot": "context-menu", ...t });
11
12
  }
12
- function v({
13
+ function h({
13
14
  ...t
14
15
  }) {
15
16
  return /* @__PURE__ */ e(o.Trigger, { "data-slot": "context-menu-trigger", ...t });
16
17
  }
17
- function b({
18
+ function C({
18
19
  ...t
19
20
  }) {
20
21
  return /* @__PURE__ */ e(o.Group, { "data-slot": "context-menu-group", ...t });
21
22
  }
22
- function h({
23
+ function y({
23
24
  ...t
24
25
  }) {
25
26
  return /* @__PURE__ */ e(o.Portal, { "data-slot": "context-menu-portal", ...t });
26
27
  }
27
- function C({
28
+ function M({
28
29
  ...t
29
30
  }) {
30
31
  return /* @__PURE__ */ e(o.Sub, { "data-slot": "context-menu-sub", ...t });
31
32
  }
32
- function y({
33
+ function z({
33
34
  ...t
34
35
  }) {
35
36
  return /* @__PURE__ */ e(
@@ -40,7 +41,7 @@ function y({
40
41
  }
41
42
  );
42
43
  }
43
- function M({
44
+ function _({
44
45
  className: t,
45
46
  inset: n,
46
47
  children: a,
@@ -52,18 +53,19 @@ function M({
52
53
  "data-slot": "context-menu-sub-trigger",
53
54
  "data-inset": n,
54
55
  className: r(
55
- "flex cursor-default items-center rounded-sm px-2 py-1.5 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
56
+ "flex cursor-default items-center rounded-sm px-2 py-1.5 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
57
+ i,
56
58
  t
57
59
  ),
58
60
  ...s,
59
61
  children: [
60
62
  a,
61
- /* @__PURE__ */ e(c, { className: "ml-auto" })
63
+ /* @__PURE__ */ e(l, { className: "ml-auto" })
62
64
  ]
63
65
  }
64
66
  );
65
67
  }
66
- function z({
68
+ function N({
67
69
  className: t,
68
70
  ...n
69
71
  }) {
@@ -72,14 +74,14 @@ function z({
72
74
  {
73
75
  "data-slot": "context-menu-sub-content",
74
76
  className: r(
75
- "z-[var(--Z-Popover)] min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
77
+ "z-[var(--Z-Popover)] min-w-[8rem] max-w-(--radix-context-menu-content-available-width) origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
76
78
  t
77
79
  ),
78
80
  ...n
79
81
  }
80
82
  );
81
83
  }
82
- function N({
84
+ function I({
83
85
  className: t,
84
86
  ...n
85
87
  }) {
@@ -89,14 +91,14 @@ function N({
89
91
  "data-slot": "context-menu-content",
90
92
  collisionPadding: 8,
91
93
  className: r(
92
- "fixed z-[var(--Z-Popover)] max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
94
+ "z-[var(--Z-Popover)] max-h-(--radix-context-menu-content-available-height) min-w-[8rem] max-w-(--radix-context-menu-content-available-width) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
93
95
  t
94
96
  ),
95
97
  ...n
96
98
  }
97
99
  ) });
98
100
  }
99
- function _({
101
+ function w({
100
102
  className: t,
101
103
  inset: n,
102
104
  variant: a = "default",
@@ -109,14 +111,15 @@ function _({
109
111
  "data-inset": n,
110
112
  "data-variant": a,
111
113
  className: r(
112
- "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
114
+ "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
115
+ i,
113
116
  t
114
117
  ),
115
118
  ...s
116
119
  }
117
120
  );
118
121
  }
119
- function I({
122
+ function S({
120
123
  className: t,
121
124
  children: n,
122
125
  checked: a,
@@ -127,13 +130,14 @@ function I({
127
130
  {
128
131
  "data-slot": "context-menu-checkbox-item",
129
132
  className: r(
130
- "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
133
+ "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
134
+ i,
131
135
  t
132
136
  ),
133
137
  checked: a,
134
138
  ...s,
135
139
  children: [
136
- /* @__PURE__ */ e("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e(o.ItemIndicator, { children: /* @__PURE__ */ e(i, { className: "size-4" }) }) }),
140
+ /* @__PURE__ */ e("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e(o.ItemIndicator, { children: /* @__PURE__ */ e(u, { className: "size-4" }) }) }),
137
141
  n
138
142
  ]
139
143
  }
@@ -149,18 +153,19 @@ function k({
149
153
  {
150
154
  "data-slot": "context-menu-radio-item",
151
155
  className: r(
152
- "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
156
+ "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
157
+ i,
153
158
  t
154
159
  ),
155
160
  ...a,
156
161
  children: [
157
- /* @__PURE__ */ e("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e(o.ItemIndicator, { children: /* @__PURE__ */ e(u, { className: "size-2 fill-current" }) }) }),
162
+ /* @__PURE__ */ e("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e(o.ItemIndicator, { children: /* @__PURE__ */ e(c, { className: "size-2 fill-current" }) }) }),
158
163
  n
159
164
  ]
160
165
  }
161
166
  );
162
167
  }
163
- function S({
168
+ function R({
164
169
  className: t,
165
170
  inset: n,
166
171
  ...a
@@ -178,7 +183,7 @@ function S({
178
183
  }
179
184
  );
180
185
  }
181
- function w({
186
+ function P({
182
187
  className: t,
183
188
  ...n
184
189
  }) {
@@ -191,7 +196,7 @@ function w({
191
196
  }
192
197
  );
193
198
  }
194
- function P({
199
+ function E({
195
200
  className: t,
196
201
  ...n
197
202
  }) {
@@ -208,19 +213,19 @@ function P({
208
213
  );
209
214
  }
210
215
  export {
211
- g as ContextMenu,
212
- I as ContextMenuCheckboxItem,
213
- N as ContextMenuContent,
214
- b as ContextMenuGroup,
215
- _ as ContextMenuItem,
216
- S as ContextMenuLabel,
217
- h as ContextMenuPortal,
218
- y as ContextMenuRadioGroup,
216
+ b as ContextMenu,
217
+ S as ContextMenuCheckboxItem,
218
+ I as ContextMenuContent,
219
+ C as ContextMenuGroup,
220
+ w as ContextMenuItem,
221
+ R as ContextMenuLabel,
222
+ y as ContextMenuPortal,
223
+ z as ContextMenuRadioGroup,
219
224
  k as ContextMenuRadioItem,
220
- w as ContextMenuSeparator,
221
- P as ContextMenuShortcut,
222
- C as ContextMenuSub,
223
- z as ContextMenuSubContent,
224
- M as ContextMenuSubTrigger,
225
- v as ContextMenuTrigger
225
+ P as ContextMenuSeparator,
226
+ E as ContextMenuShortcut,
227
+ M as ContextMenuSub,
228
+ N as ContextMenuSubContent,
229
+ _ as ContextMenuSubTrigger,
230
+ h as ContextMenuTrigger
226
231
  };