@vkzstudio/muza-ui 1.1.0 → 1.3.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 (159) hide show
  1. package/dist/components/Accordion/Accordion.d.ts +52 -2
  2. package/dist/components/Accordion/Accordion.d.ts.map +1 -1
  3. package/dist/components/Accordion/Accordion.js +111 -76
  4. package/dist/components/ArticleCard/ArticleCard.d.ts +178 -0
  5. package/dist/components/ArticleCard/ArticleCard.d.ts.map +1 -0
  6. package/dist/components/ArticleCard/ArticleCard.js +542 -0
  7. package/dist/components/ArticleCard/ArticleCard.stories.d.ts +14 -0
  8. package/dist/components/ArticleCard/ArticleCard.stories.d.ts.map +1 -0
  9. package/dist/components/ArticleCard/index.d.ts +2 -0
  10. package/dist/components/ArticleCard/index.d.ts.map +1 -0
  11. package/dist/components/ButtonArrow/ButtonArrow.js +1 -1
  12. package/dist/components/Calendar/Calendar.d.ts.map +1 -1
  13. package/dist/components/Calendar/Calendar.js +5 -5
  14. package/dist/components/Calendar/index.d.ts +1 -2
  15. package/dist/components/Calendar/index.d.ts.map +1 -1
  16. package/dist/components/Carousel/Carousel.d.ts +9 -0
  17. package/dist/components/Carousel/Carousel.d.ts.map +1 -1
  18. package/dist/components/Carousel/Carousel.js +135 -133
  19. package/dist/components/CarouselSection/CarouselSection.examples.d.ts +34 -0
  20. package/dist/components/CarouselSection/CarouselSection.examples.d.ts.map +1 -0
  21. package/dist/components/CarouselSection/CarouselSection.stories.d.ts +8 -0
  22. package/dist/components/CarouselSection/CarouselSection.stories.d.ts.map +1 -0
  23. package/dist/components/CategoryCard/CategoryCard.d.ts +97 -0
  24. package/dist/components/CategoryCard/CategoryCard.d.ts.map +1 -0
  25. package/dist/components/CategoryCard/CategoryCard.js +152 -0
  26. package/dist/components/CategoryCard/CategoryCard.stories.d.ts +14 -0
  27. package/dist/components/CategoryCard/CategoryCard.stories.d.ts.map +1 -0
  28. package/dist/components/CategoryCard/index.d.ts +2 -0
  29. package/dist/components/CategoryCard/index.d.ts.map +1 -0
  30. package/dist/components/CategoryIcon/CategoryIcon.d.ts +45 -0
  31. package/dist/components/CategoryIcon/CategoryIcon.d.ts.map +1 -0
  32. package/dist/components/CategoryIcon/CategoryIcon.js +54 -0
  33. package/dist/components/CategoryIcon/CategoryIcon.stories.d.ts +10 -0
  34. package/dist/components/CategoryIcon/CategoryIcon.stories.d.ts.map +1 -0
  35. package/dist/components/CategoryIcon/index.d.ts +2 -0
  36. package/dist/components/CategoryIcon/index.d.ts.map +1 -0
  37. package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
  38. package/dist/components/DatePicker/DatePicker.js +5 -5
  39. package/dist/components/DotDivider/DotDivider.d.ts +35 -0
  40. package/dist/components/DotDivider/DotDivider.d.ts.map +1 -0
  41. package/dist/components/DotDivider/DotDivider.js +31 -0
  42. package/dist/components/DotDivider/DotDivider.stories.d.ts +10 -0
  43. package/dist/components/DotDivider/DotDivider.stories.d.ts.map +1 -0
  44. package/dist/components/DotDivider/index.d.ts +2 -0
  45. package/dist/components/DotDivider/index.d.ts.map +1 -0
  46. package/dist/components/HeartButton/HeartButton.d.ts +61 -0
  47. package/dist/components/HeartButton/HeartButton.d.ts.map +1 -0
  48. package/dist/components/HeartButton/HeartButton.js +88 -0
  49. package/dist/components/HeartButton/HeartButton.stories.d.ts +10 -0
  50. package/dist/components/HeartButton/HeartButton.stories.d.ts.map +1 -0
  51. package/dist/components/HeartButton/index.d.ts +2 -0
  52. package/dist/components/HeartButton/index.d.ts.map +1 -0
  53. package/dist/components/Icons/CustomBadges.d.ts +20 -0
  54. package/dist/components/Icons/CustomBadges.d.ts.map +1 -1
  55. package/dist/components/Icons/CustomBadges.js +176 -21
  56. package/dist/components/Icons/CustomIcons.d.ts +13 -0
  57. package/dist/components/Icons/CustomIcons.d.ts.map +1 -1
  58. package/dist/components/Icons/CustomIcons.js +50 -30
  59. package/dist/components/Icons/LogosAndBadges.stories.d.ts +2 -1
  60. package/dist/components/Icons/LogosAndBadges.stories.d.ts.map +1 -1
  61. package/dist/components/LanguageSwitcher/LanguageSwitcher.d.ts.map +1 -1
  62. package/dist/components/LanguageSwitcher/LanguageSwitcher.js +65 -55
  63. package/dist/components/LoginScreen/LoginScreen.d.ts +21 -2
  64. package/dist/components/LoginScreen/LoginScreen.d.ts.map +1 -1
  65. package/dist/components/LoginScreen/LoginScreen.js +32 -26
  66. package/dist/components/LoginScreen/LoginScreen.stories.d.ts +2 -2
  67. package/dist/components/LoginScreen/LoginScreen.stories.d.ts.map +1 -1
  68. package/dist/components/MultiSelect/MultiSelect.js +1 -1
  69. package/dist/components/OfferCard/OfferCard.d.ts +206 -0
  70. package/dist/components/OfferCard/OfferCard.d.ts.map +1 -0
  71. package/dist/components/OfferCard/OfferCard.js +423 -0
  72. package/dist/components/OfferCard/OfferCard.stories.d.ts +15 -0
  73. package/dist/components/OfferCard/OfferCard.stories.d.ts.map +1 -0
  74. package/dist/components/OfferCard/index.d.ts +2 -0
  75. package/dist/components/OfferCard/index.d.ts.map +1 -0
  76. package/dist/components/PartnerCard/PartnerCard.d.ts +234 -0
  77. package/dist/components/PartnerCard/PartnerCard.d.ts.map +1 -0
  78. package/dist/components/PartnerCard/PartnerCard.js +591 -0
  79. package/dist/components/PartnerCard/PartnerCard.stories.d.ts +14 -0
  80. package/dist/components/PartnerCard/PartnerCard.stories.d.ts.map +1 -0
  81. package/dist/components/PartnerCard/index.d.ts +2 -0
  82. package/dist/components/PartnerCard/index.d.ts.map +1 -0
  83. package/dist/components/PaymentMethodSelect/PaymentMethodSelect.examples.d.ts +35 -0
  84. package/dist/components/PaymentMethodSelect/PaymentMethodSelect.examples.d.ts.map +1 -0
  85. package/dist/components/PaymentMethodSelect/PaymentMethodSelect.stories.d.ts +11 -0
  86. package/dist/components/PaymentMethodSelect/PaymentMethodSelect.stories.d.ts.map +1 -0
  87. package/dist/components/Rating/Rating.d.ts +62 -0
  88. package/dist/components/Rating/Rating.d.ts.map +1 -0
  89. package/dist/components/Rating/Rating.js +88 -0
  90. package/dist/components/Rating/Rating.stories.d.ts +12 -0
  91. package/dist/components/Rating/Rating.stories.d.ts.map +1 -0
  92. package/dist/components/Rating/index.d.ts +2 -0
  93. package/dist/components/Rating/index.d.ts.map +1 -0
  94. package/dist/components/RatingBlock/RatingBlock.d.ts +65 -0
  95. package/dist/components/RatingBlock/RatingBlock.d.ts.map +1 -0
  96. package/dist/components/RatingBlock/RatingBlock.js +92 -0
  97. package/dist/components/RatingBlock/RatingBlock.stories.d.ts +12 -0
  98. package/dist/components/RatingBlock/RatingBlock.stories.d.ts.map +1 -0
  99. package/dist/components/RatingBlock/index.d.ts +2 -0
  100. package/dist/components/RatingBlock/index.d.ts.map +1 -0
  101. package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.js +5 -5
  102. package/dist/components/SearchFilters/SearchFilters.d.ts +88 -0
  103. package/dist/components/SearchFilters/SearchFilters.d.ts.map +1 -0
  104. package/dist/components/SearchFilters/SearchFilters.js +176 -0
  105. package/dist/components/SearchFilters/SearchFilters.stories.d.ts +12 -0
  106. package/dist/components/SearchFilters/SearchFilters.stories.d.ts.map +1 -0
  107. package/dist/components/SearchFilters/index.d.ts +2 -0
  108. package/dist/components/SearchFilters/index.d.ts.map +1 -0
  109. package/dist/components/Tag/Tag.d.ts.map +1 -1
  110. package/dist/components/TransactionsListView/TransactionsListView.d.ts +152 -0
  111. package/dist/components/TransactionsListView/TransactionsListView.d.ts.map +1 -0
  112. package/dist/components/TransactionsListView/TransactionsListView.js +367 -0
  113. package/dist/components/TransactionsListView/TransactionsListView.stories.d.ts +12 -0
  114. package/dist/components/TransactionsListView/TransactionsListView.stories.d.ts.map +1 -0
  115. package/dist/components/TransactionsListView/index.d.ts +2 -0
  116. package/dist/components/TransactionsListView/index.d.ts.map +1 -0
  117. package/dist/components/VoucherCard/VoucherCard.d.ts +105 -0
  118. package/dist/components/VoucherCard/VoucherCard.d.ts.map +1 -0
  119. package/dist/components/VoucherCard/VoucherCard.js +167 -0
  120. package/dist/components/VoucherCard/VoucherCard.stories.d.ts +9 -0
  121. package/dist/components/VoucherCard/VoucherCard.stories.d.ts.map +1 -0
  122. package/dist/components/VoucherCard/index.d.ts +2 -0
  123. package/dist/components/VoucherCard/index.d.ts.map +1 -0
  124. package/dist/components/index.d.ts +12 -0
  125. package/dist/components/index.d.ts.map +1 -1
  126. package/dist/index.js +405 -352
  127. package/dist/muza-ui.css +1 -1
  128. package/dist/styles/primitives.css +5 -0
  129. package/dist/styles/token-colors.css +105 -30
  130. package/dist/styles/token-sizes.css +24 -0
  131. package/dist/translations/index.d.ts +2 -1
  132. package/dist/translations/index.d.ts.map +1 -1
  133. package/dist/translations/locales/cs.d.ts.map +1 -1
  134. package/dist/translations/locales/cs.js +30 -2
  135. package/dist/translations/locales/en.d.ts.map +1 -1
  136. package/dist/translations/locales/en.js +26 -2
  137. package/dist/translations/locales/sk.d.ts.map +1 -1
  138. package/dist/translations/locales/sk.js +30 -2
  139. package/dist/translations/resolvePluralTemplate.d.ts +10 -0
  140. package/dist/translations/resolvePluralTemplate.d.ts.map +1 -0
  141. package/dist/translations/resolvePluralTemplate.js +20 -0
  142. package/dist/translations/types.d.ts +57 -0
  143. package/dist/translations/types.d.ts.map +1 -1
  144. package/dist/utils/cn.d.ts.map +1 -1
  145. package/dist/utils/cn.js +116 -24
  146. package/dist/utils/disabledLinkProps.d.ts +14 -0
  147. package/dist/utils/disabledLinkProps.d.ts.map +1 -0
  148. package/dist/utils/disabledLinkProps.js +9 -0
  149. package/dist/{components/Calendar/utils → utils}/formatDate.d.ts +1 -1
  150. package/dist/utils/formatDate.d.ts.map +1 -0
  151. package/dist/utils/formatDateRange.d.ts.map +1 -0
  152. package/dist/utils/index.d.ts +3 -0
  153. package/dist/utils/index.d.ts.map +1 -1
  154. package/package.json +1 -1
  155. package/dist/components/Calendar/utils/formatDate.d.ts.map +0 -1
  156. package/dist/components/Calendar/utils/formatDateRange.d.ts.map +0 -1
  157. /package/dist/{components/Calendar/utils → utils}/formatDate.js +0 -0
  158. /package/dist/{components/Calendar/utils → utils}/formatDateRange.d.ts +0 -0
  159. /package/dist/{components/Calendar/utils → utils}/formatDateRange.js +0 -0
@@ -1,28 +1,28 @@
1
1
  import { jsx as m, jsxs as j } from "react/jsx-runtime";
2
- import * as e from "react";
2
+ import * as o from "react";
3
3
  import _ from "embla-carousel-react";
4
- import { Flex as B } from "../Flex/Flex.js";
5
- import { useMuzaTranslations as y } from "../../translations/TranslationContext.js";
6
- import { ButtonArrow as I } from "../ButtonArrow/ButtonArrow.js";
7
- import { SliderIndicators as F } from "../SliderIndicators/SliderIndicators.js";
8
- import { cn as p } from "../../utils/cn.js";
9
- const P = e.createContext(null), x = () => {
10
- const t = e.useContext(P);
4
+ import { useMuzaTranslations as L } from "../../translations/TranslationContext.js";
5
+ import { ButtonArrow as P } from "../ButtonArrow/ButtonArrow.js";
6
+ import { SliderIndicators as B } from "../SliderIndicators/SliderIndicators.js";
7
+ import { cn as h } from "../../utils/cn.js";
8
+ import { Flex as F } from "../Flex/Flex.js";
9
+ const R = o.createContext(null), v = () => {
10
+ const t = o.useContext(R);
11
11
  if (!t)
12
12
  throw new Error("useCarousel must be used within a <Carousel />");
13
13
  return t;
14
- }, M = e.forwardRef(
14
+ }, M = o.forwardRef(
15
15
  ({
16
16
  orientation: t = "horizontal",
17
- options: l,
18
- align: n,
19
- setApi: a,
20
- plugins: u,
17
+ options: s,
18
+ align: c,
19
+ setApi: l,
20
+ plugins: n,
21
21
  className: f,
22
- children: c,
23
- ...h
24
- }, C) => {
25
- const [w, o] = _(
22
+ children: i,
23
+ ...C
24
+ }, w) => {
25
+ const [d, e] = _(
26
26
  {
27
27
  // `skipSnaps: true` lets a longer drag/flick cross several slides
28
28
  // before snapping, instead of Embla's default of clamping every drag
@@ -30,55 +30,55 @@ const P = e.createContext(null), x = () => {
30
30
  // (e.g. single-slide galleries that should advance one at a time).
31
31
  skipSnaps: !0,
32
32
  // `align` prop is a baseline; an explicit `options.align` overrides it.
33
- ...n !== void 0 && { align: n },
34
- ...l,
33
+ ...c !== void 0 && { align: c },
34
+ ...s,
35
35
  axis: t === "horizontal" ? "x" : "y"
36
36
  },
37
- u
38
- ), [s, i] = e.useState(!1), [b, R] = e.useState(!1), [D, E] = e.useState(0), [k, L] = e.useState(0), d = e.useCallback((r) => {
39
- r && (E(r.selectedScrollSnap()), i(r.canScrollPrev()), R(r.canScrollNext()));
40
- }, []), v = e.useCallback((r) => {
41
- r && L(r.scrollSnapList().length);
42
- }, []), S = e.useCallback(() => {
43
- o == null || o.scrollPrev();
44
- }, [o]), N = e.useCallback(() => {
45
- o == null || o.scrollNext();
46
- }, [o]), A = e.useCallback(
37
+ n
38
+ ), [b, a] = o.useState(!1), [u, x] = o.useState(!1), [D, E] = o.useState(0), [k, z] = o.useState(0), p = o.useCallback((r) => {
39
+ r && (E(r.selectedScrollSnap()), a(r.canScrollPrev()), x(r.canScrollNext()));
40
+ }, []), S = o.useCallback((r) => {
41
+ r && z(r.scrollSnapList().length);
42
+ }, []), N = o.useCallback(() => {
43
+ e == null || e.scrollPrev();
44
+ }, [e]), y = o.useCallback(() => {
45
+ e == null || e.scrollNext();
46
+ }, [e]), A = o.useCallback(
47
47
  (r) => {
48
- o == null || o.scrollTo(r);
48
+ e == null || e.scrollTo(r);
49
49
  },
50
- [o]
51
- ), K = e.useCallback(
50
+ [e]
51
+ ), K = o.useCallback(
52
52
  (r) => {
53
53
  const T = t === "horizontal" ? "ArrowLeft" : "ArrowUp", H = t === "horizontal" ? "ArrowRight" : "ArrowDown";
54
- r.key === T ? (r.preventDefault(), S()) : r.key === H && (r.preventDefault(), N());
54
+ r.key === T ? (r.preventDefault(), N()) : r.key === H && (r.preventDefault(), y());
55
55
  },
56
- [t, S, N]
56
+ [t, N, y]
57
57
  );
58
- e.useEffect(() => {
59
- !o || !a || a(o);
60
- }, [o, a]), e.useEffect(() => {
61
- if (o)
62
- return L(o.scrollSnapList().length), d(o), o.on("select", d), o.on("reInit", d), o.on("reInit", v), () => {
63
- o.off("select", d), o.off("reInit", d), o.off("reInit", v);
58
+ o.useEffect(() => {
59
+ !e || !l || l(e);
60
+ }, [e, l]), o.useEffect(() => {
61
+ if (e)
62
+ return z(e.scrollSnapList().length), p(e), e.on("select", p), e.on("reInit", p), e.on("reInit", S), () => {
63
+ e.off("select", p), e.off("reInit", p), e.off("reInit", S);
64
64
  };
65
- }, [o, d, v]);
66
- const z = [], g = [];
67
- return e.Children.forEach(c, (r) => {
68
- e.isValidElement(r) && r.type === J ? z.push(r) : g.push(r);
65
+ }, [e, p, S]);
66
+ const g = [], I = [];
67
+ return o.Children.forEach(i, (r) => {
68
+ o.isValidElement(r) && r.type === J ? g.push(r) : I.push(r);
69
69
  }), /* @__PURE__ */ m(
70
- P.Provider,
70
+ R.Provider,
71
71
  {
72
72
  value: {
73
- carouselRef: w,
74
- api: o,
75
- options: l,
73
+ carouselRef: d,
74
+ api: e,
75
+ options: s,
76
76
  orientation: t,
77
- plugins: u,
78
- scrollPrev: S,
79
- scrollNext: N,
80
- canScrollPrev: s,
81
- canScrollNext: b,
77
+ plugins: n,
78
+ scrollPrev: N,
79
+ scrollNext: y,
80
+ canScrollPrev: b,
81
+ canScrollNext: u,
82
82
  selectedIndex: D,
83
83
  scrollTo: A,
84
84
  slidesCount: k
@@ -86,15 +86,15 @@ const P = e.createContext(null), x = () => {
86
86
  children: /* @__PURE__ */ j(
87
87
  "div",
88
88
  {
89
- ref: C,
89
+ ref: w,
90
90
  onKeyDownCapture: K,
91
91
  className: f,
92
92
  role: "region",
93
93
  "aria-roledescription": "carousel",
94
- ...h,
94
+ ...C,
95
95
  children: [
96
- /* @__PURE__ */ m("div", { className: "relative", children: g }),
97
- z
96
+ /* @__PURE__ */ m("div", { className: "relative", children: I }),
97
+ g
98
98
  ]
99
99
  }
100
100
  )
@@ -103,29 +103,29 @@ const P = e.createContext(null), x = () => {
103
103
  }
104
104
  );
105
105
  M.displayName = "Carousel";
106
- const U = e.forwardRef(
107
- ({ className: t, overflowVisible: l = !1, ...n }, a) => {
108
- const { carouselRef: u, orientation: f } = x(), c = f === "horizontal";
106
+ const U = o.forwardRef(
107
+ ({ className: t, overflowVisible: s = !1, ...c }, l) => {
108
+ const { carouselRef: n, orientation: f } = v(), i = f === "horizontal";
109
109
  return /* @__PURE__ */ m(
110
110
  "div",
111
111
  {
112
- ref: u,
113
- className: p(
112
+ ref: n,
113
+ className: h(
114
114
  // touch-action: keeps cross-axis native scroll while same-axis swipes go to Embla
115
115
  "select-none",
116
- l ? "overflow-visible" : "overflow-hidden",
117
- c ? "[touch-action:pan-y_pinch-zoom]" : "[touch-action:pan-x_pinch-zoom]"
116
+ s ? "overflow-visible" : "overflow-hidden",
117
+ i ? "[touch-action:pan-y_pinch-zoom]" : "[touch-action:pan-x_pinch-zoom]"
118
118
  ),
119
119
  children: /* @__PURE__ */ m(
120
- B,
120
+ F,
121
121
  {
122
- ref: a,
123
- direction: c ? "row" : "column",
124
- className: p(
125
- c ? "-ml-comp-carousel-gap" : "-mt-comp-carousel-gap",
122
+ ref: l,
123
+ direction: i ? "row" : "column",
124
+ className: h(
125
+ i ? "-ml-comp-carousel-gap" : "-mt-comp-carousel-gap",
126
126
  t
127
127
  ),
128
- ...n
128
+ ...c
129
129
  }
130
130
  )
131
131
  }
@@ -133,100 +133,102 @@ const U = e.forwardRef(
133
133
  }
134
134
  );
135
135
  U.displayName = "CarouselContent";
136
- const V = e.forwardRef(
137
- ({ className: t, ...l }, n) => {
138
- const { orientation: a } = x();
136
+ const V = o.forwardRef(
137
+ ({ className: t, ...s }, c) => {
138
+ const { orientation: l } = v();
139
139
  return /* @__PURE__ */ m(
140
140
  "div",
141
141
  {
142
- ref: n,
142
+ ref: c,
143
143
  role: "group",
144
144
  "aria-roledescription": "slide",
145
- className: p(
145
+ className: h(
146
146
  "min-w-0 shrink-0 grow-0 basis-full",
147
147
  {
148
- "pl-comp-carousel-gap": a === "horizontal",
149
- "pt-comp-carousel-gap": a !== "horizontal"
148
+ "pl-comp-carousel-gap": l === "horizontal",
149
+ "pt-comp-carousel-gap": l !== "horizontal"
150
150
  },
151
151
  t
152
152
  ),
153
- ...l
153
+ ...s
154
154
  }
155
155
  );
156
156
  }
157
157
  );
158
158
  V.displayName = "CarouselItem";
159
- const q = e.forwardRef(
159
+ const q = o.forwardRef(
160
160
  ({
161
161
  className: t,
162
- size: l = "default",
163
- ariaLabel: n,
164
- onClick: a,
165
- ...u
166
- }, f) => {
167
- const { orientation: c, scrollPrev: h, canScrollPrev: C } = x(), w = y(), o = n ?? w.carousel.previousAriaLabel, s = c === "horizontal", i = l === "sm";
168
- return /* @__PURE__ */ m(
169
- I,
162
+ size: s = "default",
163
+ ariaLabel: c,
164
+ hideWhenDisabled: l = !1,
165
+ onClick: n,
166
+ ...f
167
+ }, i) => {
168
+ const { orientation: C, scrollPrev: w, canScrollPrev: d } = v(), e = L(), b = c ?? e.carousel.previousAriaLabel, a = C === "horizontal", u = s === "sm";
169
+ return l && !d ? null : /* @__PURE__ */ m(
170
+ P,
170
171
  {
171
- ref: f,
172
+ ref: i,
172
173
  direction: "left",
173
- size: l,
174
- disabled: !C,
175
- "aria-label": o,
176
- onClick: (b) => {
177
- h(), a == null || a(b);
174
+ size: s,
175
+ disabled: !d,
176
+ "aria-label": b,
177
+ onClick: (x) => {
178
+ w(), n == null || n(x);
178
179
  },
179
- className: p(
180
+ className: h(
180
181
  "absolute",
181
182
  {
182
- "top-1/2 -translate-y-1/2": s,
183
- "left-1/2 -translate-x-1/2 rotate-90": !s,
184
- "-left-comp-carousel-arrow-offset-sm": s && i,
185
- "-left-comp-carousel-arrow-offset": s && !i,
186
- "-top-comp-carousel-arrow-offset-v-sm": !s && i,
187
- "-top-comp-carousel-arrow-offset-v": !s && !i
183
+ "top-1/2 -translate-y-1/2": a,
184
+ "left-1/2 -translate-x-1/2 rotate-90": !a,
185
+ "-left-comp-carousel-arrow-offset-sm": a && u,
186
+ "-left-comp-carousel-arrow-offset": a && !u,
187
+ "-top-comp-carousel-arrow-offset-v-sm": !a && u,
188
+ "-top-comp-carousel-arrow-offset-v": !a && !u
188
189
  },
189
190
  t
190
191
  ),
191
- ...u
192
+ ...f
192
193
  }
193
194
  );
194
195
  }
195
196
  );
196
197
  q.displayName = "CarouselPrevious";
197
- const G = e.forwardRef(
198
+ const G = o.forwardRef(
198
199
  ({
199
200
  className: t,
200
- size: l = "default",
201
- ariaLabel: n,
202
- onClick: a,
203
- ...u
204
- }, f) => {
205
- const { orientation: c, scrollNext: h, canScrollNext: C } = x(), w = y(), o = n ?? w.carousel.nextAriaLabel, s = c === "horizontal", i = l === "sm";
206
- return /* @__PURE__ */ m(
207
- I,
201
+ size: s = "default",
202
+ ariaLabel: c,
203
+ hideWhenDisabled: l = !1,
204
+ onClick: n,
205
+ ...f
206
+ }, i) => {
207
+ const { orientation: C, scrollNext: w, canScrollNext: d } = v(), e = L(), b = c ?? e.carousel.nextAriaLabel, a = C === "horizontal", u = s === "sm";
208
+ return l && !d ? null : /* @__PURE__ */ m(
209
+ P,
208
210
  {
209
- ref: f,
211
+ ref: i,
210
212
  direction: "right",
211
- size: l,
212
- disabled: !C,
213
- "aria-label": o,
214
- onClick: (b) => {
215
- h(), a == null || a(b);
213
+ size: s,
214
+ disabled: !d,
215
+ "aria-label": b,
216
+ onClick: (x) => {
217
+ w(), n == null || n(x);
216
218
  },
217
- className: p(
219
+ className: h(
218
220
  "absolute",
219
221
  {
220
- "top-1/2 -translate-y-1/2": s,
221
- "left-1/2 -translate-x-1/2 rotate-90": !s,
222
- "-right-comp-carousel-arrow-offset-sm": s && i,
223
- "-right-comp-carousel-arrow-offset": s && !i,
224
- "-bottom-comp-carousel-arrow-offset-v-sm": !s && i,
225
- "-bottom-comp-carousel-arrow-offset-v": !s && !i
222
+ "top-1/2 -translate-y-1/2": a,
223
+ "left-1/2 -translate-x-1/2 rotate-90": !a,
224
+ "-right-comp-carousel-arrow-offset-sm": a && u,
225
+ "-right-comp-carousel-arrow-offset": a && !u,
226
+ "-bottom-comp-carousel-arrow-offset-v-sm": !a && u,
227
+ "-bottom-comp-carousel-arrow-offset-v": !a && !u
226
228
  },
227
229
  t
228
230
  ),
229
- ...u
231
+ ...f
230
232
  }
231
233
  );
232
234
  }
@@ -234,20 +236,20 @@ const G = e.forwardRef(
234
236
  G.displayName = "CarouselNext";
235
237
  const J = ({
236
238
  className: t,
237
- ariaLabel: l,
238
- buttonAriaLabel: n
239
+ ariaLabel: s,
240
+ buttonAriaLabel: c
239
241
  }) => {
240
- const { selectedIndex: a, scrollTo: u, slidesCount: f } = x(), c = y();
242
+ const { selectedIndex: l, scrollTo: n, slidesCount: f } = v(), i = L();
241
243
  return f <= 1 ? null : /* @__PURE__ */ m(
242
- F,
244
+ B,
243
245
  {
244
246
  count: f,
245
- activeIndex: a,
246
- onDotClick: u,
247
+ activeIndex: l,
248
+ onDotClick: n,
247
249
  interactive: !0,
248
- className: p("mt-comp-carousel-dots-gap", t),
249
- ariaLabel: l ?? c.carousel.dotsAriaLabel,
250
- buttonAriaLabel: n ?? c.carousel.dotAriaLabel
250
+ className: h("mt-comp-carousel-dots-gap", t),
251
+ ariaLabel: s ?? i.carousel.dotsAriaLabel,
252
+ buttonAriaLabel: c ?? i.carousel.dotAriaLabel
251
253
  }
252
254
  );
253
255
  };
@@ -0,0 +1,34 @@
1
+ import * as React from 'react';
2
+ /** Props for the example `CarouselSection` composition. */
3
+ export interface CarouselSectionProps {
4
+ /** Section heading shown on the left of the header row. */
5
+ title: string;
6
+ /**
7
+ * Cards (or any nodes) to scroll through. Each becomes one slide — the
8
+ * slide width follows the item's own width, so the section works with any
9
+ * card. Give items a fixed width to get the peeking multi-card layout.
10
+ */
11
+ items: React.ReactNode[];
12
+ /** Label for the "show all" call-to-action. Omit to hide the link. */
13
+ ctaLabel?: string;
14
+ /**
15
+ * Destination for the "show all" call-to-action. The CTA renders as an
16
+ * anchor (`Button asChild` wrapping an `<a>`), so pass the URL the link
17
+ * should navigate to.
18
+ */
19
+ ctaHref?: string;
20
+ }
21
+ /**
22
+ * A horizontally scrollable promo section. Drag/swipe (touch + mouse) snaps to
23
+ * a card and can skip several at once with a longer flick; on desktop, arrow
24
+ * buttons step through them one at a time too.
25
+ */
26
+ export declare const CarouselSection: ({ title, items, ctaLabel, ctaHref, }: CarouselSectionProps) => import("react/jsx-runtime").JSX.Element;
27
+ /**
28
+ * Pre-rendered slides using the library `OfferCard` (compact promo variant).
29
+ * Below desktop the fixed `w-[284px]` drives the peeking multi-card layout;
30
+ * `lg:w-full` lets the card fill its slide so the desktop fractional bases
31
+ * (3 → 4 → 5 per view) line up exactly. `h-full` matches the tallest card.
32
+ */
33
+ export declare const offerItems: React.ReactNode[];
34
+ //# sourceMappingURL=CarouselSection.examples.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CarouselSection.examples.d.ts","sourceRoot":"","sources":["../../../src/components/CarouselSection/CarouselSection.examples.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,2DAA2D;AAC3D,MAAM,WAAW,oBAAoB;IACnC,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACxB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,sCAK7B,oBAAoB,4CA0EtB,CAAA;AA8HD;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,SAAS,EAQtC,CAAA"}
@@ -0,0 +1,8 @@
1
+ import { Meta, StoryObj } from '@storybook/react-vite';
2
+ import { CarouselSectionProps } from './CarouselSection.examples';
3
+ declare const meta: Meta<CarouselSectionProps>;
4
+ export default meta;
5
+ type Story = StoryObj<CarouselSectionProps>;
6
+ export declare const Responsive: Story;
7
+ export declare const WithoutCta: Story;
8
+ //# sourceMappingURL=CarouselSection.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CarouselSection.stories.d.ts","sourceRoot":"","sources":["../../../src/components/CarouselSection/CarouselSection.stories.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAEL,KAAK,oBAAoB,EAE1B,MAAM,4BAA4B,CAAA;AAGnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAoDpC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAA;AAE3C,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAA"}
@@ -0,0 +1,97 @@
1
+ import { SkeletonProps } from '../Skeleton';
2
+ import * as React from 'react';
3
+ declare const categoryCardVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
4
+ /**
5
+ * Props shared between the link and asChild shapes of `CategoryCard`.
6
+ */
7
+ export interface CategoryCardBaseProps {
8
+ /** Category label shown next to the image. */
9
+ title: React.ReactNode;
10
+ /** Image URL displayed at the start of the card. Ignored when `imageSlot` is provided. */
11
+ image?: string;
12
+ /** Alt text for the image. @default '' */
13
+ imageAlt?: string;
14
+ /**
15
+ * Custom node rendered in place of the default `<img>` — pass an icon or any
16
+ * 48×48 element. Takes precedence over `image`.
17
+ */
18
+ imageSlot?: React.ReactNode;
19
+ /** Trailing count or badge value (right-aligned, brand-colored). */
20
+ count?: React.ReactNode;
21
+ /**
22
+ * Disables interaction and dims the row. The `<a>`'s `href` is stripped
23
+ * from the DOM when disabled so the link becomes non-navigable while
24
+ * keeping its visual state.
25
+ *
26
+ * @default false
27
+ */
28
+ disabled?: boolean;
29
+ /** Additional CSS classes for the root element. */
30
+ className?: string;
31
+ }
32
+ /**
33
+ * Default shape — `CategoryCard` renders an `<a href>` as its root and the
34
+ * structured content (image, title, count) as its children.
35
+ */
36
+ export interface CategoryCardLinkProps extends CategoryCardBaseProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'children' | 'href' | 'className'> {
37
+ /**
38
+ * URL the card navigates to when activated. Required unless `asChild` is
39
+ * used. Stripped from the rendered DOM when `disabled` is true so the
40
+ * anchor becomes non-navigable while keeping its visual state.
41
+ *
42
+ * @example
43
+ * <CategoryCard href="/categories/zamky" title="Zámky, galerie, muzea" count={18} />
44
+ */
45
+ href: string;
46
+ /** Discriminator for the link shape — omit or set to `false`. Use `asChild` for the polymorphic shape instead. */
47
+ asChild?: false;
48
+ /** Not used in the link shape — the card renders its own structured content as the anchor's children. */
49
+ children?: never;
50
+ }
51
+ /**
52
+ * Escape-hatch shape — hand the root element off to a consumer-provided
53
+ * `<Link>` (Next.js, React Router, …) via Radix `Slot`. The card's
54
+ * structured content is rendered as the child's children, so the child
55
+ * must be self-closing.
56
+ */
57
+ export interface CategoryCardAsChildProps extends CategoryCardBaseProps, Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'children' | 'className'> {
58
+ /**
59
+ * Renders the consumer's child as the root element via Radix `Slot`, so
60
+ * the card surface can be a router `<Link>` (Next.js, React Router, …)
61
+ * instead of the built-in `<a>`. The structured content (image, title,
62
+ * count) is rendered as the child's children — pass a self-closing
63
+ * element.
64
+ *
65
+ * @example
66
+ * <CategoryCard asChild title="Zámky" count={18} image="…">
67
+ * <Link href="/categories/zamky" />
68
+ * </CategoryCard>
69
+ */
70
+ asChild: true;
71
+ /** Self-closing element to use as the root. Its children are overwritten with the card's structured content. */
72
+ children: React.ReactElement;
73
+ /** Not applicable in the `asChild` shape — set `href` on the child element instead. */
74
+ href?: never;
75
+ }
76
+ /**
77
+ * Props for the CategoryCard component.
78
+ *
79
+ * The card is a link by default. Pass `href` for the built-in `<a>`, or
80
+ * `asChild` with a self-closing child to swap in a router `<Link>`.
81
+ */
82
+ export type CategoryCardProps = CategoryCardLinkProps | CategoryCardAsChildProps;
83
+ declare const CategoryCard: React.ForwardRefExoticComponent<CategoryCardProps & React.RefAttributes<HTMLAnchorElement>>;
84
+ /** Props for the {@link CategoryCardSkeleton} component. */
85
+ export type CategoryCardSkeletonProps = SkeletonProps;
86
+ /**
87
+ * Loading placeholder matching the `CategoryCard` footprint — a bordered row
88
+ * with a leading 48×48 image block, a flexible title line, and a trailing
89
+ * count block. Mirrors the real card's border, radius, and padding tokens so
90
+ * the layout doesn't shift when content arrives.
91
+ */
92
+ declare const CategoryCardSkeleton: {
93
+ ({ className, color, ...props }: CategoryCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
94
+ displayName: string;
95
+ };
96
+ export { CategoryCard, categoryCardVariants, CategoryCardSkeleton };
97
+ //# sourceMappingURL=CategoryCard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CategoryCard.d.ts","sourceRoot":"","sources":["../../../src/components/CategoryCard/CategoryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAG1D,QAAA,MAAM,oBAAoB,oFAYxB,CAAA;AAEF;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,8CAA8C;IAC9C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,oEAAoE;IACpE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,qBACf,SAAQ,qBAAqB,EAC3B,IAAI,CACF,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAC5C;IACH;;;;;;;OAOG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,kHAAkH;IAClH,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,yGAAyG;IACzG,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB;AAED;;;;;GAKG;AACH,MAAM,WAAW,wBACf,SAAQ,qBAAqB,EAC3B,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,OAAO,GAAG,UAAU,GAAG,WAAW,CACnC;IACH;;;;;;;;;;;OAWG;IACH,OAAO,EAAE,IAAI,CAAA;IACb,gHAAgH;IAChH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;IAC5B,uFAAuF;IACvF,IAAI,CAAC,EAAE,KAAK,CAAA;CACb;AAED;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG,wBAAwB,CAAA;AAEhF,QAAA,MAAM,YAAY,6FA6GjB,CAAA;AAGD,4DAA4D;AAC5D,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAA;AAErD;;;;;GAKG;AACH,QAAA,MAAM,oBAAoB;qCAIvB,yBAAyB;;CAmB3B,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA"}