@vkzstudio/muza-ui 1.6.0 → 1.7.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 (48) hide show
  1. package/dist/components/ArticleCard/ArticleCard.d.ts.map +1 -1
  2. package/dist/components/ArticleCard/ArticleCard.js +161 -170
  3. package/dist/components/CarouselSection/CarouselSection.examples.d.ts +1 -1
  4. package/dist/components/OfferCard/OfferCard.d.ts +45 -17
  5. package/dist/components/OfferCard/OfferCard.d.ts.map +1 -1
  6. package/dist/components/OfferCard/OfferCard.js +180 -266
  7. package/dist/components/OfferCard/OfferCard.stories.d.ts +5 -2
  8. package/dist/components/OfferCard/OfferCard.stories.d.ts.map +1 -1
  9. package/dist/components/PartnerCard/PartnerCard.d.ts +90 -26
  10. package/dist/components/PartnerCard/PartnerCard.d.ts.map +1 -1
  11. package/dist/components/PartnerCard/PartnerCard.js +323 -264
  12. package/dist/components/PartnerCard/PartnerCard.stories.d.ts +6 -0
  13. package/dist/components/PartnerCard/PartnerCard.stories.d.ts.map +1 -1
  14. package/dist/components/PriceTag/PriceTag.d.ts +37 -0
  15. package/dist/components/PriceTag/PriceTag.d.ts.map +1 -0
  16. package/dist/components/PriceTag/PriceTag.js +43 -0
  17. package/dist/components/PriceTag/PriceTag.stories.d.ts +8 -0
  18. package/dist/components/PriceTag/PriceTag.stories.d.ts.map +1 -0
  19. package/dist/components/PriceTag/index.d.ts +2 -0
  20. package/dist/components/PriceTag/index.d.ts.map +1 -0
  21. package/dist/components/PriceTag/index.js +5 -0
  22. package/dist/components/Tooltip/Tooltip.d.ts +18 -7
  23. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
  24. package/dist/components/Tooltip/Tooltip.js +116 -68
  25. package/dist/components/Tooltip/Tooltip.stories.d.ts +1 -0
  26. package/dist/components/Tooltip/Tooltip.stories.d.ts.map +1 -1
  27. package/dist/components/VoucherCard/VoucherCard.d.ts +24 -1
  28. package/dist/components/VoucherCard/VoucherCard.d.ts.map +1 -1
  29. package/dist/components/VoucherCard/VoucherCard.js +68 -76
  30. package/dist/components/VoucherCard/VoucherCard.stories.d.ts +1 -0
  31. package/dist/components/VoucherCard/VoucherCard.stories.d.ts.map +1 -1
  32. package/dist/components/index.d.ts +1 -0
  33. package/dist/components/index.d.ts.map +1 -1
  34. package/dist/components/internal/CardCompactShell.d.ts +80 -0
  35. package/dist/components/internal/CardCompactShell.d.ts.map +1 -0
  36. package/dist/components/internal/CardCompactShell.js +148 -0
  37. package/dist/components/internal/CardImageSlot.d.ts +56 -0
  38. package/dist/components/internal/CardImageSlot.d.ts.map +1 -0
  39. package/dist/components/internal/CardImageSlot.js +85 -0
  40. package/dist/index.js +178 -175
  41. package/dist/muza-ui.css +1 -1
  42. package/dist/styles/token-sizes.css +16 -4
  43. package/dist/utils/cn.d.ts.map +1 -1
  44. package/dist/utils/cn.js +6 -3
  45. package/dist/utils/disabledLinkProps.d.ts +8 -1
  46. package/dist/utils/disabledLinkProps.d.ts.map +1 -1
  47. package/dist/utils/disabledLinkProps.js +0 -1
  48. package/package.json +2 -1
@@ -1,43 +1,45 @@
1
- import { jsx as e, jsxs as r, Fragment as D } from "react/jsx-runtime";
2
- import * as w from "react";
3
- import { cva as z } from "class-variance-authority";
4
- import { cn as s } from "../../utils/cn.js";
5
- import { disabledLinkProps as Q } from "../../utils/disabledLinkProps.js";
6
- import { DotDivider as U } from "../DotDivider/DotDivider.js";
7
- import { Flex as f } from "../Flex/Flex.js";
8
- import { HeartButton as X } from "../HeartButton/HeartButton.js";
9
- import { Rating as Z } from "../Rating/Rating.js";
10
- import { Skeleton as o } from "../Skeleton/Skeleton.js";
11
- import { Tag as ee } from "../Tag/Tag.js";
12
- import { Typography as n } from "../Typography/Typography.js";
13
- const ae = z(
1
+ import { jsx as e, jsxs as r, Fragment as Z } from "react/jsx-runtime";
2
+ import * as C from "react";
3
+ import { cva as w } from "class-variance-authority";
4
+ import { cn as i } from "../../utils/cn.js";
5
+ import { disabledLinkProps as ee } from "../../utils/disabledLinkProps.js";
6
+ import { DotDivider as ae } from "../DotDivider/DotDivider.js";
7
+ import { Flex as g } from "../Flex/Flex.js";
8
+ import { HeartButton as te } from "../HeartButton/HeartButton.js";
9
+ import { PriceTag as re } from "../PriceTag/PriceTag.js";
10
+ import { Rating as oe } from "../Rating/Rating.js";
11
+ import { Skeleton as n } from "../Skeleton/Skeleton.js";
12
+ import { Typography as d } from "../Typography/Typography.js";
13
+ import { cardCompactFillClass as E, cardCompactContainerClass as ie, CardCompactShell as se, CardCompactSkeleton as ce } from "../internal/CardCompactShell.js";
14
+ import { CardImageSlot as le, hasImageContent as ne } from "../internal/CardImageSlot.js";
15
+ const de = w(
14
16
  "group relative inline-flex border border-solid transition-colors focus-visible:outline-none data-[disabled=true]:pointer-events-none",
15
17
  {
16
18
  variants: {
17
19
  variant: {
18
- compact: "flex-col overflow-hidden rounded-comp-offer-card-compact-radius border-comp-offer-card-stroke-default has-[a:focus-visible]:border-comp-offer-card-stroke-focused has-[a:hover]:border-comp-offer-card-stroke-hover data-[disabled=true]:border-comp-offer-card-stroke-disabled",
20
+ compact: ie,
19
21
  search: "flex-row gap-comp-offer-card-search-gap border-transparent"
20
22
  },
21
- type: {
22
- default: "",
23
- promo: ""
23
+ isTinted: {
24
+ true: "",
25
+ false: ""
24
26
  }
25
27
  },
26
28
  compoundVariants: [
27
29
  {
28
30
  variant: "compact",
29
- type: "default",
30
- class: "bg-comp-offer-card-fill-def-default has-[a:focus-visible]:bg-comp-offer-card-fill-def-focused has-[a:hover]:bg-comp-offer-card-fill-def-hover data-[disabled=true]:bg-comp-offer-card-fill-def-disabled"
31
+ isTinted: !1,
32
+ class: E.default
31
33
  },
32
34
  {
33
35
  variant: "compact",
34
- type: "promo",
35
- class: "bg-comp-offer-card-fill-promo-default has-[a:focus-visible]:bg-comp-offer-card-fill-promo-focused has-[a:hover]:bg-comp-offer-card-fill-promo-hover data-[disabled=true]:bg-comp-offer-card-fill-promo-disabled"
36
+ isTinted: !0,
37
+ class: E.tinted
36
38
  }
37
39
  ],
38
- defaultVariants: { variant: "compact", type: "default" }
40
+ defaultVariants: { variant: "compact", isTinted: !1 }
39
41
  }
40
- ), re = z("", {
42
+ ), me = w("", {
41
43
  variants: {
42
44
  variant: {
43
45
  compact: "text-text-dark-primary-def group-has-[a:focus-visible]:text-text-brand-focused group-has-[a:hover]:text-text-brand-hover group-data-[disabled=true]:text-text-dark-disabled",
@@ -45,7 +47,7 @@ const ae = z(
45
47
  }
46
48
  },
47
49
  defaultVariants: { variant: "compact" }
48
- }), oe = z("", {
50
+ }), fe = w("", {
49
51
  variants: {
50
52
  variant: {
51
53
  compact: "mt-auto line-clamp-1 text-text-dark-secondary group-has-[a:focus-visible]:text-text-brand-focused group-data-[disabled=true]:text-text-dark-disabled",
@@ -53,18 +55,18 @@ const ae = z(
53
55
  }
54
56
  },
55
57
  defaultVariants: { variant: "compact" }
56
- }), k = ({ rating: c, ratingCount: a, disabled: t }) => /* @__PURE__ */ r(f, { align: "center", gap: "2xs", children: [
57
- /* @__PURE__ */ e(Z, { value: c, allowHalf: !0, disabled: t }),
58
+ }), k = ({ rating: c, ratingCount: a, disabled: o }) => /* @__PURE__ */ r(g, { align: "center", gap: "2xs", children: [
59
+ /* @__PURE__ */ e(oe, { value: c, allowHalf: !0, disabled: o }),
58
60
  a != null && /* @__PURE__ */ r(
59
- n,
61
+ d,
60
62
  {
61
63
  component: "span",
62
64
  variant: "body",
63
65
  size: "sm",
64
66
  weight: "regular",
65
67
  fixY: !0,
66
- className: s(
67
- t ? "text-text-dark-disabled" : "text-text-dark-primary-def"
68
+ className: i(
69
+ o ? "text-text-dark-disabled" : "text-text-dark-primary-def"
68
70
  ),
69
71
  children: [
70
72
  "(",
@@ -75,83 +77,39 @@ const ae = z(
75
77
  )
76
78
  ] });
77
79
  k.displayName = "OfferCard.RatingRow";
78
- const E = ({
80
+ const L = ({
79
81
  variant: c = "compact",
80
82
  color: a = "default",
81
- type: t = "default",
82
- className: l,
83
+ isTinted: o = !1,
84
+ className: s,
83
85
  ...m
84
- }) => c === "compact" ? /* @__PURE__ */ r(
85
- "div",
86
+ }) => c === "compact" ? /* @__PURE__ */ e(
87
+ ce,
86
88
  {
87
- className: s(
88
- "inline-flex flex-col overflow-hidden rounded-comp-offer-card-compact-radius border border-solid border-comp-offer-card-stroke-default",
89
- t === "promo" ? "bg-comp-offer-card-fill-promo-default" : "bg-comp-offer-card-fill-def-default",
90
- l
91
- ),
92
- ...m,
93
- children: [
94
- /* @__PURE__ */ r("div", { className: "relative aspect-[288/162] w-full shrink-0 overflow-hidden", children: [
95
- /* @__PURE__ */ e(
96
- o,
97
- {
98
- color: a,
99
- className: "absolute inset-0 size-full rounded-none"
100
- }
101
- ),
102
- /* @__PURE__ */ r("div", { className: "absolute top-comp-offer-card-compact-p-img right-comp-offer-card-compact-p-img left-comp-offer-card-compact-p-img flex items-center justify-between", children: [
103
- /* @__PURE__ */ e(
104
- o,
105
- {
106
- color: a,
107
- className: "h-comp-tag-h-def w-16 rounded-full"
108
- }
109
- ),
110
- /* @__PURE__ */ e(
111
- o,
112
- {
113
- color: a,
114
- className: "size-comp-button-h-xs rounded-full"
115
- }
116
- )
117
- ] })
118
- ] }),
119
- /* @__PURE__ */ r(
120
- f,
121
- {
122
- direction: "column",
123
- flex: 1,
124
- gap: "2xs",
125
- className: "px-comp-offer-card-compact-p pt-comp-offer-card-compact-p-top pb-comp-offer-card-compact-p",
126
- children: [
127
- /* @__PURE__ */ e(o, { color: a, className: "h-5 w-full" }),
128
- /* @__PURE__ */ e(o, { color: a, className: "h-5 w-3/4" }),
129
- /* @__PURE__ */ e(o, { color: a, className: "mt-2xs h-4 w-32" }),
130
- /* @__PURE__ */ e(o, { color: a, className: "mt-2xs h-4 w-24" })
131
- ]
132
- }
133
- )
134
- ]
89
+ color: a,
90
+ isTinted: o,
91
+ className: s,
92
+ ...m
135
93
  }
136
94
  ) : /* @__PURE__ */ r(
137
95
  "div",
138
96
  {
139
- className: s(
97
+ className: i(
140
98
  "inline-flex flex-row gap-comp-offer-card-search-gap",
141
- l
99
+ s
142
100
  ),
143
101
  ...m,
144
102
  children: [
145
103
  /* @__PURE__ */ r("div", { className: "relative h-comp-offer-card-search-h-img w-comp-offer-card-search-w-img shrink-0 overflow-hidden rounded-comp-offer-card-search-radius-img", children: [
146
104
  /* @__PURE__ */ e(
147
- o,
105
+ n,
148
106
  {
149
107
  color: a,
150
108
  className: "absolute inset-0 size-full rounded-none"
151
109
  }
152
110
  ),
153
111
  /* @__PURE__ */ e("div", { className: "absolute top-comp-offer-card-search-p-img left-comp-offer-card-search-p-img", children: /* @__PURE__ */ e(
154
- o,
112
+ n,
155
113
  {
156
114
  color: a,
157
115
  className: "size-comp-button-h-xs rounded-full"
@@ -159,241 +117,197 @@ const E = ({
159
117
  ) })
160
118
  ] }),
161
119
  /* @__PURE__ */ r(
162
- f,
120
+ g,
163
121
  {
164
122
  direction: "column",
165
123
  flex: 1,
166
124
  gap: "sm",
167
125
  className: "min-w-0 gap-comp-offer-card-search-gap-text pt-comp-offer-card-search-p-top-text",
168
126
  children: [
169
- /* @__PURE__ */ e(o, { color: a, className: "h-5 w-full" }),
170
- /* @__PURE__ */ e(o, { color: a, className: "h-4 w-40" }),
171
- /* @__PURE__ */ e(o, { color: a, className: "h-4 w-32" })
127
+ /* @__PURE__ */ e(n, { color: a, className: "h-5 w-full" }),
128
+ /* @__PURE__ */ e(n, { color: a, className: "h-4 w-40" }),
129
+ /* @__PURE__ */ e(n, { color: a, className: "h-4 w-32" })
172
130
  ]
173
131
  }
174
132
  )
175
133
  ]
176
134
  }
177
135
  );
178
- E.displayName = "OfferCard.Skeleton";
179
- const y = ({
180
- image: c,
181
- alt: a,
182
- wrapperClassName: t,
183
- children: l
184
- }) => /* @__PURE__ */ r("div", { className: t, children: [
185
- /* @__PURE__ */ e(
186
- "div",
187
- {
188
- className: s(
189
- "absolute inset-0 overflow-hidden",
190
- "[&>img]:size-full [&>img]:object-cover",
191
- "transition-transform duration-300 ease-out group-hover:scale-110",
192
- "group-data-[disabled=true]:opacity-50",
193
- "group-data-[disabled=true]:grayscale",
194
- "group-data-[disabled=true]:group-hover:scale-100"
195
- ),
196
- children: typeof c == "string" ? /* @__PURE__ */ e("img", { src: c, alt: a }) : c
197
- }
198
- ),
199
- l
200
- ] });
201
- y.displayName = "OfferCard.ImageSlot";
202
- const L = w.forwardRef(
136
+ L.displayName = "OfferCard.Skeleton";
137
+ const B = C.forwardRef(
203
138
  (c, a) => {
204
139
  const {
205
- name: t,
206
- image: l,
140
+ name: o,
141
+ image: s,
207
142
  imageAlt: m,
208
- logo: i,
209
- logoAlt: T,
210
- category: C,
211
- description: p,
212
- vendor: u,
213
- rating: b,
214
- ratingCount: j,
215
- favorite: B,
216
- defaultFavorite: O,
217
- onFavoriteChange: h,
218
- favoriteAriaLabel: H,
219
- showFavorite: P = !0,
220
- variant: g = "compact",
221
- type: W = "default",
222
- disabled: d = !1,
223
- asChild: _ = !1,
224
- href: $,
225
- className: q,
226
- children: v,
227
- ...G
228
- } = c, R = m ?? t, V = T ?? `${u ?? t} logo`, J = re({ variant: g }), S = oe({ variant: g }), x = b != null, K = s(
229
- ae({ variant: g, type: W }),
230
- q
231
- ), A = 'outline-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[""] focus-visible:outline-none', F = /* @__PURE__ */ e(
232
- n,
143
+ placeholderIcon: y,
144
+ placeholderColor: z,
145
+ logo: l,
146
+ logoAlt: H,
147
+ category: P,
148
+ description: f,
149
+ vendor: p,
150
+ rating: v,
151
+ ratingCount: O,
152
+ price: A,
153
+ favorite: W,
154
+ defaultFavorite: R,
155
+ onFavoriteChange: u,
156
+ favoriteAriaLabel: _,
157
+ showFavorite: $ = !0,
158
+ variant: h = "compact",
159
+ isTinted: q = !1,
160
+ disabled: t = !1,
161
+ asChild: G = !1,
162
+ href: J,
163
+ className: K,
164
+ children: x,
165
+ ...M
166
+ } = c, S = m ?? o, T = H ?? `${p ?? o} logo`, V = ne(s), Q = me({ variant: h }), F = fe({ variant: h }), b = v != null, U = i(
167
+ de({ variant: h, isTinted: q }),
168
+ K
169
+ ), I = 'outline-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[""] focus-visible:outline-none', j = /* @__PURE__ */ e(
170
+ d,
233
171
  {
234
172
  component: "h3",
235
173
  variant: "title",
236
174
  size: "base",
237
175
  weight: "medium",
238
- className: s("line-clamp-2", J),
239
- children: t
176
+ className: i("line-clamp-2", Q),
177
+ children: o
240
178
  }
241
- ), I = _ && w.isValidElement(v) ? w.cloneElement(
242
- v,
179
+ ), Y = G && C.isValidElement(x) ? C.cloneElement(
180
+ x,
243
181
  {
244
- className: s(A, v.props.className),
245
- ...d ? Q : null
182
+ className: i(I, x.props.className),
183
+ ...t ? ee : null
246
184
  },
247
- F
248
- ) : /* @__PURE__ */ e("a", { href: d ? void 0 : $, className: A, children: F }), Y = P && /* @__PURE__ */ e(
249
- X,
185
+ j
186
+ ) : /* @__PURE__ */ e("a", { href: t ? void 0 : J, className: I, children: j }), D = $ && /* @__PURE__ */ e(
187
+ te,
250
188
  {
251
- active: B,
252
- defaultActive: O,
253
- onClick: h !== void 0 || O !== void 0 ? (se, M) => h == null ? void 0 : h(M) : void 0,
254
- "aria-label": H,
255
- disabled: d,
256
- className: "relative z-10"
189
+ active: W,
190
+ defaultActive: R,
191
+ onClick: u !== void 0 || R !== void 0 ? (he, X) => u == null ? void 0 : u(X) : void 0,
192
+ "aria-label": _,
193
+ disabled: t,
194
+ className: i(
195
+ "relative z-10",
196
+ // Without a photo behind it the default invert (white) heart would
197
+ // be invisible on the light placeholder tint, so switch to the
198
+ // primary-ghost colour ramp.
199
+ !V && [
200
+ "text-comp-button-primary-ghost-text-def hover:text-comp-button-primary-ghost-text-hover focus-visible:text-comp-button-primary-ghost-text-focused",
201
+ "disabled:text-comp-button-primary-ghost-text-disabled data-[disabled=true]:text-comp-button-primary-ghost-text-disabled"
202
+ ]
203
+ )
257
204
  }
258
205
  );
259
206
  let N = null;
260
- return g === "compact" ? N = /* @__PURE__ */ r(D, { children: [
261
- /* @__PURE__ */ r("div", { className: "relative w-full shrink-0", children: [
262
- /* @__PURE__ */ r(
263
- y,
264
- {
265
- image: l,
266
- alt: R,
267
- wrapperClassName: "relative aspect-[288/162] w-full overflow-hidden",
268
- children: [
269
- /* @__PURE__ */ e(
270
- "div",
271
- {
272
- "aria-hidden": "true",
273
- className: "absolute inset-0 bg-gradient-to-t from-black/0 from-50% to-black/70"
274
- }
275
- ),
276
- /* @__PURE__ */ r("div", { className: "absolute top-comp-offer-card-compact-p-img right-comp-offer-card-compact-p-img left-comp-offer-card-compact-p-img flex items-start justify-between gap-sm", children: [
277
- C ? /* @__PURE__ */ e(
278
- ee,
279
- {
280
- variant: "invert",
281
- className: "min-w-[50px] shrink overflow-hidden",
282
- children: C
283
- }
284
- ) : /* @__PURE__ */ e("span", {}),
285
- Y
286
- ] })
287
- ]
288
- }
289
- ),
290
- i && /* @__PURE__ */ e(
291
- "div",
292
- {
293
- className: s(
294
- "pointer-events-none absolute bottom-comp-offer-card-compact-logo-y left-comp-offer-card-compact-logo-x z-10 size-comp-offer-card-compact-logo-size overflow-hidden rounded-full border-2 border-stroke-base-secondary bg-comp-offer-card-fill-def-default",
295
- "[&>img]:size-full [&>img]:object-cover",
296
- "group-data-[disabled=true]:grayscale"
297
- ),
298
- children: typeof i == "string" ? /* @__PURE__ */ e("img", { src: i, alt: V }) : i
299
- }
300
- )
301
- ] }),
302
- /* @__PURE__ */ r(
303
- f,
304
- {
305
- direction: "column",
306
- flex: 1,
307
- gap: "2xs",
308
- className: "px-comp-offer-card-compact-p pt-comp-offer-card-compact-p-top pb-comp-offer-card-compact-p",
309
- children: [
310
- I,
311
- x && /* @__PURE__ */ e(
312
- k,
313
- {
314
- rating: b,
315
- ratingCount: j,
316
- disabled: d
317
- }
318
- ),
319
- p && /* @__PURE__ */ e(
320
- n,
321
- {
322
- component: "span",
323
- variant: "body",
324
- size: "sm",
325
- weight: "regular",
326
- fixY: !0,
327
- className: S,
328
- children: p
329
- }
330
- )
331
- ]
332
- }
333
- )
334
- ] }) : N = /* @__PURE__ */ r(D, { children: [
207
+ return h === "compact" ? N = /* @__PURE__ */ r(
208
+ se,
209
+ {
210
+ image: s,
211
+ imageAlt: S,
212
+ placeholderIcon: y,
213
+ placeholderColor: z,
214
+ componentName: "OfferCard",
215
+ category: P,
216
+ heartButton: D,
217
+ logo: l,
218
+ logoAlt: T,
219
+ disabled: t,
220
+ children: [
221
+ Y,
222
+ b && /* @__PURE__ */ e(
223
+ k,
224
+ {
225
+ rating: v,
226
+ ratingCount: O,
227
+ disabled: t
228
+ }
229
+ ),
230
+ f && /* @__PURE__ */ e(
231
+ d,
232
+ {
233
+ component: "span",
234
+ variant: "body",
235
+ size: "sm",
236
+ weight: "regular",
237
+ fixY: !0,
238
+ className: F,
239
+ children: f
240
+ }
241
+ )
242
+ ]
243
+ }
244
+ ) : N = /* @__PURE__ */ r(Z, { children: [
335
245
  /* @__PURE__ */ r(
336
- y,
246
+ le,
337
247
  {
338
- image: l,
339
- alt: R,
248
+ image: s,
249
+ alt: S,
250
+ placeholderIcon: y,
251
+ placeholderColor: z,
252
+ componentName: "OfferCard",
340
253
  wrapperClassName: "relative shrink-0 overflow-hidden rounded-comp-offer-card-search-radius-img h-comp-offer-card-search-h-img w-comp-offer-card-search-w-img",
341
254
  children: [
342
- /* @__PURE__ */ e(
255
+ V && /* @__PURE__ */ e(
343
256
  "div",
344
257
  {
345
258
  "aria-hidden": "true",
346
259
  className: "absolute inset-0 bg-gradient-to-b from-black/50 to-black/0 to-50%"
347
260
  }
348
261
  ),
349
- i && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-surface-base-overlay", children: /* @__PURE__ */ e("div", { className: "size-comp-offer-card-search-logo-size overflow-hidden rounded-full border-(length:--spacing-comp-offer-card-search-logo-stroke) border-solid border-stroke-base-secondary group-data-[disabled=true]:grayscale [&>img]:size-full [&>img]:object-cover", children: typeof i == "string" ? /* @__PURE__ */ e("img", { src: i, alt: V }) : i }) }),
350
- /* @__PURE__ */ e("div", { className: "absolute top-comp-offer-card-search-p-img left-comp-offer-card-search-p-img", children: Y })
262
+ l && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-surface-base-overlay", children: /* @__PURE__ */ e("div", { className: "size-comp-offer-card-search-logo-size overflow-hidden rounded-full border-(length:--spacing-comp-offer-card-search-logo-stroke) border-solid border-stroke-base-secondary group-data-[disabled=true]:grayscale [&>img]:size-full [&>img]:object-cover", children: typeof l == "string" ? /* @__PURE__ */ e("img", { src: l, alt: T }) : l }) }),
263
+ /* @__PURE__ */ e("div", { className: "absolute top-comp-offer-card-search-p-img left-comp-offer-card-search-p-img", children: D })
351
264
  ]
352
265
  }
353
266
  ),
354
267
  /* @__PURE__ */ r(
355
- f,
268
+ g,
356
269
  {
357
270
  direction: "column",
358
271
  flex: 1,
359
272
  className: "min-w-0 gap-comp-offer-card-search-gap-text pt-comp-offer-card-search-p-top-text",
360
273
  children: [
361
- I,
362
- /* @__PURE__ */ r(f, { align: "center", gap: "sm", wrap: "wrap", children: [
363
- u && /* @__PURE__ */ e(
364
- n,
274
+ Y,
275
+ /* @__PURE__ */ r(g, { align: "center", gap: "sm", wrap: "wrap", children: [
276
+ p && /* @__PURE__ */ e(
277
+ d,
365
278
  {
366
279
  component: "span",
367
280
  variant: "body",
368
281
  size: "base",
369
282
  weight: "regular",
370
283
  fixY: !0,
371
- className: s(
372
- d ? "text-text-dark-disabled" : "text-text-dark-primary-def"
284
+ className: i(
285
+ t ? "text-text-dark-disabled" : "text-text-dark-primary-def"
373
286
  ),
374
- children: u
287
+ children: p
375
288
  }
376
289
  ),
377
- u && x && /* @__PURE__ */ e(U, {}),
378
- x && /* @__PURE__ */ e(
290
+ p && b && /* @__PURE__ */ e(ae, {}),
291
+ b && /* @__PURE__ */ e(
379
292
  k,
380
293
  {
381
- rating: b,
382
- ratingCount: j,
383
- disabled: d
294
+ rating: v,
295
+ ratingCount: O,
296
+ disabled: t
384
297
  }
385
298
  )
386
299
  ] }),
387
- p && /* @__PURE__ */ e(
388
- n,
300
+ A != null && /* @__PURE__ */ e(re, { disabled: t, children: A }),
301
+ f && /* @__PURE__ */ e(
302
+ d,
389
303
  {
390
304
  component: "span",
391
305
  variant: "body",
392
306
  size: "sm",
393
307
  weight: "regular",
394
308
  fixY: !0,
395
- className: S,
396
- children: p
309
+ className: F,
310
+ children: f
397
311
  }
398
312
  )
399
313
  ]
@@ -403,21 +317,21 @@ const L = w.forwardRef(
403
317
  "div",
404
318
  {
405
319
  ref: a,
406
- className: K,
407
- "data-disabled": d || void 0,
408
- "aria-disabled": d || void 0,
409
- ...G,
320
+ className: U,
321
+ "data-disabled": t || void 0,
322
+ "aria-disabled": t || void 0,
323
+ ...M,
410
324
  children: N
411
325
  }
412
326
  );
413
327
  }
414
328
  );
415
- L.displayName = "OfferCard";
416
- const te = L;
417
- te.Skeleton = E;
329
+ B.displayName = "OfferCard";
330
+ const pe = B;
331
+ pe.Skeleton = L;
418
332
  export {
419
- te as OfferCard,
420
- oe as offerCardDescriptionVariants,
421
- re as offerCardTitleVariants,
422
- ae as offerCardVariants
333
+ pe as OfferCard,
334
+ fe as offerCardDescriptionVariants,
335
+ me as offerCardTitleVariants,
336
+ de as offerCardVariants
423
337
  };
@@ -4,12 +4,15 @@ declare const meta: Meta<typeof OfferCard>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof OfferCard>;
6
6
  export declare const Compact: Story;
7
+ export declare const CompactPlaceholder: Story;
7
8
  export declare const CompactSkeleton: Story;
8
- export declare const CompactPromo: Story;
9
- export declare const CompactPromoSkeleton: Story;
9
+ export declare const CompactTinted: Story;
10
+ export declare const CompactTintedSkeleton: Story;
10
11
  export declare const Search: Story;
12
+ export declare const SearchPlaceholder: Story;
11
13
  export declare const SearchSkeleton: Story;
12
14
  export declare const WithFavoriteControlled: Story;
13
15
  export declare const WithFavoriteNonInteractive: Story;
14
16
  export declare const AsChildLink: Story;
17
+ export declare const AsChildDisabled: Story;
15
18
  //# sourceMappingURL=OfferCard.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"OfferCard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/OfferCard/OfferCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAyIvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAiDhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAgBlC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA4BpB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAyBpC,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAmBxC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAA"}
1
+ {"version":3,"file":"OfferCard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/OfferCard/OfferCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQ3D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AA6IvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAiDhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA8ChC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KA2B3B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAgBnC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA4BpB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAyD/B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAyBpC,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAmBxC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAA"}