@vkzstudio/muza-ui 1.2.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.
- package/dist/components/Accordion/Accordion.d.ts +52 -2
- package/dist/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/components/Accordion/Accordion.js +111 -76
- package/dist/components/ArticleCard/ArticleCard.d.ts +178 -0
- package/dist/components/ArticleCard/ArticleCard.d.ts.map +1 -0
- package/dist/components/ArticleCard/ArticleCard.js +542 -0
- package/dist/components/ArticleCard/ArticleCard.stories.d.ts +14 -0
- package/dist/components/ArticleCard/ArticleCard.stories.d.ts.map +1 -0
- package/dist/components/ArticleCard/index.d.ts +2 -0
- package/dist/components/ArticleCard/index.d.ts.map +1 -0
- package/dist/components/ButtonArrow/ButtonArrow.js +1 -1
- package/dist/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/components/Calendar/Calendar.js +5 -5
- package/dist/components/Calendar/index.d.ts +1 -2
- package/dist/components/Calendar/index.d.ts.map +1 -1
- package/dist/components/Carousel/Carousel.d.ts +9 -0
- package/dist/components/Carousel/Carousel.d.ts.map +1 -1
- package/dist/components/Carousel/Carousel.js +135 -133
- package/dist/components/CarouselSection/CarouselSection.examples.d.ts +34 -0
- package/dist/components/CarouselSection/CarouselSection.examples.d.ts.map +1 -0
- package/dist/components/CarouselSection/CarouselSection.stories.d.ts +8 -0
- package/dist/components/CarouselSection/CarouselSection.stories.d.ts.map +1 -0
- package/dist/components/CategoryCard/CategoryCard.d.ts +97 -0
- package/dist/components/CategoryCard/CategoryCard.d.ts.map +1 -0
- package/dist/components/CategoryCard/CategoryCard.js +152 -0
- package/dist/components/CategoryCard/CategoryCard.stories.d.ts +14 -0
- package/dist/components/CategoryCard/CategoryCard.stories.d.ts.map +1 -0
- package/dist/components/CategoryCard/index.d.ts +2 -0
- package/dist/components/CategoryCard/index.d.ts.map +1 -0
- package/dist/components/CategoryIcon/CategoryIcon.d.ts +45 -0
- package/dist/components/CategoryIcon/CategoryIcon.d.ts.map +1 -0
- package/dist/components/CategoryIcon/CategoryIcon.js +54 -0
- package/dist/components/CategoryIcon/CategoryIcon.stories.d.ts +10 -0
- package/dist/components/CategoryIcon/CategoryIcon.stories.d.ts.map +1 -0
- package/dist/components/CategoryIcon/index.d.ts +2 -0
- package/dist/components/CategoryIcon/index.d.ts.map +1 -0
- package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker/DatePicker.js +5 -5
- package/dist/components/DotDivider/DotDivider.d.ts +35 -0
- package/dist/components/DotDivider/DotDivider.d.ts.map +1 -0
- package/dist/components/DotDivider/DotDivider.js +31 -0
- package/dist/components/DotDivider/DotDivider.stories.d.ts +10 -0
- package/dist/components/DotDivider/DotDivider.stories.d.ts.map +1 -0
- package/dist/components/DotDivider/index.d.ts +2 -0
- package/dist/components/DotDivider/index.d.ts.map +1 -0
- package/dist/components/HeartButton/HeartButton.d.ts +61 -0
- package/dist/components/HeartButton/HeartButton.d.ts.map +1 -0
- package/dist/components/HeartButton/HeartButton.js +88 -0
- package/dist/components/HeartButton/HeartButton.stories.d.ts +10 -0
- package/dist/components/HeartButton/HeartButton.stories.d.ts.map +1 -0
- package/dist/components/HeartButton/index.d.ts +2 -0
- package/dist/components/HeartButton/index.d.ts.map +1 -0
- package/dist/components/Icons/CustomBadges.d.ts +20 -0
- package/dist/components/Icons/CustomBadges.d.ts.map +1 -1
- package/dist/components/Icons/CustomBadges.js +176 -21
- package/dist/components/Icons/CustomIcons.d.ts +13 -0
- package/dist/components/Icons/CustomIcons.d.ts.map +1 -1
- package/dist/components/Icons/CustomIcons.js +50 -30
- package/dist/components/Icons/LogosAndBadges.stories.d.ts +2 -1
- package/dist/components/Icons/LogosAndBadges.stories.d.ts.map +1 -1
- package/dist/components/LanguageSwitcher/LanguageSwitcher.d.ts.map +1 -1
- package/dist/components/LanguageSwitcher/LanguageSwitcher.js +65 -55
- package/dist/components/LoginScreen/LoginScreen.d.ts +10 -1
- package/dist/components/LoginScreen/LoginScreen.d.ts.map +1 -1
- package/dist/components/LoginScreen/LoginScreen.js +23 -17
- package/dist/components/MultiSelect/MultiSelect.js +1 -1
- package/dist/components/OfferCard/OfferCard.d.ts +206 -0
- package/dist/components/OfferCard/OfferCard.d.ts.map +1 -0
- package/dist/components/OfferCard/OfferCard.js +423 -0
- package/dist/components/OfferCard/OfferCard.stories.d.ts +15 -0
- package/dist/components/OfferCard/OfferCard.stories.d.ts.map +1 -0
- package/dist/components/OfferCard/index.d.ts +2 -0
- package/dist/components/OfferCard/index.d.ts.map +1 -0
- package/dist/components/PartnerCard/PartnerCard.d.ts +234 -0
- package/dist/components/PartnerCard/PartnerCard.d.ts.map +1 -0
- package/dist/components/PartnerCard/PartnerCard.js +591 -0
- package/dist/components/PartnerCard/PartnerCard.stories.d.ts +14 -0
- package/dist/components/PartnerCard/PartnerCard.stories.d.ts.map +1 -0
- package/dist/components/PartnerCard/index.d.ts +2 -0
- package/dist/components/PartnerCard/index.d.ts.map +1 -0
- package/dist/components/PaymentMethodSelect/PaymentMethodSelect.examples.d.ts +35 -0
- package/dist/components/PaymentMethodSelect/PaymentMethodSelect.examples.d.ts.map +1 -0
- package/dist/components/PaymentMethodSelect/PaymentMethodSelect.stories.d.ts +11 -0
- package/dist/components/PaymentMethodSelect/PaymentMethodSelect.stories.d.ts.map +1 -0
- package/dist/components/Rating/Rating.d.ts +62 -0
- package/dist/components/Rating/Rating.d.ts.map +1 -0
- package/dist/components/Rating/Rating.js +88 -0
- package/dist/components/Rating/Rating.stories.d.ts +12 -0
- package/dist/components/Rating/Rating.stories.d.ts.map +1 -0
- package/dist/components/Rating/index.d.ts +2 -0
- package/dist/components/Rating/index.d.ts.map +1 -0
- package/dist/components/RatingBlock/RatingBlock.d.ts +65 -0
- package/dist/components/RatingBlock/RatingBlock.d.ts.map +1 -0
- package/dist/components/RatingBlock/RatingBlock.js +92 -0
- package/dist/components/RatingBlock/RatingBlock.stories.d.ts +12 -0
- package/dist/components/RatingBlock/RatingBlock.stories.d.ts.map +1 -0
- package/dist/components/RatingBlock/index.d.ts +2 -0
- package/dist/components/RatingBlock/index.d.ts.map +1 -0
- package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.js +5 -5
- package/dist/components/SearchFilters/SearchFilters.d.ts +88 -0
- package/dist/components/SearchFilters/SearchFilters.d.ts.map +1 -0
- package/dist/components/SearchFilters/SearchFilters.js +176 -0
- package/dist/components/SearchFilters/SearchFilters.stories.d.ts +12 -0
- package/dist/components/SearchFilters/SearchFilters.stories.d.ts.map +1 -0
- package/dist/components/SearchFilters/index.d.ts +2 -0
- package/dist/components/SearchFilters/index.d.ts.map +1 -0
- package/dist/components/Tag/Tag.d.ts.map +1 -1
- package/dist/components/TransactionsListView/TransactionsListView.d.ts +152 -0
- package/dist/components/TransactionsListView/TransactionsListView.d.ts.map +1 -0
- package/dist/components/TransactionsListView/TransactionsListView.js +367 -0
- package/dist/components/TransactionsListView/TransactionsListView.stories.d.ts +12 -0
- package/dist/components/TransactionsListView/TransactionsListView.stories.d.ts.map +1 -0
- package/dist/components/TransactionsListView/index.d.ts +2 -0
- package/dist/components/TransactionsListView/index.d.ts.map +1 -0
- package/dist/components/VoucherCard/VoucherCard.d.ts +105 -0
- package/dist/components/VoucherCard/VoucherCard.d.ts.map +1 -0
- package/dist/components/VoucherCard/VoucherCard.js +167 -0
- package/dist/components/VoucherCard/VoucherCard.stories.d.ts +9 -0
- package/dist/components/VoucherCard/VoucherCard.stories.d.ts.map +1 -0
- package/dist/components/VoucherCard/index.d.ts +2 -0
- package/dist/components/VoucherCard/index.d.ts.map +1 -0
- package/dist/components/index.d.ts +12 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/index.js +405 -352
- package/dist/muza-ui.css +1 -1
- package/dist/styles/primitives.css +5 -0
- package/dist/styles/token-colors.css +105 -30
- package/dist/styles/token-sizes.css +24 -0
- package/dist/translations/index.d.ts +2 -1
- package/dist/translations/index.d.ts.map +1 -1
- package/dist/translations/locales/cs.d.ts.map +1 -1
- package/dist/translations/locales/cs.js +30 -2
- package/dist/translations/locales/en.d.ts.map +1 -1
- package/dist/translations/locales/en.js +26 -2
- package/dist/translations/locales/sk.d.ts.map +1 -1
- package/dist/translations/locales/sk.js +30 -2
- package/dist/translations/resolvePluralTemplate.d.ts +10 -0
- package/dist/translations/resolvePluralTemplate.d.ts.map +1 -0
- package/dist/translations/resolvePluralTemplate.js +20 -0
- package/dist/translations/types.d.ts +57 -0
- package/dist/translations/types.d.ts.map +1 -1
- package/dist/utils/cn.d.ts.map +1 -1
- package/dist/utils/cn.js +116 -24
- package/dist/utils/disabledLinkProps.d.ts +14 -0
- package/dist/utils/disabledLinkProps.d.ts.map +1 -0
- package/dist/utils/disabledLinkProps.js +9 -0
- package/dist/{components/Calendar/utils → utils}/formatDate.d.ts +1 -1
- package/dist/utils/formatDate.d.ts.map +1 -0
- package/dist/utils/formatDateRange.d.ts.map +1 -0
- package/dist/utils/index.d.ts +3 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/components/Calendar/utils/formatDate.d.ts.map +0 -1
- package/dist/components/Calendar/utils/formatDateRange.d.ts.map +0 -1
- /package/dist/{components/Calendar/utils → utils}/formatDate.js +0 -0
- /package/dist/{components/Calendar/utils → utils}/formatDateRange.d.ts +0 -0
- /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
|
|
2
|
+
import * as o from "react";
|
|
3
3
|
import _ from "embla-carousel-react";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
const
|
|
10
|
-
const t =
|
|
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 =
|
|
14
|
+
}, M = o.forwardRef(
|
|
15
15
|
({
|
|
16
16
|
orientation: t = "horizontal",
|
|
17
|
-
options:
|
|
18
|
-
align:
|
|
19
|
-
setApi:
|
|
20
|
-
plugins:
|
|
17
|
+
options: s,
|
|
18
|
+
align: c,
|
|
19
|
+
setApi: l,
|
|
20
|
+
plugins: n,
|
|
21
21
|
className: f,
|
|
22
|
-
children:
|
|
23
|
-
...
|
|
24
|
-
},
|
|
25
|
-
const [
|
|
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
|
-
...
|
|
34
|
-
...
|
|
33
|
+
...c !== void 0 && { align: c },
|
|
34
|
+
...s,
|
|
35
35
|
axis: t === "horizontal" ? "x" : "y"
|
|
36
36
|
},
|
|
37
|
-
|
|
38
|
-
), [
|
|
39
|
-
r && (E(r.selectedScrollSnap()),
|
|
40
|
-
}, []),
|
|
41
|
-
r &&
|
|
42
|
-
}, []),
|
|
43
|
-
|
|
44
|
-
}, [
|
|
45
|
-
|
|
46
|
-
}, [
|
|
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
|
-
|
|
48
|
+
e == null || e.scrollTo(r);
|
|
49
49
|
},
|
|
50
|
-
[
|
|
51
|
-
), K =
|
|
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(),
|
|
54
|
+
r.key === T ? (r.preventDefault(), N()) : r.key === H && (r.preventDefault(), y());
|
|
55
55
|
},
|
|
56
|
-
[t,
|
|
56
|
+
[t, N, y]
|
|
57
57
|
);
|
|
58
|
-
|
|
59
|
-
!
|
|
60
|
-
}, [
|
|
61
|
-
if (
|
|
62
|
-
return
|
|
63
|
-
|
|
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
|
-
}, [
|
|
66
|
-
const
|
|
67
|
-
return
|
|
68
|
-
|
|
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
|
-
|
|
70
|
+
R.Provider,
|
|
71
71
|
{
|
|
72
72
|
value: {
|
|
73
|
-
carouselRef:
|
|
74
|
-
api:
|
|
75
|
-
options:
|
|
73
|
+
carouselRef: d,
|
|
74
|
+
api: e,
|
|
75
|
+
options: s,
|
|
76
76
|
orientation: t,
|
|
77
|
-
plugins:
|
|
78
|
-
scrollPrev:
|
|
79
|
-
scrollNext:
|
|
80
|
-
canScrollPrev:
|
|
81
|
-
canScrollNext:
|
|
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:
|
|
89
|
+
ref: w,
|
|
90
90
|
onKeyDownCapture: K,
|
|
91
91
|
className: f,
|
|
92
92
|
role: "region",
|
|
93
93
|
"aria-roledescription": "carousel",
|
|
94
|
-
...
|
|
94
|
+
...C,
|
|
95
95
|
children: [
|
|
96
|
-
/* @__PURE__ */ m("div", { className: "relative", children:
|
|
97
|
-
|
|
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 =
|
|
107
|
-
({ className: t, overflowVisible:
|
|
108
|
-
const { carouselRef:
|
|
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:
|
|
113
|
-
className:
|
|
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
|
-
|
|
117
|
-
|
|
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
|
-
|
|
120
|
+
F,
|
|
121
121
|
{
|
|
122
|
-
ref:
|
|
123
|
-
direction:
|
|
124
|
-
className:
|
|
125
|
-
|
|
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
|
-
...
|
|
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 =
|
|
137
|
-
({ className: t, ...
|
|
138
|
-
const { orientation:
|
|
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:
|
|
142
|
+
ref: c,
|
|
143
143
|
role: "group",
|
|
144
144
|
"aria-roledescription": "slide",
|
|
145
|
-
className:
|
|
145
|
+
className: h(
|
|
146
146
|
"min-w-0 shrink-0 grow-0 basis-full",
|
|
147
147
|
{
|
|
148
|
-
"pl-comp-carousel-gap":
|
|
149
|
-
"pt-comp-carousel-gap":
|
|
148
|
+
"pl-comp-carousel-gap": l === "horizontal",
|
|
149
|
+
"pt-comp-carousel-gap": l !== "horizontal"
|
|
150
150
|
},
|
|
151
151
|
t
|
|
152
152
|
),
|
|
153
|
-
...
|
|
153
|
+
...s
|
|
154
154
|
}
|
|
155
155
|
);
|
|
156
156
|
}
|
|
157
157
|
);
|
|
158
158
|
V.displayName = "CarouselItem";
|
|
159
|
-
const q =
|
|
159
|
+
const q = o.forwardRef(
|
|
160
160
|
({
|
|
161
161
|
className: t,
|
|
162
|
-
size:
|
|
163
|
-
ariaLabel:
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
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:
|
|
172
|
+
ref: i,
|
|
172
173
|
direction: "left",
|
|
173
|
-
size:
|
|
174
|
-
disabled: !
|
|
175
|
-
"aria-label":
|
|
176
|
-
onClick: (
|
|
177
|
-
|
|
174
|
+
size: s,
|
|
175
|
+
disabled: !d,
|
|
176
|
+
"aria-label": b,
|
|
177
|
+
onClick: (x) => {
|
|
178
|
+
w(), n == null || n(x);
|
|
178
179
|
},
|
|
179
|
-
className:
|
|
180
|
+
className: h(
|
|
180
181
|
"absolute",
|
|
181
182
|
{
|
|
182
|
-
"top-1/2 -translate-y-1/2":
|
|
183
|
-
"left-1/2 -translate-x-1/2 rotate-90": !
|
|
184
|
-
"-left-comp-carousel-arrow-offset-sm":
|
|
185
|
-
"-left-comp-carousel-arrow-offset":
|
|
186
|
-
"-top-comp-carousel-arrow-offset-v-sm": !
|
|
187
|
-
"-top-comp-carousel-arrow-offset-v": !
|
|
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
|
-
...
|
|
192
|
+
...f
|
|
192
193
|
}
|
|
193
194
|
);
|
|
194
195
|
}
|
|
195
196
|
);
|
|
196
197
|
q.displayName = "CarouselPrevious";
|
|
197
|
-
const G =
|
|
198
|
+
const G = o.forwardRef(
|
|
198
199
|
({
|
|
199
200
|
className: t,
|
|
200
|
-
size:
|
|
201
|
-
ariaLabel:
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
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:
|
|
211
|
+
ref: i,
|
|
210
212
|
direction: "right",
|
|
211
|
-
size:
|
|
212
|
-
disabled: !
|
|
213
|
-
"aria-label":
|
|
214
|
-
onClick: (
|
|
215
|
-
|
|
213
|
+
size: s,
|
|
214
|
+
disabled: !d,
|
|
215
|
+
"aria-label": b,
|
|
216
|
+
onClick: (x) => {
|
|
217
|
+
w(), n == null || n(x);
|
|
216
218
|
},
|
|
217
|
-
className:
|
|
219
|
+
className: h(
|
|
218
220
|
"absolute",
|
|
219
221
|
{
|
|
220
|
-
"top-1/2 -translate-y-1/2":
|
|
221
|
-
"left-1/2 -translate-x-1/2 rotate-90": !
|
|
222
|
-
"-right-comp-carousel-arrow-offset-sm":
|
|
223
|
-
"-right-comp-carousel-arrow-offset":
|
|
224
|
-
"-bottom-comp-carousel-arrow-offset-v-sm": !
|
|
225
|
-
"-bottom-comp-carousel-arrow-offset-v": !
|
|
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
|
-
...
|
|
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:
|
|
238
|
-
buttonAriaLabel:
|
|
239
|
+
ariaLabel: s,
|
|
240
|
+
buttonAriaLabel: c
|
|
239
241
|
}) => {
|
|
240
|
-
const { selectedIndex:
|
|
242
|
+
const { selectedIndex: l, scrollTo: n, slidesCount: f } = v(), i = L();
|
|
241
243
|
return f <= 1 ? null : /* @__PURE__ */ m(
|
|
242
|
-
|
|
244
|
+
B,
|
|
243
245
|
{
|
|
244
246
|
count: f,
|
|
245
|
-
activeIndex:
|
|
246
|
-
onDotClick:
|
|
247
|
+
activeIndex: l,
|
|
248
|
+
onDotClick: n,
|
|
247
249
|
interactive: !0,
|
|
248
|
-
className:
|
|
249
|
-
ariaLabel:
|
|
250
|
-
buttonAriaLabel:
|
|
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"}
|