@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,5 +1,5 @@
1
1
  "use client";
2
- import { jsxs as r, jsx as a } from "react/jsx-runtime";
2
+ import { jsxs as a, jsx as r } from "react/jsx-runtime";
3
3
  import * as s from "react";
4
4
  import I from "iconsax-reactjs/dist/esm/Camera.js";
5
5
  import { X as P } from "lucide-react";
@@ -20,24 +20,24 @@ function K({
20
20
  className: j,
21
21
  ...S
22
22
  }) {
23
- const [l, T] = s.useState(w), [C, y] = s.useState(0), [f, O] = s.useState(z), [p, N] = s.useState([]), [o, R] = s.useState([]), n = s.useRef(null), u = C || l;
24
- function U(e) {
23
+ const [l, T] = s.useState(w), [C, y] = s.useState(0), [f, B] = s.useState(z), [p, N] = s.useState([]), [o, R] = s.useState([]), n = s.useRef(null), u = C || l;
24
+ function O(e) {
25
25
  const t = Array.from(e.target.files ?? []), c = [...p, ...t].slice(0, m);
26
26
  N(c);
27
27
  const i = c.map((v) => URL.createObjectURL(v));
28
28
  o.forEach((v) => URL.revokeObjectURL(v)), R(i), n.current && (n.current.value = "");
29
29
  }
30
- function M(e) {
30
+ function U(e) {
31
31
  URL.revokeObjectURL(o[e]), N((t) => t.filter((c, i) => i !== e)), R((t) => t.filter((c, i) => i !== e));
32
32
  }
33
- function B(e) {
33
+ function M(e) {
34
34
  e.preventDefault(), l !== 0 && L?.({ rating: l, text: f, images: p });
35
35
  }
36
36
  s.useEffect(() => () => {
37
37
  o.forEach((e) => URL.revokeObjectURL(e));
38
38
  }, []);
39
39
  const H = ["", "残念", "いまいち", "普通", "満足", "最高!"];
40
- return /* @__PURE__ */ r(
40
+ return /* @__PURE__ */ a(
41
41
  "form",
42
42
  {
43
43
  "data-slot": "review-form",
@@ -45,11 +45,11 @@ function K({
45
45
  "flex flex-col gap-4 rounded-xl bg-[var(--Surface-Primary)] p-4",
46
46
  j
47
47
  ),
48
- onSubmit: B,
48
+ onSubmit: M,
49
49
  ...S,
50
50
  children: [
51
- d && /* @__PURE__ */ r("div", { className: "flex items-center gap-2 rounded-lg bg-[var(--Surface-Secondary)] p-3", children: [
52
- b && /* @__PURE__ */ a(
51
+ d && /* @__PURE__ */ a("div", { className: "flex items-center gap-2 rounded-lg bg-[var(--Surface-Secondary)] p-3", children: [
52
+ b && /* @__PURE__ */ r(
53
53
  "img",
54
54
  {
55
55
  src: b,
@@ -57,11 +57,11 @@ function K({
57
57
  className: "size-12 shrink-0 rounded-lg object-cover"
58
58
  }
59
59
  ),
60
- /* @__PURE__ */ a("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: d })
60
+ /* @__PURE__ */ r("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: d })
61
61
  ] }),
62
- /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-2", children: [
63
- /* @__PURE__ */ a("p", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: "評価を選択してください" }),
64
- /* @__PURE__ */ a("div", { className: "flex items-center gap-1", role: "radiogroup", "aria-label": "星評価", children: [1, 2, 3, 4, 5].map((e) => /* @__PURE__ */ a(
62
+ /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-2", children: [
63
+ /* @__PURE__ */ r("p", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: "評価を選択してください" }),
64
+ /* @__PURE__ */ r("div", { className: "flex items-center gap-1", role: "radiogroup", "aria-label": "星評価", children: [1, 2, 3, 4, 5].map((e) => /* @__PURE__ */ r(
65
65
  "button",
66
66
  {
67
67
  type: "button",
@@ -72,72 +72,72 @@ function K({
72
72
  onClick: () => T(e),
73
73
  onMouseEnter: () => y(e),
74
74
  onMouseLeave: () => y(0),
75
- children: /* @__PURE__ */ a(
75
+ children: /* @__PURE__ */ r(
76
76
  A,
77
77
  {
78
78
  size: 32,
79
79
  className: k(
80
80
  "transition-colors",
81
- e <= u ? "text-[var(--Brand-Cake-Orange)]" : "text-[var(--Border-Medium-Emphasis)]"
81
+ e <= u ? "text-[var(--Brand-Cake-Orange)]" : "text-[var(--Border-Control,var(--Border-Medium-Emphasis))]"
82
82
  )
83
83
  }
84
84
  )
85
85
  },
86
86
  e
87
87
  )) }),
88
- u > 0 && /* @__PURE__ */ a("p", { className: "typo-body-sm text-[var(--Text-Accent-Primary)]", children: H[u] })
88
+ u > 0 && /* @__PURE__ */ r("p", { className: "typo-body-sm text-[var(--Text-Accent-Primary)]", children: H[u] })
89
89
  ] }),
90
- /* @__PURE__ */ r("div", { className: "flex flex-col gap-1.5", children: [
91
- /* @__PURE__ */ a(
90
+ /* @__PURE__ */ a("div", { className: "flex flex-col gap-1.5", children: [
91
+ /* @__PURE__ */ r(
92
92
  D,
93
93
  {
94
94
  placeholder: "商品の感想を書いてください(任意)",
95
95
  value: f,
96
- onChange: (e) => O(e.target.value.slice(0, x)),
96
+ onChange: (e) => B(e.target.value.slice(0, x)),
97
97
  rows: 5,
98
98
  className: "resize-none"
99
99
  }
100
100
  ),
101
- /* @__PURE__ */ r("p", { className: "self-end typo-body-xs text-[var(--Text-Low-Emphasis)]", children: [
101
+ /* @__PURE__ */ a("p", { className: "self-end typo-body-xs text-[var(--Text-Low-Emphasis)]", children: [
102
102
  f.length,
103
103
  " / ",
104
104
  x
105
105
  ] })
106
106
  ] }),
107
- /* @__PURE__ */ r("div", { className: "flex flex-col gap-2", children: [
108
- /* @__PURE__ */ r("p", { className: "typo-label-sm text-[var(--Text-Medium-Emphasis)]", children: [
107
+ /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
108
+ /* @__PURE__ */ a("p", { className: "typo-label-sm text-[var(--Text-Medium-Emphasis)]", children: [
109
109
  "写真を追加(最大",
110
110
  m,
111
111
  "枚)"
112
112
  ] }),
113
- /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-2", children: [
114
- o.map((e, t) => /* @__PURE__ */ r("div", { className: "relative size-20 overflow-hidden rounded-lg", children: [
115
- /* @__PURE__ */ a("img", { src: e, alt: `添付画像${t + 1}`, className: "size-full object-cover" }),
116
- /* @__PURE__ */ a(
113
+ /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-2", children: [
114
+ o.map((e, t) => /* @__PURE__ */ a("div", { className: "relative size-20 overflow-hidden rounded-lg", children: [
115
+ /* @__PURE__ */ r("img", { src: e, alt: `添付画像${t + 1}`, className: "size-full object-cover" }),
116
+ /* @__PURE__ */ r(
117
117
  "button",
118
118
  {
119
119
  type: "button",
120
- onClick: () => M(t),
120
+ onClick: () => U(t),
121
121
  className: "absolute right-1 top-1 flex size-5 items-center justify-center rounded-full bg-[var(--Overlay-Dark)] text-[var(--Text-on-Inverse)] transition-colors hover:bg-[var(--Overlay-Dark)]",
122
122
  "aria-label": `画像${t + 1}を削除`,
123
- children: /* @__PURE__ */ a(P, { className: "size-3" })
123
+ children: /* @__PURE__ */ r(P, { className: "size-3" })
124
124
  }
125
125
  )
126
126
  ] }, t)),
127
- p.length < m && /* @__PURE__ */ r(
127
+ p.length < m && /* @__PURE__ */ a(
128
128
  "button",
129
129
  {
130
130
  type: "button",
131
131
  onClick: () => n.current?.click(),
132
- className: "flex size-20 flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-[var(--Border-Medium-Emphasis)] text-[var(--Text-Low-Emphasis)] transition-colors hover:border-[var(--Border-High-Emphasis)] hover:text-[var(--Text-Medium-Emphasis)]",
132
+ className: "flex size-20 flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-[var(--Border-Control,var(--Border-Medium-Emphasis))] text-[var(--Text-Low-Emphasis)] transition-colors hover:border-[var(--Border-High-Emphasis)] hover:text-[var(--Text-Medium-Emphasis)]",
133
133
  "aria-label": "写真を追加",
134
134
  children: [
135
- /* @__PURE__ */ a(I, { size: 20 }),
136
- /* @__PURE__ */ a("span", { className: "typo-body-xs", children: "追加" })
135
+ /* @__PURE__ */ r(I, { size: 20 }),
136
+ /* @__PURE__ */ r("span", { className: "typo-body-xs", children: "追加" })
137
137
  ]
138
138
  }
139
139
  ),
140
- /* @__PURE__ */ a(
140
+ /* @__PURE__ */ r(
141
141
  "input",
142
142
  {
143
143
  ref: n,
@@ -145,13 +145,13 @@ function K({
145
145
  accept: "image/*",
146
146
  multiple: !0,
147
147
  className: "hidden",
148
- onChange: U
148
+ onChange: O
149
149
  }
150
150
  )
151
151
  ] })
152
152
  ] }),
153
- /* @__PURE__ */ r("div", { className: "flex gap-3", children: [
154
- h && /* @__PURE__ */ a(
153
+ /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
154
+ h && /* @__PURE__ */ r(
155
155
  E,
156
156
  {
157
157
  type: "button",
@@ -162,7 +162,7 @@ function K({
162
162
  children: "キャンセル"
163
163
  }
164
164
  ),
165
- /* @__PURE__ */ a(
165
+ /* @__PURE__ */ r(
166
166
  E,
167
167
  {
168
168
  type: "submit",
@@ -1,17 +1,17 @@
1
1
  import { jsxs as e, jsx as a } from "react/jsx-runtime";
2
2
  import "react";
3
- import u from "iconsax-reactjs/dist/esm/Location.js";
4
- import N from "iconsax-reactjs/dist/esm/Star1.js";
5
- import { StarHalf as g } from "lucide-react";
3
+ import y from "iconsax-reactjs/dist/esm/Location.js";
4
+ import b from "iconsax-reactjs/dist/esm/Star1.js";
5
+ import { StarHalf as w } from "lucide-react";
6
6
  import { cn as m } from "../../lib/utils.js";
7
- import { Button as y } from "../foundations/button.js";
8
- import { BookmarkRibbonIcon as w } from "./product-card.js";
9
- function E({ rating: r }) {
7
+ import { Button as E } from "../foundations/button.js";
8
+ import { BookmarkRibbonIcon as S } from "./product-card.js";
9
+ function z({ rating: r }) {
10
10
  const t = Math.floor(r), l = r - t >= 0.5, i = [];
11
11
  for (let s = 1; s <= 5; s++)
12
12
  s <= t ? i.push(
13
13
  /* @__PURE__ */ a(
14
- N,
14
+ b,
15
15
  {
16
16
  size: 12,
17
17
  className: "fill-[var(--Brand-Cake-Orange)] text-[var(--Brand-Cake-Orange)]",
@@ -21,7 +21,7 @@ function E({ rating: r }) {
21
21
  )
22
22
  ) : l && s === t + 1 ? i.push(
23
23
  /* @__PURE__ */ a(
24
- g,
24
+ w,
25
25
  {
26
26
  className: "size-3 fill-[var(--Brand-Cake-Orange)] text-[var(--Brand-Cake-Orange)]"
27
27
  },
@@ -29,7 +29,7 @@ function E({ rating: r }) {
29
29
  )
30
30
  ) : i.push(
31
31
  /* @__PURE__ */ a(
32
- N,
32
+ b,
33
33
  {
34
34
  size: 12,
35
35
  className: "text-[var(--Border-Medium-Emphasis)]"
@@ -39,7 +39,7 @@ function E({ rating: r }) {
39
39
  );
40
40
  return /* @__PURE__ */ a("div", { className: "flex items-center", children: i });
41
41
  }
42
- function O({
42
+ function M({
43
43
  name: r,
44
44
  ruby: t,
45
45
  productImageUrl: l,
@@ -51,12 +51,14 @@ function O({
51
51
  isBookmarked: d = !1,
52
52
  onBookmarkToggle: v,
53
53
  href: c,
54
- variant: b = "default",
54
+ variant: u = "default",
55
+ linkComponent: g,
55
56
  className: x,
56
57
  ...f
57
58
  }) {
58
- return b === "compact" ? /* @__PURE__ */ e(
59
- c ? "a" : "div",
59
+ const N = g ?? "a";
60
+ return u === "compact" ? /* @__PURE__ */ e(
61
+ c ? N : "div",
60
62
  {
61
63
  ...c ? { href: c } : {},
62
64
  "data-slot": "shop-card",
@@ -77,7 +79,7 @@ function O({
77
79
  /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: [
78
80
  /* @__PURE__ */ a("p", { className: "truncate typo-label-md text-[var(--Text-High-Emphasis)]", children: r }),
79
81
  o && /* @__PURE__ */ e("p", { className: "flex items-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
80
- /* @__PURE__ */ a(u, { size: 12, className: "shrink-0" }),
82
+ /* @__PURE__ */ a(y, { size: 12, className: "shrink-0" }),
81
83
  o
82
84
  ] })
83
85
  ] })
@@ -127,7 +129,7 @@ function O({
127
129
  o && /* @__PURE__ */ a("p", { className: "line-clamp-2 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: o }),
128
130
  /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: [
129
131
  s !== void 0 && s >= 1 && /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: [
130
- /* @__PURE__ */ a(E, { rating: s }),
132
+ /* @__PURE__ */ a(z, { rating: s }),
131
133
  /* @__PURE__ */ a("span", { className: "typo-body-sm text-[var(--Text-High-Emphasis)]", children: s.toFixed(1) }),
132
134
  p !== void 0 && /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
133
135
  "(",
@@ -143,7 +145,7 @@ function O({
143
145
  ] })
144
146
  ] }),
145
147
  v && /* @__PURE__ */ a(
146
- y,
148
+ E,
147
149
  {
148
150
  variant: "ghost",
149
151
  size: "icon",
@@ -156,7 +158,7 @@ function O({
156
158
  ),
157
159
  "aria-label": d ? "お気に入り解除" : "お気に入りに追加",
158
160
  children: /* @__PURE__ */ a(
159
- w,
161
+ S,
160
162
  {
161
163
  size: 20,
162
164
  filled: d
@@ -166,7 +168,7 @@ function O({
166
168
  )
167
169
  ] })
168
170
  ] }),
169
- c && /* @__PURE__ */ a("a", { href: c, className: "absolute inset-0", "aria-label": r, children: /* @__PURE__ */ e("span", { className: "sr-only", children: [
171
+ c && /* @__PURE__ */ a(N, { href: c, className: "absolute inset-0", "aria-label": r, children: /* @__PURE__ */ e("span", { className: "sr-only", children: [
170
172
  r,
171
173
  "のショップページへ"
172
174
  ] }) })
@@ -175,5 +177,5 @@ function O({
175
177
  );
176
178
  }
177
179
  export {
178
- O as ShopCard
180
+ M as ShopCard
179
181
  };
@@ -1,68 +1,70 @@
1
1
  "use client";
2
- import { jsx as o, jsxs as c } from "react/jsx-runtime";
2
+ import { jsx as r, jsxs as c } from "react/jsx-runtime";
3
3
  import "react";
4
4
  import { ChevronDownIcon as d } from "lucide-react";
5
- import { Accordion as r } from "radix-ui";
5
+ import { Accordion as t } from "radix-ui";
6
6
  import { cn as i } from "../../lib/utils.js";
7
- function b({
8
- ...e
7
+ import { FORCED_COLORS_FOCUS as l } from "../../lib/focus-ring.js";
8
+ function g({
9
+ ...o
9
10
  }) {
10
- return /* @__PURE__ */ o(r.Root, { "data-slot": "accordion", ...e });
11
+ return /* @__PURE__ */ r(t.Root, { "data-slot": "accordion", ...o });
11
12
  }
12
- function g({
13
- className: e,
14
- ...t
13
+ function h({
14
+ className: o,
15
+ ...e
15
16
  }) {
16
- return /* @__PURE__ */ o(
17
- r.Item,
17
+ return /* @__PURE__ */ r(
18
+ t.Item,
18
19
  {
19
20
  "data-slot": "accordion-item",
20
- className: i("border-b border-[var(--Border-Medium-Emphasis)] last:border-b-0", e),
21
- ...t
21
+ className: i("border-b border-[var(--Border-Medium-Emphasis)] last:border-b-0", o),
22
+ ...e
22
23
  }
23
24
  );
24
25
  }
25
- function v({
26
- className: e,
27
- children: t,
26
+ function x({
27
+ className: o,
28
+ children: e,
28
29
  headingLevel: n = 3,
29
30
  ...a
30
31
  }) {
31
32
  const s = `h${n}`;
32
- return /* @__PURE__ */ o(r.Header, { asChild: !0, children: /* @__PURE__ */ o(s, { className: "flex", children: /* @__PURE__ */ c(
33
- r.Trigger,
33
+ return /* @__PURE__ */ r(t.Header, { asChild: !0, children: /* @__PURE__ */ r(s, { className: "flex", children: /* @__PURE__ */ c(
34
+ t.Trigger,
34
35
  {
35
36
  "data-slot": "accordion-trigger",
36
37
  className: i(
37
- "flex w-full flex-1 cursor-pointer items-center justify-between gap-4 py-4 text-left typo-label-md text-[var(--Text-High-Emphasis)] transition-all outline-none hover:bg-[var(--Surface-Tertiary)]/60 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
38
- e
38
+ "flex w-full flex-1 cursor-pointer items-center justify-between gap-4 py-4 text-left typo-label-md text-[var(--Text-High-Emphasis)] transition-all outline-none hover:bg-[var(--Surface-Tertiary)]/60 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--ring)_50%,transparent))] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
39
+ l,
40
+ o
39
41
  ),
40
42
  ...a,
41
43
  children: [
42
- t,
43
- /* @__PURE__ */ o(d, { className: "pointer-events-none size-4 shrink-0 text-[var(--Text-Medium-Emphasis)] transition-transform duration-[var(--Motion-Duration-Base)]" })
44
+ e,
45
+ /* @__PURE__ */ r(d, { className: "pointer-events-none size-4 shrink-0 text-[var(--Text-Medium-Emphasis)] transition-transform duration-[var(--Motion-Duration-Base)]" })
44
46
  ]
45
47
  }
46
48
  ) }) });
47
49
  }
48
- function h({
49
- className: e,
50
- children: t,
50
+ function C({
51
+ className: o,
52
+ children: e,
51
53
  ...n
52
54
  }) {
53
- return /* @__PURE__ */ o(
54
- r.Content,
55
+ return /* @__PURE__ */ r(
56
+ t.Content,
55
57
  {
56
58
  "data-slot": "accordion-content",
57
59
  className: "overflow-hidden typo-body-md data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
58
60
  ...n,
59
- children: /* @__PURE__ */ o("div", { className: i("pt-0 pb-4", e), children: t })
61
+ children: /* @__PURE__ */ r("div", { className: i("pt-0 pb-4", o), children: e })
60
62
  }
61
63
  );
62
64
  }
63
65
  export {
64
- b as Accordion,
65
- h as AccordionContent,
66
- g as AccordionItem,
67
- v as AccordionTrigger
66
+ g as Accordion,
67
+ C as AccordionContent,
68
+ h as AccordionItem,
69
+ x as AccordionTrigger
68
70
  };
@@ -34,7 +34,7 @@ function g({
34
34
  }
35
35
  );
36
36
  }
37
- function D({
37
+ function h({
38
38
  className: a,
39
39
  size: t = "default",
40
40
  ...r
@@ -46,7 +46,6 @@ function D({
46
46
  {
47
47
  "data-slot": "alert-dialog-content",
48
48
  "data-size": t,
49
- onOpenAutoFocus: (i) => i.preventDefault(),
50
49
  className: l(
51
50
  // 画面端との余白は上下左右 40px(calc(100%-5rem))。
52
51
  // 幅上限は端末幅に応じて: SP は端末幅-80px に追従 / sm 以上は
@@ -59,7 +58,7 @@ function D({
59
58
  )
60
59
  ] });
61
60
  }
62
- function h({
61
+ function D({
63
62
  className: a,
64
63
  ...t
65
64
  }) {
@@ -154,10 +153,10 @@ export {
154
153
  x as AlertDialog,
155
154
  w as AlertDialogAction,
156
155
  N as AlertDialogCancel,
157
- D as AlertDialogContent,
156
+ h as AlertDialogContent,
158
157
  y as AlertDialogDescription,
159
158
  A as AlertDialogFooter,
160
- h as AlertDialogHeader,
159
+ D as AlertDialogHeader,
161
160
  g as AlertDialogOverlay,
162
161
  n as AlertDialogPortal,
163
162
  z as AlertDialogTitle,
@@ -4,7 +4,7 @@ import { cva as o } from "class-variance-authority";
4
4
  import { Slot as s } from "radix-ui";
5
5
  import { cn as v } from "../../lib/utils.js";
6
6
  const u = o(
7
- "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 typo-label-sm whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
7
+ "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 typo-label-sm whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--ring)_50%,transparent))] aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
8
8
  {
9
9
  variants: {
10
10
  variant: {
@@ -32,8 +32,8 @@ const u = o(
32
32
  }
33
33
  );
34
34
  function m({
35
- className: r,
36
- variant: e = "default",
35
+ className: e,
36
+ variant: r = "default",
37
37
  asChild: a = !1,
38
38
  ...t
39
39
  }) {
@@ -42,8 +42,8 @@ function m({
42
42
  i,
43
43
  {
44
44
  "data-slot": "badge",
45
- "data-variant": e,
46
- className: v(u({ variant: e }), r),
45
+ "data-variant": r,
46
+ className: v(u({ variant: r }), e),
47
47
  ...t
48
48
  }
49
49
  );
@@ -1,12 +1,12 @@
1
- import { jsx as a, jsxs as n } from "react/jsx-runtime";
1
+ import { jsx as a, jsxs as i } from "react/jsx-runtime";
2
2
  import "react";
3
- import { MoreHorizontal as i, ChevronRight as l } from "lucide-react";
4
- import { Slot as m } from "radix-ui";
3
+ import { MoreHorizontal as l, ChevronRight as m } from "lucide-react";
4
+ import { Slot as c } from "radix-ui";
5
5
  import { cn as t } from "../../lib/utils.js";
6
- function f({ ...r }) {
6
+ function g({ ...r }) {
7
7
  return /* @__PURE__ */ a("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...r });
8
8
  }
9
- function g({ className: r, ...e }) {
9
+ function x({ className: r, ...e }) {
10
10
  return /* @__PURE__ */ a(
11
11
  "ol",
12
12
  {
@@ -19,7 +19,7 @@ function g({ className: r, ...e }) {
19
19
  }
20
20
  );
21
21
  }
22
- function x({ className: r, ...e }) {
22
+ function h({ className: r, ...e }) {
23
23
  return /* @__PURE__ */ a(
24
24
  "li",
25
25
  {
@@ -29,22 +29,23 @@ function x({ className: r, ...e }) {
29
29
  }
30
30
  );
31
31
  }
32
- function h({
32
+ function N({
33
33
  asChild: r,
34
- className: e,
35
- ...o
34
+ linkComponent: e,
35
+ className: o,
36
+ ...s
36
37
  }) {
37
- const s = r ? m.Root : "a";
38
+ const n = r ? c.Root : e ?? "a";
38
39
  return /* @__PURE__ */ a(
39
- s,
40
+ n,
40
41
  {
41
42
  "data-slot": "breadcrumb-link",
42
- className: t("transition-colors hover:text-foreground", e),
43
- ...o
43
+ className: t("transition-colors hover:text-foreground", o),
44
+ ...s
44
45
  }
45
46
  );
46
47
  }
47
- function N({ className: r, ...e }) {
48
+ function B({ className: r, ...e }) {
48
49
  return /* @__PURE__ */ a(
49
50
  "span",
50
51
  {
@@ -57,7 +58,7 @@ function N({ className: r, ...e }) {
57
58
  }
58
59
  );
59
60
  }
60
- function B({
61
+ function y({
61
62
  children: r,
62
63
  className: e,
63
64
  ...o
@@ -70,15 +71,15 @@ function B({
70
71
  "aria-hidden": "true",
71
72
  className: t("[&>svg]:size-3.5", e),
72
73
  ...o,
73
- children: r ?? /* @__PURE__ */ a(l, {})
74
+ children: r ?? /* @__PURE__ */ a(m, {})
74
75
  }
75
76
  );
76
77
  }
77
- function y({
78
+ function k({
78
79
  className: r,
79
80
  ...e
80
81
  }) {
81
- return /* @__PURE__ */ n(
82
+ return /* @__PURE__ */ i(
82
83
  "span",
83
84
  {
84
85
  "data-slot": "breadcrumb-ellipsis",
@@ -87,18 +88,18 @@ function y({
87
88
  className: t("flex size-9 shrink-0 items-center justify-center", r),
88
89
  ...e,
89
90
  children: [
90
- /* @__PURE__ */ a(i, { className: "size-4" }),
91
+ /* @__PURE__ */ a(l, { className: "size-4" }),
91
92
  /* @__PURE__ */ a("span", { className: "sr-only", children: "More" })
92
93
  ]
93
94
  }
94
95
  );
95
96
  }
96
97
  export {
97
- f as Breadcrumb,
98
- y as BreadcrumbEllipsis,
99
- x as BreadcrumbItem,
100
- h as BreadcrumbLink,
101
- g as BreadcrumbList,
102
- N as BreadcrumbPage,
103
- B as BreadcrumbSeparator
98
+ g as Breadcrumb,
99
+ k as BreadcrumbEllipsis,
100
+ h as BreadcrumbItem,
101
+ N as BreadcrumbLink,
102
+ x as BreadcrumbList,
103
+ B as BreadcrumbPage,
104
+ y as BreadcrumbSeparator
104
105
  };