@cakejp/design-system 0.20.1 → 0.21.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 (161) hide show
  1. package/CHANGELOG.md +172 -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 +79 -68
  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 +3051 -924
  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 +12 -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,18 +1,18 @@
1
1
  import { jsx as e, jsxs as s } from "react/jsx-runtime";
2
2
  import * as b from "react";
3
3
  import { cva as p } from "class-variance-authority";
4
- import x from "iconsax-reactjs/dist/esm/ArrowSwapVertical.js";
5
- import f from "iconsax-reactjs/dist/esm/ArrowUp.js";
4
+ import f from "iconsax-reactjs/dist/esm/ArrowSwapVertical.js";
5
+ import x from "iconsax-reactjs/dist/esm/ArrowUp.js";
6
6
  import v from "iconsax-reactjs/dist/esm/ArrowDown.js";
7
7
  import g from "iconsax-reactjs/dist/esm/ArrowDown2.js";
8
8
  import w from "iconsax-reactjs/dist/esm/More.js";
9
9
  import y from "iconsax-reactjs/dist/esm/Add.js";
10
10
  import N from "iconsax-reactjs/dist/esm/ExportSquare.js";
11
- import { cn as i } from "../../lib/utils.js";
11
+ import { cn as n } from "../../lib/utils.js";
12
12
  import { FOCUS_RING as T } from "../../lib/focus-ring.js";
13
13
  import { Checkbox as C } from "./checkbox.js";
14
14
  import { Button as E } from "./button.js";
15
- import { Avatar as S, AvatarImage as D, AvatarFallback as k } from "./avatar.js";
15
+ import { Avatar as S, AvatarImage as k, AvatarFallback as D } from "./avatar.js";
16
16
  import { Select as A, SelectTrigger as L, SelectValue as _, SelectContent as B, SelectItem as H } from "./select.js";
17
17
  import { DropdownMenu as z, DropdownMenuTrigger as M, DropdownMenuContent as P, DropdownMenuSeparator as I, DropdownMenuItem as R } from "./dropdown-menu.js";
18
18
  function te({ className: r, ...a }) {
@@ -20,7 +20,7 @@ function te({ className: r, ...a }) {
20
20
  "div",
21
21
  {
22
22
  "data-slot": "data-table",
23
- className: i("relative w-full overflow-x-auto rounded-lg border border-[var(--Border-Low-Emphasis)]", r),
23
+ className: n("relative w-full overflow-x-auto rounded-lg border border-[var(--Border-Low-Emphasis)]", r),
24
24
  ...a
25
25
  }
26
26
  );
@@ -30,17 +30,17 @@ function le({ className: r, ...a }) {
30
30
  "table",
31
31
  {
32
32
  "data-slot": "data-table-table",
33
- className: i("w-full caption-bottom typo-body-md border-collapse", r),
33
+ className: n("w-full caption-bottom typo-body-md border-collapse", r),
34
34
  ...a
35
35
  }
36
36
  );
37
37
  }
38
- function ne({ className: r, ...a }) {
38
+ function oe({ className: r, ...a }) {
39
39
  return /* @__PURE__ */ e(
40
40
  "thead",
41
41
  {
42
42
  "data-slot": "data-table-header",
43
- className: i("bg-[var(--Surface-Secondary)] [&_tr]:border-b [&_tr]:border-[var(--Border-Low-Emphasis)]", r),
43
+ className: n("bg-[var(--Surface-Secondary)] [&_tr]:border-b [&_tr]:border-[var(--Border-Low-Emphasis)]", r),
44
44
  ...a
45
45
  }
46
46
  );
@@ -50,7 +50,7 @@ function ie({ className: r, ...a }) {
50
50
  "tbody",
51
51
  {
52
52
  "data-slot": "data-table-body",
53
- className: i("[&_tr:last-child]:border-b-0", r),
53
+ className: n("[&_tr:last-child]:border-b-0", r),
54
54
  ...a
55
55
  }
56
56
  );
@@ -69,7 +69,7 @@ const V = p(
69
69
  }
70
70
  }
71
71
  );
72
- function oe({
72
+ function ne({
73
73
  className: r,
74
74
  state: a,
75
75
  ...t
@@ -78,7 +78,7 @@ function oe({
78
78
  "tr",
79
79
  {
80
80
  "data-slot": "data-table-row",
81
- className: i(V({ state: a }), r),
81
+ className: n(V({ state: a }), r),
82
82
  ...t
83
83
  }
84
84
  );
@@ -87,18 +87,18 @@ function se({
87
87
  className: r,
88
88
  sortable: a,
89
89
  sortDirection: t,
90
- onSort: n,
90
+ onSort: o,
91
91
  width: l,
92
- srLabel: o,
92
+ srLabel: i,
93
93
  children: c,
94
94
  ...d
95
95
  }) {
96
- const h = t === "asc" ? f : t === "desc" ? v : x, u = t === "asc" ? "ascending" : t === "desc" ? "descending" : "none";
96
+ const h = t === "asc" ? x : t === "desc" ? v : f, u = t === "asc" ? "ascending" : t === "desc" ? "descending" : "none";
97
97
  return /* @__PURE__ */ s(
98
98
  "th",
99
99
  {
100
100
  "data-slot": "data-table-head",
101
- className: i(
101
+ className: n(
102
102
  "h-16 px-4 text-left align-middle typo-label-sm whitespace-nowrap text-[var(--Text-Medium-Emphasis)]",
103
103
  "[&:has([role=checkbox])]:w-12 [&:has([role=checkbox])]:pr-0",
104
104
  a && "hover:bg-[var(--Surface-Tertiary)]",
@@ -116,8 +116,8 @@ function se({
116
116
  "button",
117
117
  {
118
118
  type: "button",
119
- onClick: n,
120
- className: i(
119
+ onClick: o,
120
+ className: n(
121
121
  "inline-flex items-center gap-1 rounded-sm outline-none",
122
122
  "cursor-pointer select-none",
123
123
  T,
@@ -130,14 +130,14 @@ function se({
130
130
  {
131
131
  size: 14,
132
132
  "aria-hidden": "true",
133
- className: i(t ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]")
133
+ className: n(t ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]")
134
134
  }
135
135
  )
136
136
  ]
137
137
  }
138
138
  )
139
139
  ) : c,
140
- o && /* @__PURE__ */ e("span", { className: "sr-only", children: o })
140
+ i && /* @__PURE__ */ e("span", { className: "sr-only", children: i })
141
141
  ]
142
142
  }
143
143
  );
@@ -167,14 +167,14 @@ function m({
167
167
  className: r,
168
168
  width: a,
169
169
  align: t,
170
- ...n
170
+ ...o
171
171
  }) {
172
172
  return /* @__PURE__ */ e(
173
173
  "td",
174
174
  {
175
175
  "data-slot": "data-table-cell",
176
- className: i(j({ width: a, align: t }), r),
177
- ...n
176
+ className: n(j({ width: a, align: t }), r),
177
+ ...o
178
178
  }
179
179
  );
180
180
  }
@@ -182,17 +182,17 @@ function ce({
182
182
  className: r,
183
183
  src: a,
184
184
  fallback: t,
185
- title: n,
185
+ title: o,
186
186
  caption: l,
187
- ...o
187
+ ...i
188
188
  }) {
189
- return /* @__PURE__ */ e(m, { className: i("min-w-[200px]", r), ...o, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
189
+ return /* @__PURE__ */ e(m, { className: n("min-w-[200px]", r), ...i, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
190
190
  /* @__PURE__ */ s(S, { children: [
191
- a && /* @__PURE__ */ e(D, { src: a, alt: n }),
192
- /* @__PURE__ */ e(k, { children: t || n.charAt(0) })
191
+ a && /* @__PURE__ */ e(k, { src: a, alt: o }),
192
+ /* @__PURE__ */ e(D, { children: t || o.charAt(0) })
193
193
  ] }),
194
194
  /* @__PURE__ */ s("div", { className: "min-w-0", children: [
195
- /* @__PURE__ */ e("p", { className: "typo-label-sm text-[var(--Text-High-Emphasis)] truncate", children: n }),
195
+ /* @__PURE__ */ e("p", { className: "typo-label-sm text-[var(--Text-High-Emphasis)] truncate", children: o }),
196
196
  l && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)] truncate", children: l })
197
197
  ] })
198
198
  ] }) });
@@ -201,23 +201,23 @@ function de({
201
201
  className: r,
202
202
  checked: a,
203
203
  onCheckedChange: t,
204
- indeterminate: n,
204
+ indeterminate: o,
205
205
  "aria-label": l,
206
- ...o
206
+ ...i
207
207
  }) {
208
208
  return /* @__PURE__ */ e(
209
209
  "td",
210
210
  {
211
211
  "data-slot": "data-table-checkbox-cell",
212
- className: i("w-16 px-4 py-4 align-middle cursor-pointer", r),
212
+ className: n("w-16 px-4 py-4 align-middle cursor-pointer", r),
213
213
  onClick: (c) => {
214
- c.stopPropagation(), t?.(!(!n && a));
214
+ c.stopPropagation(), t?.(!(!o && a));
215
215
  },
216
- ...o,
216
+ ...i,
217
217
  children: /* @__PURE__ */ e(
218
218
  C,
219
219
  {
220
- checked: n ? "indeterminate" : a,
220
+ checked: o ? "indeterminate" : a,
221
221
  onCheckedChange: (c) => t?.(c === !0),
222
222
  onClick: (c) => c.stopPropagation(),
223
223
  "aria-label": l || "行を選択",
@@ -231,19 +231,19 @@ function me({
231
231
  className: r,
232
232
  actions: a,
233
233
  onClick: t,
234
- ...n
234
+ ...o
235
235
  }) {
236
236
  return /* @__PURE__ */ e(
237
237
  m,
238
238
  {
239
- className: i("w-10", r),
239
+ className: n("w-10", r),
240
240
  onClick: (l) => {
241
241
  l.stopPropagation(), t?.(l);
242
242
  },
243
- ...n,
243
+ ...o,
244
244
  children: /* @__PURE__ */ s(z, { children: [
245
245
  /* @__PURE__ */ e(M, { asChild: !0, children: /* @__PURE__ */ e(E, { variant: "ghost", size: "sm", className: "size-8 p-0", "aria-label": "アクションメニュー", children: /* @__PURE__ */ e(w, { size: 16 }) }) }),
246
- /* @__PURE__ */ e(P, { align: "end", children: a.map((l, o) => /* @__PURE__ */ s(b.Fragment, { children: [
246
+ /* @__PURE__ */ e(P, { align: "end", children: a.map((l, i) => /* @__PURE__ */ s(b.Fragment, { children: [
247
247
  l.separator && /* @__PURE__ */ e(I, {}),
248
248
  /* @__PURE__ */ e(
249
249
  R,
@@ -253,7 +253,7 @@ function me({
253
253
  children: l.label
254
254
  }
255
255
  )
256
- ] }, o)) })
256
+ ] }, i)) })
257
257
  ] })
258
258
  }
259
259
  );
@@ -262,17 +262,17 @@ function pe({
262
262
  className: r,
263
263
  selectedCount: a,
264
264
  children: t,
265
- ...n
265
+ ...o
266
266
  }) {
267
267
  return a === 0 ? null : /* @__PURE__ */ s(
268
268
  "div",
269
269
  {
270
270
  "data-slot": "data-table-bulk-actions",
271
- className: i(
271
+ className: n(
272
272
  "flex items-center gap-3 px-4 py-3 bg-[var(--Surface-Accent-Primary-Light)] border-b border-[var(--Border-Low-Emphasis)]",
273
273
  r
274
274
  ),
275
- ...n,
275
+ ...o,
276
276
  children: [
277
277
  /* @__PURE__ */ s("span", { className: "typo-label-sm text-[var(--Text-High-Emphasis)]", children: [
278
278
  a,
@@ -287,16 +287,16 @@ function he({
287
287
  className: r,
288
288
  title: a,
289
289
  colSpan: t,
290
- expanded: n,
290
+ expanded: o,
291
291
  onToggle: l,
292
- actions: o,
292
+ actions: i,
293
293
  ...c
294
294
  }) {
295
295
  return /* @__PURE__ */ e(
296
296
  "tr",
297
297
  {
298
298
  "data-slot": "data-table-section-row",
299
- className: i("border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Secondary)]", r),
299
+ className: n("border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Secondary)]", r),
300
300
  ...c,
301
301
  children: /* @__PURE__ */ e("td", { colSpan: t, className: "px-4 py-3", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
302
302
  /* @__PURE__ */ s(
@@ -305,14 +305,14 @@ function he({
305
305
  type: "button",
306
306
  className: "flex items-center gap-1.5 typo-label-md text-[var(--Text-High-Emphasis)] cursor-pointer",
307
307
  onClick: l,
308
- "aria-expanded": n,
308
+ "aria-expanded": o,
309
309
  children: [
310
- /* @__PURE__ */ e(g, { size: 16, className: i("transition-transform", n ? "" : "-rotate-90") }),
310
+ /* @__PURE__ */ e(g, { size: 16, className: n("transition-transform", o ? "" : "-rotate-90") }),
311
311
  a
312
312
  ]
313
313
  }
314
314
  ),
315
- o && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: o })
315
+ i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: i })
316
316
  ] }) })
317
317
  }
318
318
  );
@@ -321,15 +321,15 @@ function ue({
321
321
  className: r,
322
322
  colSpan: a,
323
323
  label: t = "新しく追加",
324
- onClick: n,
324
+ onClick: o,
325
325
  ...l
326
326
  }) {
327
327
  return /* @__PURE__ */ e(
328
328
  "tr",
329
329
  {
330
330
  "data-slot": "data-table-add-row",
331
- className: i("border-b border-[var(--Border-Low-Emphasis)] hover:bg-[var(--Surface-Tertiary)] cursor-pointer transition-colors", r),
332
- onClick: n,
331
+ className: n("border-b border-[var(--Border-Low-Emphasis)] hover:bg-[var(--Surface-Tertiary)] cursor-pointer transition-colors", r),
332
+ onClick: o,
333
333
  ...l,
334
334
  children: /* @__PURE__ */ e("td", { colSpan: a, className: "px-4 py-4", children: /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-2 typo-body-md text-[var(--Text-Medium-Emphasis)]", children: [
335
335
  /* @__PURE__ */ e(y, { size: 16 }),
@@ -342,51 +342,51 @@ function be({
342
342
  className: r,
343
343
  colSpan: a,
344
344
  message: t = "対象のデータはありません",
345
- icon: n,
345
+ icon: o,
346
346
  description: l,
347
- action: o,
347
+ action: i,
348
348
  ...c
349
349
  }) {
350
350
  return /* @__PURE__ */ e(
351
351
  "tr",
352
352
  {
353
353
  "data-slot": "data-table-empty-state",
354
- className: i("", r),
354
+ className: n("", r),
355
355
  ...c,
356
- children: /* @__PURE__ */ e("td", { colSpan: a, children: n ? /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center px-4 py-16", children: [
357
- /* @__PURE__ */ e("div", { className: "text-[var(--Border-Medium-Emphasis)]", children: n }),
356
+ children: /* @__PURE__ */ e("td", { colSpan: a, children: o ? /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center px-4 py-16", children: [
357
+ /* @__PURE__ */ e("div", { className: "text-[var(--Border-Medium-Emphasis)]", children: o }),
358
358
  /* @__PURE__ */ e("p", { className: "mt-4 typo-heading-md text-[var(--Text-High-Emphasis)]", children: t }),
359
359
  l && /* @__PURE__ */ e("div", { className: "mt-1 text-center typo-body-md text-[var(--Text-Medium-Emphasis)]", children: l }),
360
- o && /* @__PURE__ */ e("div", { className: "mt-6", children: o })
360
+ i && /* @__PURE__ */ e("div", { className: "mt-6", children: i })
361
361
  ] }) : /* @__PURE__ */ e("p", { className: "py-12 text-center typo-body-md text-[var(--Text-Low-Emphasis)]", children: t }) })
362
362
  }
363
363
  );
364
364
  }
365
- function xe({
365
+ function fe({
366
366
  className: r,
367
367
  src: a,
368
368
  alt: t,
369
- title: n,
369
+ title: o,
370
370
  caption: l,
371
- ...o
371
+ ...i
372
372
  }) {
373
- return /* @__PURE__ */ e(m, { className: i("min-w-[200px]", r), ...o, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
373
+ return /* @__PURE__ */ e(m, { className: n("min-w-[200px]", r), ...i, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
374
374
  /* @__PURE__ */ e("div", { className: "size-10 rounded-lg bg-[var(--Surface-Tertiary)] overflow-hidden shrink-0", children: a && /* @__PURE__ */ e(
375
375
  "img",
376
376
  {
377
377
  src: a,
378
- alt: t || n,
378
+ alt: t || o,
379
379
  className: "size-full object-cover",
380
380
  loading: "lazy"
381
381
  }
382
382
  ) }),
383
383
  /* @__PURE__ */ s("div", { className: "min-w-0", children: [
384
- /* @__PURE__ */ e("p", { className: "typo-body-md text-[var(--Text-High-Emphasis)] line-clamp-2", children: n }),
384
+ /* @__PURE__ */ e("p", { className: "typo-body-md text-[var(--Text-High-Emphasis)] line-clamp-2", children: o }),
385
385
  l && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)] truncate", children: l })
386
386
  ] })
387
387
  ] }) });
388
388
  }
389
- function fe({
389
+ function xe({
390
390
  className: r,
391
391
  ...a
392
392
  }) {
@@ -394,7 +394,7 @@ function fe({
394
394
  "td",
395
395
  {
396
396
  "data-slot": "data-table-drag-handle-cell",
397
- className: i("w-10 px-2 py-4 align-middle cursor-grab active:cursor-grabbing", r),
397
+ className: n("w-10 px-2 py-4 align-middle cursor-grab active:cursor-grabbing", r),
398
398
  ...a,
399
399
  children: /* @__PURE__ */ s(
400
400
  "svg",
@@ -423,17 +423,18 @@ function ve({
423
423
  className: r,
424
424
  href: a = "#",
425
425
  external: t,
426
- children: n,
427
- ...l
426
+ linkComponent: o,
427
+ children: l,
428
+ ...i
428
429
  }) {
429
- return /* @__PURE__ */ e(m, { className: r, ...l, children: /* @__PURE__ */ s(
430
- "a",
430
+ return /* @__PURE__ */ e(m, { className: r, ...i, children: /* @__PURE__ */ s(
431
+ t ? "a" : o ?? "a",
431
432
  {
432
433
  href: a,
433
434
  className: "inline-flex items-center gap-1 typo-body-md text-[var(--Text-Accent-Primary)] hover:underline",
434
435
  ...t ? { target: "_blank", rel: "noopener noreferrer" } : {},
435
436
  children: [
436
- n,
437
+ l,
437
438
  t && /* @__PURE__ */ e(N, { size: 14 })
438
439
  ]
439
440
  }
@@ -443,19 +444,21 @@ function ge({
443
444
  className: r,
444
445
  value: a,
445
446
  onChange: t,
446
- placeholder: n,
447
+ placeholder: o,
447
448
  type: l = "text",
448
- name: o,
449
+ name: i,
449
450
  ...c
450
451
  }) {
451
452
  return /* @__PURE__ */ e(
452
453
  "td",
453
454
  {
454
455
  "data-slot": "data-table-input-cell",
455
- className: i(
456
+ className: n(
456
457
  "px-4 py-4 align-middle whitespace-nowrap",
457
458
  "hover:shadow-[inset_0_0_0_2px_var(--Border-Accent-Primary)] hover:rounded",
458
459
  "has-[input:focus]:shadow-[inset_0_0_0_2px_var(--Border-Accent-Primary)] has-[input:focus]:rounded",
460
+ // forced-colors では影が描かれず、input は outline-none なので、セル全体に内側の輪郭線を出す
461
+ "forced-colors:has-[input:focus]:outline-solid forced-colors:has-[input:focus]:outline-2 forced-colors:has-[input:focus]:-outline-offset-2 forced-colors:has-[input:focus]:outline-[Highlight]",
459
462
  r
460
463
  ),
461
464
  ...c,
@@ -463,10 +466,10 @@ function ge({
463
466
  "input",
464
467
  {
465
468
  type: l,
466
- name: o,
469
+ name: i,
467
470
  value: a,
468
471
  onChange: (d) => t?.(d.target.value),
469
- placeholder: n,
472
+ placeholder: o,
470
473
  className: "w-full bg-transparent outline-none typo-body-md text-[var(--Text-High-Emphasis)] placeholder:text-[var(--Text-Low-Emphasis)]"
471
474
  }
472
475
  )
@@ -477,27 +480,27 @@ function we({
477
480
  className: r,
478
481
  value: a,
479
482
  onValueChange: t,
480
- options: n,
483
+ options: o,
481
484
  placeholder: l = "選択してください",
482
- "aria-label": o,
485
+ "aria-label": i,
483
486
  ...c
484
487
  }) {
485
488
  return /* @__PURE__ */ e(
486
489
  m,
487
490
  {
488
- className: i("hover:bg-[var(--Surface-Tertiary)] cursor-pointer p-0", r),
491
+ className: n("hover:bg-[var(--Surface-Tertiary)] cursor-pointer p-0", r),
489
492
  ...c,
490
493
  children: /* @__PURE__ */ s(A, { value: a, onValueChange: t, children: [
491
494
  /* @__PURE__ */ e(
492
495
  L,
493
496
  {
494
497
  size: "sm",
495
- "aria-label": o ?? l,
498
+ "aria-label": i ?? l,
496
499
  className: "w-full min-w-[160px] border-0 bg-transparent rounded-none px-4 py-4 h-auto hover:bg-transparent focus-visible:ring-0 focus-visible:border-0",
497
500
  children: /* @__PURE__ */ e(_, { placeholder: l })
498
501
  }
499
502
  ),
500
- /* @__PURE__ */ e(B, { children: n.map((d) => /* @__PURE__ */ e(H, { value: d.value, children: d.label }, d.value)) })
503
+ /* @__PURE__ */ e(B, { children: o.map((d) => /* @__PURE__ */ e(H, { value: d.value, children: d.label }, d.value)) })
501
504
  ] })
502
505
  }
503
506
  );
@@ -518,15 +521,15 @@ export {
518
521
  pe as DataTableBulkActions,
519
522
  m as DataTableCell,
520
523
  de as DataTableCheckboxCell,
521
- fe as DataTableDragHandleCell,
524
+ xe as DataTableDragHandleCell,
522
525
  be as DataTableEmptyState,
523
526
  se as DataTableHead,
524
- ne as DataTableHeader,
525
- xe as DataTableImageCell,
527
+ oe as DataTableHeader,
528
+ fe as DataTableImageCell,
526
529
  ge as DataTableInputCell,
527
530
  ve as DataTableLinkCell,
528
531
  ye as DataTableNumberCell,
529
- oe as DataTableRow,
532
+ ne as DataTableRow,
530
533
  he as DataTableSectionRow,
531
534
  we as DataTableSelectCell,
532
535
  le as DataTableTable
@@ -1,30 +1,30 @@
1
1
  import { jsx as t, jsxs as l } from "react/jsx-runtime";
2
2
  import "react";
3
- import { XIcon as d } from "lucide-react";
3
+ import { XIcon as c } from "lucide-react";
4
4
  import { Dialog as o } from "radix-ui";
5
5
  import { cn as i } from "../../lib/utils.js";
6
- import { Button as c } from "./button.js";
7
- function D({
6
+ import { Button as g } from "./button.js";
7
+ function w({
8
8
  ...a
9
9
  }) {
10
10
  return /* @__PURE__ */ t(o.Root, { "data-slot": "dialog", ...a });
11
11
  }
12
- function y({
12
+ function C({
13
13
  ...a
14
14
  }) {
15
15
  return /* @__PURE__ */ t(o.Trigger, { "data-slot": "dialog-trigger", ...a });
16
16
  }
17
- function g({
17
+ function u({
18
18
  ...a
19
19
  }) {
20
20
  return /* @__PURE__ */ t(o.Portal, { "data-slot": "dialog-portal", ...a });
21
21
  }
22
- function b({
22
+ function N({
23
23
  ...a
24
24
  }) {
25
25
  return /* @__PURE__ */ t(o.Close, { "data-slot": "dialog-close", ...a });
26
26
  }
27
- function u({
27
+ function m({
28
28
  className: a,
29
29
  ...e
30
30
  }) {
@@ -40,33 +40,42 @@ function u({
40
40
  }
41
41
  );
42
42
  }
43
- function N({
43
+ const f = {
44
+ sm: "sm:max-w-[400px]",
45
+ md: "sm:max-w-[512px]",
46
+ lg: "sm:max-w-[640px]",
47
+ xl: "sm:max-w-[800px]"
48
+ }, p = "sm:max-w-lg";
49
+ function T({
44
50
  className: a,
45
51
  children: e,
46
- showCloseButton: s = !0,
47
- ...r
52
+ showCloseButton: r = !0,
53
+ size: s,
54
+ ...n
48
55
  }) {
49
- return /* @__PURE__ */ l(g, { "data-slot": "dialog-portal", children: [
50
- /* @__PURE__ */ t(u, {}),
56
+ return /* @__PURE__ */ l(u, { "data-slot": "dialog-portal", children: [
57
+ /* @__PURE__ */ t(m, {}),
51
58
  /* @__PURE__ */ l(
52
59
  o.Content,
53
60
  {
54
61
  "data-slot": "dialog-content",
55
- onOpenAutoFocus: (n) => n.preventDefault(),
62
+ onOpenAutoFocus: (d) => d.preventDefault(),
56
63
  className: i(
57
- "fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-[calc(100%_-_32px)] max-w-[calc(100%_-_32px)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-[var(--Surface-Elevated)] p-6 shadow-lg duration-[var(--Motion-Duration-Base)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] 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 sm:max-w-lg",
64
+ "fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-[calc(100%_-_32px)] max-w-[calc(100%_-_32px)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-[var(--Surface-Elevated)] p-6 shadow-lg duration-[var(--Motion-Duration-Base)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] 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",
65
+ // 型に無い size(AlertDialog の "default" と取り違えた JSX など)でも幅の上限を消さず、未指定と同じにする
66
+ s && f[s] || p,
58
67
  a
59
68
  ),
60
- ...r,
69
+ ...n,
61
70
  children: [
62
71
  e,
63
- s && /* @__PURE__ */ l(
72
+ r && /* @__PURE__ */ l(
64
73
  o.Close,
65
74
  {
66
75
  "data-slot": "dialog-close",
67
76
  className: "absolute top-2 right-2 flex size-10 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
68
77
  children: [
69
- /* @__PURE__ */ t(d, { className: "size-5" }),
78
+ /* @__PURE__ */ t(c, { className: "size-5" }),
70
79
  /* @__PURE__ */ t("span", { className: "sr-only", children: "閉じる" })
71
80
  ]
72
81
  }
@@ -76,7 +85,7 @@ function N({
76
85
  )
77
86
  ] });
78
87
  }
79
- function T({ className: a, ...e }) {
88
+ function E({ className: a, ...e }) {
80
89
  return /* @__PURE__ */ t(
81
90
  "div",
82
91
  {
@@ -86,11 +95,11 @@ function T({ className: a, ...e }) {
86
95
  }
87
96
  );
88
97
  }
89
- function C({
98
+ function z({
90
99
  className: a,
91
100
  showCloseButton: e = !1,
92
- children: s,
93
- ...r
101
+ children: r,
102
+ ...s
94
103
  }) {
95
104
  return /* @__PURE__ */ l(
96
105
  "div",
@@ -100,15 +109,15 @@ function C({
100
109
  "flex flex-col gap-2 sm:flex-row sm:justify-end",
101
110
  a
102
111
  ),
103
- ...r,
112
+ ...s,
104
113
  children: [
105
- s,
106
- e && /* @__PURE__ */ t(o.Close, { asChild: !0, children: /* @__PURE__ */ t(c, { variant: "tertiary", children: "Close" }) })
114
+ r,
115
+ e && /* @__PURE__ */ t(o.Close, { asChild: !0, children: /* @__PURE__ */ t(g, { variant: "tertiary", children: "Close" }) })
107
116
  ]
108
117
  }
109
118
  );
110
119
  }
111
- function E({
120
+ function _({
112
121
  className: a,
113
122
  ...e
114
123
  }) {
@@ -121,7 +130,7 @@ function E({
121
130
  }
122
131
  );
123
132
  }
124
- function w({
133
+ function H({
125
134
  className: a,
126
135
  ...e
127
136
  }) {
@@ -135,14 +144,14 @@ function w({
135
144
  );
136
145
  }
137
146
  export {
138
- D as Dialog,
139
- b as DialogClose,
140
- N as DialogContent,
141
- w as DialogDescription,
142
- C as DialogFooter,
143
- T as DialogHeader,
144
- u as DialogOverlay,
145
- g as DialogPortal,
146
- E as DialogTitle,
147
- y as DialogTrigger
147
+ w as Dialog,
148
+ N as DialogClose,
149
+ T as DialogContent,
150
+ H as DialogDescription,
151
+ z as DialogFooter,
152
+ E as DialogHeader,
153
+ m as DialogOverlay,
154
+ u as DialogPortal,
155
+ _ as DialogTitle,
156
+ C as DialogTrigger
148
157
  };