@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.
- package/CHANGELOG.md +172 -0
- package/CLAUDE.md +5 -3
- package/MIGRATION.md +3 -3
- package/README.md +31 -11
- package/contracts/components.json +420 -63
- package/contracts/composition.json +38 -4
- package/contracts/rules.json +27 -5
- package/contracts/screen-patterns.json +6 -4
- package/dist/components/ec/admin-shell.js +62 -60
- package/dist/components/ec/anniversary-card.js +13 -12
- package/dist/components/ec/coupon-card.js +11 -11
- package/dist/components/ec/delivery-calendar.js +51 -45
- package/dist/components/ec/mypage-shell.js +80 -69
- package/dist/components/ec/product-card.js +93 -76
- package/dist/components/ec/product-carousel.js +65 -60
- package/dist/components/ec/product-detail-bar.js +13 -11
- package/dist/components/ec/product-detail-sidebar.js +60 -58
- package/dist/components/ec/product-list-item.js +64 -63
- package/dist/components/ec/product-option.js +30 -26
- package/dist/components/ec/rating-stars.js +27 -27
- package/dist/components/ec/review-card.js +32 -32
- package/dist/components/ec/review-form.js +37 -37
- package/dist/components/ec/shop-card.js +21 -19
- package/dist/components/foundations/accordion.js +33 -31
- package/dist/components/foundations/alert-dialog.js +4 -5
- package/dist/components/foundations/badge.js +5 -5
- package/dist/components/foundations/breadcrumb.js +27 -26
- package/dist/components/foundations/button.js +144 -25
- package/dist/components/foundations/calendar.js +28 -26
- package/dist/components/foundations/checkbox-card.js +71 -47
- package/dist/components/foundations/checkbox-group.js +30 -27
- package/dist/components/foundations/checkbox.js +69 -52
- package/dist/components/foundations/chip-variants.js +13 -0
- package/dist/components/foundations/command.js +81 -79
- package/dist/components/foundations/confirm-dialog.js +136 -0
- package/dist/components/foundations/context-menu.js +43 -38
- package/dist/components/foundations/data-table.js +87 -84
- package/dist/components/foundations/dialog.js +45 -36
- package/dist/components/foundations/dropdown-menu.js +47 -42
- package/dist/components/foundations/file-input.js +97 -67
- package/dist/components/foundations/hover-card.js +21 -21
- package/dist/components/foundations/menubar.js +75 -69
- package/dist/components/foundations/navigation-menu.js +31 -26
- package/dist/components/foundations/pagination.js +54 -50
- package/dist/components/foundations/popover.js +7 -7
- package/dist/components/foundations/progress.js +10 -6
- package/dist/components/foundations/radio-group.js +6 -3
- package/dist/components/foundations/responsive-dialog.js +73 -55
- package/dist/components/foundations/scroll-area.js +18 -14
- package/dist/components/foundations/select.js +44 -39
- package/dist/components/foundations/sheet.js +45 -37
- package/dist/components/foundations/skeleton.js +6 -6
- package/dist/components/foundations/skip-link.js +10 -8
- package/dist/components/foundations/slider.js +73 -48
- package/dist/components/foundations/sonner.js +5 -4
- package/dist/components/foundations/spinner.js +7 -5
- package/dist/components/foundations/switch.js +11 -10
- package/dist/components/foundations/tabs.js +54 -39
- package/dist/components/foundations/toggle-group.js +29 -21
- package/dist/components/foundations/toggle.js +20 -16
- package/dist/components/primitives/admin-side-nav.js +65 -62
- package/dist/components/primitives/banner-carousel.js +32 -29
- package/dist/components/primitives/bottom-tab-bar.js +16 -15
- package/dist/components/primitives/category-scroll.js +39 -29
- package/dist/components/primitives/category-shortcuts.js +9 -9
- package/dist/components/primitives/chat-composer.js +77 -74
- package/dist/components/primitives/chip.js +84 -61
- package/dist/components/primitives/combobox.js +63 -47
- package/dist/components/primitives/container.js +9 -9
- package/dist/components/primitives/content-card.js +15 -17
- package/dist/components/primitives/content-carousel.js +79 -68
- package/dist/components/primitives/date-picker.js +137 -99
- package/dist/components/primitives/footer.js +36 -37
- package/dist/components/primitives/header.js +175 -168
- package/dist/components/primitives/image-carousel.js +107 -87
- package/dist/components/primitives/image-gallery.js +32 -27
- package/dist/components/primitives/image-uploader.js +6 -6
- package/dist/components/primitives/list-item.js +59 -51
- package/dist/components/primitives/menu-drawer.js +36 -38
- package/dist/components/primitives/multi-select.js +89 -58
- package/dist/components/primitives/notification-list.js +10 -9
- package/dist/components/primitives/number-input.js +116 -105
- package/dist/components/primitives/scroll-row.js +21 -0
- package/dist/components/primitives/search-bar.js +31 -28
- package/dist/components/primitives/section-header.js +54 -53
- package/dist/components/primitives/side-nav.js +57 -56
- package/dist/components/primitives/sub-nav.js +13 -14
- package/dist/components/primitives/tag.js +4 -2
- package/dist/index.css +1 -1
- package/dist/index.js +3051 -924
- package/dist/lib/field-labelling.js +31 -21
- package/dist/lib/focus-ring.js +22 -4
- package/dist/lib/high-contrast.js +4 -0
- package/dist/lib/image-index.js +8 -0
- package/dist/lib/use-prefers-reduced-motion.js +21 -0
- package/dist/types/components/ec/admin-shell.d.ts +11 -1
- package/dist/types/components/ec/anniversary-card.d.ts +9 -1
- package/dist/types/components/ec/mypage-shell.d.ts +12 -1
- package/dist/types/components/ec/product-card.d.ts +13 -1
- package/dist/types/components/ec/product-carousel.d.ts +13 -1
- package/dist/types/components/ec/product-detail-bar.d.ts +12 -1
- package/dist/types/components/ec/product-detail-sidebar.d.ts +11 -1
- package/dist/types/components/ec/product-list-item.d.ts +9 -1
- package/dist/types/components/ec/rating-stars.d.ts +2 -0
- package/dist/types/components/ec/review-card.d.ts +1 -1
- package/dist/types/components/ec/shop-card.d.ts +8 -1
- package/dist/types/components/foundations/badge.d.ts +1 -1
- package/dist/types/components/foundations/breadcrumb.d.ts +8 -1
- package/dist/types/components/foundations/button.d.ts +38 -3
- package/dist/types/components/foundations/checkbox-card.d.ts +7 -1
- package/dist/types/components/foundations/checkbox.d.ts +1 -1
- package/dist/types/components/foundations/chip-variants.d.ts +2 -2
- package/dist/types/components/foundations/confirm-dialog.d.ts +61 -0
- package/dist/types/components/foundations/data-table.d.ts +9 -2
- package/dist/types/components/foundations/dialog.d.ts +16 -1
- package/dist/types/components/foundations/pagination.d.ts +1 -1
- package/dist/types/components/foundations/responsive-dialog.d.ts +2 -1
- package/dist/types/components/foundations/sheet.d.ts +12 -1
- package/dist/types/components/foundations/skeleton.d.ts +6 -0
- package/dist/types/components/foundations/slider.d.ts +15 -1
- package/dist/types/components/foundations/tabs.d.ts +7 -0
- package/dist/types/components/primitives/admin-side-nav.d.ts +22 -2
- package/dist/types/components/primitives/banner-carousel.d.ts +9 -1
- package/dist/types/components/primitives/bottom-tab-bar.d.ts +13 -2
- package/dist/types/components/primitives/category-scroll.d.ts +10 -1
- package/dist/types/components/primitives/category-shortcuts.d.ts +11 -2
- package/dist/types/components/primitives/chip.d.ts +22 -3
- package/dist/types/components/primitives/combobox.d.ts +7 -2
- package/dist/types/components/primitives/container.d.ts +3 -0
- package/dist/types/components/primitives/content-card.d.ts +1 -1
- package/dist/types/components/primitives/content-carousel.d.ts +12 -4
- package/dist/types/components/primitives/date-picker.d.ts +10 -3
- package/dist/types/components/primitives/footer.d.ts +1 -1
- package/dist/types/components/primitives/header.d.ts +14 -2
- package/dist/types/components/primitives/image-carousel.d.ts +23 -5
- package/dist/types/components/primitives/list-item.d.ts +10 -1
- package/dist/types/components/primitives/menu-drawer.d.ts +1 -1
- package/dist/types/components/primitives/multi-select.d.ts +7 -2
- package/dist/types/components/primitives/notification-list.d.ts +10 -1
- package/dist/types/components/primitives/number-input.d.ts +18 -5
- package/dist/types/components/primitives/scroll-row.d.ts +43 -0
- package/dist/types/components/primitives/section-header.d.ts +9 -2
- package/dist/types/components/primitives/side-nav.d.ts +13 -1
- package/dist/types/components/primitives/sub-nav.d.ts +1 -1
- package/dist/types/components/primitives/tag.d.ts +1 -1
- package/dist/types/index.d.ts +7 -1
- package/dist/types/lib/field-labelling.d.ts +23 -8
- package/dist/types/lib/focus-ring.d.ts +70 -3
- package/dist/types/lib/high-contrast.d.ts +25 -0
- package/dist/types/lib/image-index.d.ts +2 -0
- package/dist/types/lib/link-component.d.ts +26 -21
- package/dist/types/lib/use-prefers-reduced-motion.d.ts +9 -0
- package/package.json +11 -3
- package/src/components/COMPONENT_LOOKUP.md +18 -16
- package/src/preset-standalone.css +42 -0
- package/src/preset.css +20 -1
- package/src/styles/semantic.css +57 -0
- package/templates/AGENTS.md +5 -1
- package/templates/CLAUDE.md +3 -1
- package/tokens.json +49 -0
- 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
|
|
5
|
-
import
|
|
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
|
|
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
|
|
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:
|
|
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:
|
|
33
|
+
className: n("w-full caption-bottom typo-body-md border-collapse", r),
|
|
34
34
|
...a
|
|
35
35
|
}
|
|
36
36
|
);
|
|
37
37
|
}
|
|
38
|
-
function
|
|
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:
|
|
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:
|
|
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
|
|
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:
|
|
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:
|
|
90
|
+
onSort: o,
|
|
91
91
|
width: l,
|
|
92
|
-
srLabel:
|
|
92
|
+
srLabel: i,
|
|
93
93
|
children: c,
|
|
94
94
|
...d
|
|
95
95
|
}) {
|
|
96
|
-
const h = t === "asc" ?
|
|
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:
|
|
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:
|
|
120
|
-
className:
|
|
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:
|
|
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
|
-
|
|
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
|
-
...
|
|
170
|
+
...o
|
|
171
171
|
}) {
|
|
172
172
|
return /* @__PURE__ */ e(
|
|
173
173
|
"td",
|
|
174
174
|
{
|
|
175
175
|
"data-slot": "data-table-cell",
|
|
176
|
-
className:
|
|
177
|
-
...
|
|
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:
|
|
185
|
+
title: o,
|
|
186
186
|
caption: l,
|
|
187
|
-
...
|
|
187
|
+
...i
|
|
188
188
|
}) {
|
|
189
|
-
return /* @__PURE__ */ e(m, { className:
|
|
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(
|
|
192
|
-
/* @__PURE__ */ e(
|
|
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:
|
|
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:
|
|
204
|
+
indeterminate: o,
|
|
205
205
|
"aria-label": l,
|
|
206
|
-
...
|
|
206
|
+
...i
|
|
207
207
|
}) {
|
|
208
208
|
return /* @__PURE__ */ e(
|
|
209
209
|
"td",
|
|
210
210
|
{
|
|
211
211
|
"data-slot": "data-table-checkbox-cell",
|
|
212
|
-
className:
|
|
212
|
+
className: n("w-16 px-4 py-4 align-middle cursor-pointer", r),
|
|
213
213
|
onClick: (c) => {
|
|
214
|
-
c.stopPropagation(), t?.(!(!
|
|
214
|
+
c.stopPropagation(), t?.(!(!o && a));
|
|
215
215
|
},
|
|
216
|
-
...
|
|
216
|
+
...i,
|
|
217
217
|
children: /* @__PURE__ */ e(
|
|
218
218
|
C,
|
|
219
219
|
{
|
|
220
|
-
checked:
|
|
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
|
-
...
|
|
234
|
+
...o
|
|
235
235
|
}) {
|
|
236
236
|
return /* @__PURE__ */ e(
|
|
237
237
|
m,
|
|
238
238
|
{
|
|
239
|
-
className:
|
|
239
|
+
className: n("w-10", r),
|
|
240
240
|
onClick: (l) => {
|
|
241
241
|
l.stopPropagation(), t?.(l);
|
|
242
242
|
},
|
|
243
|
-
...
|
|
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,
|
|
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
|
-
] },
|
|
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
|
-
...
|
|
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:
|
|
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
|
-
...
|
|
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:
|
|
290
|
+
expanded: o,
|
|
291
291
|
onToggle: l,
|
|
292
|
-
actions:
|
|
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:
|
|
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":
|
|
308
|
+
"aria-expanded": o,
|
|
309
309
|
children: [
|
|
310
|
-
/* @__PURE__ */ e(g, { size: 16, className:
|
|
310
|
+
/* @__PURE__ */ e(g, { size: 16, className: n("transition-transform", o ? "" : "-rotate-90") }),
|
|
311
311
|
a
|
|
312
312
|
]
|
|
313
313
|
}
|
|
314
314
|
),
|
|
315
|
-
|
|
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:
|
|
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:
|
|
332
|
-
onClick:
|
|
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:
|
|
345
|
+
icon: o,
|
|
346
346
|
description: l,
|
|
347
|
-
action:
|
|
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:
|
|
354
|
+
className: n("", r),
|
|
355
355
|
...c,
|
|
356
|
-
children: /* @__PURE__ */ e("td", { colSpan: a, children:
|
|
357
|
-
/* @__PURE__ */ e("div", { className: "text-[var(--Border-Medium-Emphasis)]", children:
|
|
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
|
-
|
|
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
|
|
365
|
+
function fe({
|
|
366
366
|
className: r,
|
|
367
367
|
src: a,
|
|
368
368
|
alt: t,
|
|
369
|
-
title:
|
|
369
|
+
title: o,
|
|
370
370
|
caption: l,
|
|
371
|
-
...
|
|
371
|
+
...i
|
|
372
372
|
}) {
|
|
373
|
-
return /* @__PURE__ */ e(m, { className:
|
|
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 ||
|
|
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:
|
|
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
|
|
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:
|
|
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
|
-
|
|
427
|
-
|
|
426
|
+
linkComponent: o,
|
|
427
|
+
children: l,
|
|
428
|
+
...i
|
|
428
429
|
}) {
|
|
429
|
-
return /* @__PURE__ */ e(m, { className: r, ...
|
|
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
|
-
|
|
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:
|
|
447
|
+
placeholder: o,
|
|
447
448
|
type: l = "text",
|
|
448
|
-
name:
|
|
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:
|
|
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:
|
|
469
|
+
name: i,
|
|
467
470
|
value: a,
|
|
468
471
|
onChange: (d) => t?.(d.target.value),
|
|
469
|
-
placeholder:
|
|
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:
|
|
483
|
+
options: o,
|
|
481
484
|
placeholder: l = "選択してください",
|
|
482
|
-
"aria-label":
|
|
485
|
+
"aria-label": i,
|
|
483
486
|
...c
|
|
484
487
|
}) {
|
|
485
488
|
return /* @__PURE__ */ e(
|
|
486
489
|
m,
|
|
487
490
|
{
|
|
488
|
-
className:
|
|
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":
|
|
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:
|
|
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
|
-
|
|
524
|
+
xe as DataTableDragHandleCell,
|
|
522
525
|
be as DataTableEmptyState,
|
|
523
526
|
se as DataTableHead,
|
|
524
|
-
|
|
525
|
-
|
|
527
|
+
oe as DataTableHeader,
|
|
528
|
+
fe as DataTableImageCell,
|
|
526
529
|
ge as DataTableInputCell,
|
|
527
530
|
ve as DataTableLinkCell,
|
|
528
531
|
ye as DataTableNumberCell,
|
|
529
|
-
|
|
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
|
|
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
|
|
7
|
-
function
|
|
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
|
|
12
|
+
function C({
|
|
13
13
|
...a
|
|
14
14
|
}) {
|
|
15
15
|
return /* @__PURE__ */ t(o.Trigger, { "data-slot": "dialog-trigger", ...a });
|
|
16
16
|
}
|
|
17
|
-
function
|
|
17
|
+
function u({
|
|
18
18
|
...a
|
|
19
19
|
}) {
|
|
20
20
|
return /* @__PURE__ */ t(o.Portal, { "data-slot": "dialog-portal", ...a });
|
|
21
21
|
}
|
|
22
|
-
function
|
|
22
|
+
function N({
|
|
23
23
|
...a
|
|
24
24
|
}) {
|
|
25
25
|
return /* @__PURE__ */ t(o.Close, { "data-slot": "dialog-close", ...a });
|
|
26
26
|
}
|
|
27
|
-
function
|
|
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
|
-
|
|
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:
|
|
47
|
-
|
|
52
|
+
showCloseButton: r = !0,
|
|
53
|
+
size: s,
|
|
54
|
+
...n
|
|
48
55
|
}) {
|
|
49
|
-
return /* @__PURE__ */ l(
|
|
50
|
-
/* @__PURE__ */ t(
|
|
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: (
|
|
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
|
|
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
|
-
...
|
|
69
|
+
...n,
|
|
61
70
|
children: [
|
|
62
71
|
e,
|
|
63
|
-
|
|
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(
|
|
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
|
|
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
|
|
98
|
+
function z({
|
|
90
99
|
className: a,
|
|
91
100
|
showCloseButton: e = !1,
|
|
92
|
-
children:
|
|
93
|
-
...
|
|
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
|
-
...
|
|
112
|
+
...s,
|
|
104
113
|
children: [
|
|
105
|
-
|
|
106
|
-
e && /* @__PURE__ */ t(o.Close, { asChild: !0, children: /* @__PURE__ */ t(
|
|
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
|
|
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
|
|
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
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
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
|
};
|