wex-ui-lib 1.0.5 → 1.0.7
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/index.cjs.js +149 -24
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +39 -2
- package/dist/index.esm.js +148 -26
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Button/index.types.d.ts +1 -1
- package/dist/types/components/Icon/Icon.d.ts +3 -0
- package/dist/types/components/Icon/Icon.types.d.ts +9 -0
- package/dist/types/components/Icon/index.d.ts +3 -0
- package/dist/types/components/Showcase/Showcase.d.ts +3 -0
- package/dist/types/components/Showcase/Showcase.stories.d.ts +7 -0
- package/dist/types/components/Showcase/Showcase.types.d.ts +10 -0
- package/dist/types/components/Showcase/index.d.ts +3 -3
- package/dist/types/components/Slider/Slider.d.ts +3 -0
- package/dist/types/components/Slider/Slider.stories.d.ts +8 -0
- package/dist/types/components/Slider/Slider.types.d.ts +13 -0
- package/dist/types/components/Slider/index.d.ts +3 -0
- package/dist/types/index.d.ts +4 -1
- package/dist/types/samples/Holik/CustomerComments.d.ts +14 -0
- package/dist/types/samples/Holik/index.stories.d.ts +1 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
|
-
import React$1 from 'react';
|
|
1
|
+
import React$1, { JSX } from 'react';
|
|
2
2
|
|
|
3
3
|
type ArrowIcon = 'arrow-long' | 'arrow-caret';
|
|
4
|
+
type SocialMediaIcon = "twitter" | "instagram" | "youtube" | "linkedin";
|
|
5
|
+
type IconProps = {
|
|
6
|
+
color?: string;
|
|
7
|
+
icon: ArrowIcon | SocialMediaIcon | "hamburgerMenu";
|
|
8
|
+
size?: string;
|
|
9
|
+
withBorder?: boolean;
|
|
10
|
+
callback?: () => void;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
declare function Icon(props: IconProps): React$1.JSX.Element;
|
|
4
14
|
|
|
5
15
|
type TextCasing = 'first-capitalized' | 'uppercase' | 'lowercase';
|
|
6
16
|
|
|
@@ -75,4 +85,31 @@ type FadeProps = {
|
|
|
75
85
|
};
|
|
76
86
|
declare function Fade(props: FadeProps): React$1.JSX.Element;
|
|
77
87
|
|
|
78
|
-
|
|
88
|
+
type goToOption = 'next' | 'prev' | number;
|
|
89
|
+
type SliderRef = {
|
|
90
|
+
goTo: (option: goToOption) => void;
|
|
91
|
+
};
|
|
92
|
+
type SliderProps = {
|
|
93
|
+
children: JSX.Element[];
|
|
94
|
+
autoplayTicTime?: number;
|
|
95
|
+
visibleInactiveSlides?: boolean;
|
|
96
|
+
forwardedRef?: React$1.Ref<SliderRef>;
|
|
97
|
+
showArrowKeys?: boolean;
|
|
98
|
+
onSlideChange?: (slide: number) => void;
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
declare function Slider(props: SliderProps): React$1.JSX.Element;
|
|
102
|
+
|
|
103
|
+
type ShowcaseProps = {
|
|
104
|
+
backgroundColor?: string;
|
|
105
|
+
items: [ShowcaseItem, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?];
|
|
106
|
+
};
|
|
107
|
+
type ShowcaseItem = {
|
|
108
|
+
label: string;
|
|
109
|
+
imageUrl: string;
|
|
110
|
+
callback?: () => void;
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
declare function Showcase(props: ShowcaseProps): React$1.JSX.Element;
|
|
114
|
+
|
|
115
|
+
export { Button, Fade, Hero, Icon, Navbar, Showcase, Slider };
|
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default, { forwardRef, useContext, useState, useRef, useEffect } from 'react';
|
|
2
|
+
import React__default, { forwardRef, useContext, useState, useRef, useEffect, useImperativeHandle, useMemo, Children, useLayoutEffect, useCallback } from 'react';
|
|
3
3
|
|
|
4
4
|
/******************************************************************************
|
|
5
5
|
Copyright (c) Microsoft Corporation.
|
|
@@ -18,6 +18,16 @@ PERFORMANCE OF THIS SOFTWARE.
|
|
|
18
18
|
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
19
19
|
|
|
20
20
|
|
|
21
|
+
function __spreadArray(to, from, pack) {
|
|
22
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
23
|
+
if (ar || !(i in from)) {
|
|
24
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
25
|
+
ar[i] = from[i];
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
29
|
+
}
|
|
30
|
+
|
|
21
31
|
function __makeTemplateObject(cooked, raw) {
|
|
22
32
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
23
33
|
return cooked;
|
|
@@ -1920,8 +1930,8 @@ tags.forEach(function (tagName) {
|
|
|
1920
1930
|
});
|
|
1921
1931
|
|
|
1922
1932
|
function Icon(props) {
|
|
1923
|
-
var _a = props.color, color = _a === undefined ? 'white' : _a, icon = props.icon, size = props.size, withBorder = props.withBorder,
|
|
1924
|
-
return (React__default.createElement(IconContainer, { color: color, size: size, withBorder: withBorder, onClick: function () { return
|
|
1933
|
+
var _a = props.color, color = _a === undefined ? 'white' : _a, icon = props.icon, size = props.size, withBorder = props.withBorder, callback = props.callback;
|
|
1934
|
+
return (React__default.createElement(IconContainer, { color: color, size: size, withBorder: withBorder, onClick: function () { return callback(); } },
|
|
1925
1935
|
icon === "twitter" && (React__default.createElement("svg", { width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
1926
1936
|
React__default.createElement("path", { d: "M7.22838 0H0.34375L8.46766 10.4263L0.786371 18.9328H3.3926L9.67543 11.9759L15.0966 18.9328H21.9812L13.515 8.06725L20.801 0H18.1946L12.3072 6.51855L7.22838 0ZM16.0801 17.0395L4.27784 1.89327H6.24482L18.0471 17.0395H16.0801Z" }))),
|
|
1927
1937
|
icon === "instagram" && (React__default.createElement("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -1937,8 +1947,8 @@ function Icon(props) {
|
|
|
1937
1947
|
icon === "arrow-caret" && (React__default.createElement("svg", { width: "8", height: "10", viewBox: "0 0 8 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
1938
1948
|
React__default.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", "stroke-width": "1.5" })))));
|
|
1939
1949
|
}
|
|
1940
|
-
var IconContainer = newStyled.
|
|
1941
|
-
var templateObject_1$
|
|
1950
|
+
var IconContainer = newStyled.button(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n svg {\n transition: all 0.2s;\n height: ", ";\n fill: ", ";\n path{\n fill: ", "\n }\n }\n"], ["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n svg {\n transition: all 0.2s;\n height: ", ";\n fill: ", ";\n path{\n fill: ", "\n }\n }\n"])), function (props) { return props.withBorder ? props.size : "unset"; }, function (props) { return props.withBorder ? props.size : "unset"; }, function (props) { return props.withBorder ? "2px solid ".concat(props.color) : "unset"; }, function (props) { return props.withBorder ? "53%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; });
|
|
1951
|
+
var templateObject_1$7;
|
|
1942
1952
|
|
|
1943
1953
|
var theme = {
|
|
1944
1954
|
primary: "#DC3737",
|
|
@@ -1988,11 +1998,11 @@ function Button(props) {
|
|
|
1988
1998
|
React__default.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
|
|
1989
1999
|
}
|
|
1990
2000
|
}
|
|
1991
|
-
var DefaultButton = newStyled.button(templateObject_1$
|
|
1992
|
-
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$
|
|
1993
|
-
var PillButton = newStyled(DefaultButton)(templateObject_3$
|
|
2001
|
+
var DefaultButton = newStyled.button(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"], ["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"])), function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.size; }, function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.weight; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.backgroundHover) ? "background-color: ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.backgroundHover) : "filter: brightness(1.4)"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { return props.hasArrow ? "unset" : "none"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; });
|
|
2002
|
+
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"], ["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || 'transparent'; }, function (props) { return props.color || theme.black; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.black; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; });
|
|
2003
|
+
var PillButton = newStyled(DefaultButton)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "], ["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "])));
|
|
1994
2004
|
var RoundedButton = newStyled(DefaultButton)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
|
|
1995
|
-
var templateObject_1$
|
|
2005
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$1;
|
|
1996
2006
|
|
|
1997
2007
|
function insertWithoutScoping(cache, serialized) {
|
|
1998
2008
|
if (cache.inserted[serialized.name] === undefined) {
|
|
@@ -2134,13 +2144,13 @@ var _createEmotion = createEmotion({
|
|
|
2134
2144
|
}),
|
|
2135
2145
|
keyframes = _createEmotion.keyframes;
|
|
2136
2146
|
|
|
2137
|
-
var appearAnimation = keyframes(templateObject_1$
|
|
2138
|
-
var disappearAnimation = keyframes(templateObject_2$
|
|
2139
|
-
var fadeInFromLeft = keyframes(templateObject_3$
|
|
2147
|
+
var appearAnimation = keyframes(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n 0% {\n display: none;\n opacity: 0%;\n transform: translateY(-6px);\n }\n 1% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n display: flex;\n opacity: 100%;\n transform: translateY(0px);\n }\n"], ["\n 0% {\n display: none;\n opacity: 0%;\n transform: translateY(-6px);\n }\n 1% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n display: flex;\n opacity: 100%;\n transform: translateY(0px);\n }\n"])));
|
|
2148
|
+
var disappearAnimation = keyframes(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"], ["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"])));
|
|
2149
|
+
var fadeInFromLeft = keyframes(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2140
2150
|
var fadeInFromRight = keyframes(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2141
2151
|
var fadeInFromTop = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2142
2152
|
var fadeInFromBottom = keyframes(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2143
|
-
var templateObject_1$
|
|
2153
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6;
|
|
2144
2154
|
|
|
2145
2155
|
function Navbar(props) {
|
|
2146
2156
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
@@ -2166,23 +2176,23 @@ function Navbar(props) {
|
|
|
2166
2176
|
})),
|
|
2167
2177
|
button ? (React__default.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)) : React__default.createElement(React__default.Fragment, null))));
|
|
2168
2178
|
}
|
|
2169
|
-
var NavbarContainer = newStyled.div(templateObject_1$
|
|
2170
|
-
var Logo = newStyled.img(templateObject_2$
|
|
2171
|
-
var ControlledNavItem = newStyled.div(templateObject_3$
|
|
2172
|
-
var templateObject_1$
|
|
2179
|
+
var NavbarContainer = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 12px;\n top: 88%;\n left: 0;\n background-color: black;\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 12px;\n top: 88%;\n left: 0;\n background-color: black;\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; }, function (props) { return props.centeredItems ? 'unset' : 'auto'; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, disappearAnimation, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, appearAnimation, appearAnimation);
|
|
2180
|
+
var Logo = newStyled.img(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n cursor: pointer;\n height: 56%;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n cursor: pointer;\n height: 56%;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"])));
|
|
2181
|
+
var ControlledNavItem = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "], ["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "])));
|
|
2182
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2;
|
|
2173
2183
|
|
|
2174
2184
|
function Hero(props) {
|
|
2175
2185
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
2176
2186
|
var _b = useState(imageUrls && imageUrls[0] ? imageUrls[0] : ""), activeBackgroundUrl = _b[0]; _b[1];
|
|
2177
2187
|
return (React__default.createElement(React__default.Fragment, null,
|
|
2178
|
-
React__default.createElement(Container$
|
|
2188
|
+
React__default.createElement(Container$3, { backgroundUrl: activeBackgroundUrl, marginTop: marginTop, height: height },
|
|
2179
2189
|
overlay && (React__default.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
|
|
2180
2190
|
React__default.createElement(HeroContent, null, children))));
|
|
2181
2191
|
}
|
|
2182
|
-
var Container$
|
|
2183
|
-
var Overlay = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
|
|
2184
|
-
var HeroContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n z-index: 2;\n"])));
|
|
2185
|
-
var templateObject_1$
|
|
2192
|
+
var Container$3 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"])), function (props) { return "calc(".concat(props.height, " - ").concat(props.marginTop, ")"); }, function (props) { return props.marginTop; }, function (props) { return props.backgroundUrl; });
|
|
2193
|
+
var Overlay = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
|
|
2194
|
+
var HeroContent = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n z-index: 2;\n"])));
|
|
2195
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$1;
|
|
2186
2196
|
|
|
2187
2197
|
function useIntObs(_a) {
|
|
2188
2198
|
var _b;
|
|
@@ -2252,7 +2262,7 @@ function Fade(props) {
|
|
|
2252
2262
|
root: document,
|
|
2253
2263
|
rootMargin: "-10% 0% -10% 0%"
|
|
2254
2264
|
}), isIntersecting = _b.isIntersecting, ref = _b.ref;
|
|
2255
|
-
return (React__default.createElement(Container, { ref: ref, isVisible: isIntersecting, animation: function () {
|
|
2265
|
+
return (React__default.createElement(Container$2, { ref: ref, isVisible: isIntersecting, animation: function () {
|
|
2256
2266
|
switch (type) {
|
|
2257
2267
|
case 'bottom-to-top':
|
|
2258
2268
|
return fadeInFromBottom;
|
|
@@ -2265,8 +2275,120 @@ function Fade(props) {
|
|
|
2265
2275
|
}
|
|
2266
2276
|
} }, children));
|
|
2267
2277
|
}
|
|
2268
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
|
|
2269
|
-
var templateObject_1;
|
|
2278
|
+
var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
|
|
2279
|
+
var templateObject_1$2;
|
|
2280
|
+
|
|
2281
|
+
function Slider(props) {
|
|
2282
|
+
var children = props.children, forwardedRef = props.forwardedRef, autoplayTicTime = props.autoplayTicTime, _a = props.visibleInactiveSlides, visibleInactiveSlides = _a === undefined ? false : _a, _b = props.showArrowKeys, showArrowKeys = _b === undefined ? false : _b, onSlideChange = props.onSlideChange;
|
|
2283
|
+
var wrapperRef = useRef(null);
|
|
2284
|
+
var _c = useState(1), currentSlide = _c[0], setCurrentSlide = _c[1];
|
|
2285
|
+
var _d = useState(0), translateX = _d[0], setTranslateX = _d[1];
|
|
2286
|
+
useImperativeHandle(forwardedRef, function () {
|
|
2287
|
+
return {
|
|
2288
|
+
goTo: function (option) { return goTo(option); },
|
|
2289
|
+
};
|
|
2290
|
+
}, [children, currentSlide]);
|
|
2291
|
+
var items = useMemo(function () {
|
|
2292
|
+
if (children.length > 1) {
|
|
2293
|
+
var slides = Children.map(children, function (child, index) { return (React__default.createElement(Slide, { key: index }, child)); });
|
|
2294
|
+
return __spreadArray(__spreadArray([
|
|
2295
|
+
React__default.createElement(Slide, { key: children.length + 1, style: { backgroundColor: "red" } }, children[children.length - 1])
|
|
2296
|
+
], slides, true), [
|
|
2297
|
+
React__default.createElement(Slide, { key: children.length + 2, style: { backgroundColor: "red" } }, children[0])
|
|
2298
|
+
], false);
|
|
2299
|
+
}
|
|
2300
|
+
return React__default.createElement(Slide, null, children[0]);
|
|
2301
|
+
}, []);
|
|
2302
|
+
useLayoutEffect(function () {
|
|
2303
|
+
setTranslateX(wrapperRef.current.clientWidth * currentSlide);
|
|
2304
|
+
}, []);
|
|
2305
|
+
useEffect(function () {
|
|
2306
|
+
if (onSlideChange) {
|
|
2307
|
+
onSlideChange(currentSlide);
|
|
2308
|
+
}
|
|
2309
|
+
}, [currentSlide, onSlideChange]);
|
|
2310
|
+
var goTo = useCallback(function (option) {
|
|
2311
|
+
wrapperRef.current.style.transitionDuration = '400ms';
|
|
2312
|
+
switch (option) {
|
|
2313
|
+
case 'prev':
|
|
2314
|
+
if (currentSlide <= 1) {
|
|
2315
|
+
setTranslateX(0);
|
|
2316
|
+
setCurrentSlide(children.length);
|
|
2317
|
+
}
|
|
2318
|
+
else {
|
|
2319
|
+
setTranslateX(wrapperRef.current.clientWidth * (currentSlide - 1));
|
|
2320
|
+
setCurrentSlide(function (prev) { return --prev; });
|
|
2321
|
+
}
|
|
2322
|
+
break;
|
|
2323
|
+
case 'next':
|
|
2324
|
+
if (currentSlide >= children.length) {
|
|
2325
|
+
setTranslateX(wrapperRef.current.clientWidth * (children.length + 1));
|
|
2326
|
+
setCurrentSlide(1);
|
|
2327
|
+
}
|
|
2328
|
+
else {
|
|
2329
|
+
setTranslateX(wrapperRef.current.clientWidth * (currentSlide + 1));
|
|
2330
|
+
setCurrentSlide(function (next) { return ++next; });
|
|
2331
|
+
}
|
|
2332
|
+
break;
|
|
2333
|
+
}
|
|
2334
|
+
}, [children, currentSlide]);
|
|
2335
|
+
useEffect(function () {
|
|
2336
|
+
var transitionEnd = function () {
|
|
2337
|
+
if (currentSlide <= 1) {
|
|
2338
|
+
wrapperRef.current.style.transitionDuration = '0ms';
|
|
2339
|
+
setTranslateX(wrapperRef.current.clientWidth * currentSlide);
|
|
2340
|
+
}
|
|
2341
|
+
if (currentSlide >= children.length) {
|
|
2342
|
+
wrapperRef.current.style.transitionDuration = '0ms';
|
|
2343
|
+
setTranslateX(wrapperRef.current.clientWidth * children.length);
|
|
2344
|
+
}
|
|
2345
|
+
};
|
|
2346
|
+
document.addEventListener("transitionend", transitionEnd);
|
|
2347
|
+
return function () {
|
|
2348
|
+
document.removeEventListener("transitionend", transitionEnd);
|
|
2349
|
+
};
|
|
2350
|
+
}, [currentSlide, children]);
|
|
2351
|
+
useEffect(function () {
|
|
2352
|
+
if (autoplayTicTime) {
|
|
2353
|
+
window.setInterval(function () {
|
|
2354
|
+
goTo('next');
|
|
2355
|
+
}, autoplayTicTime);
|
|
2356
|
+
}
|
|
2357
|
+
}, [goTo, autoplayTicTime]);
|
|
2358
|
+
return (React__default.createElement(Container$1, { visibleInactiveSlides: visibleInactiveSlides },
|
|
2359
|
+
React__default.createElement(SlidesWrapper, { ref: wrapperRef, translateX: translateX }, items),
|
|
2360
|
+
showArrowKeys && (React__default.createElement(React__default.Fragment, null,
|
|
2361
|
+
React__default.createElement(Icon, { callback: function () { return goTo('prev'); }, color: 'black', icon: 'arrow-long' }),
|
|
2362
|
+
React__default.createElement(Icon, { callback: function () { return goTo('next'); }, color: 'black', icon: 'arrow-long' })))));
|
|
2363
|
+
}
|
|
2364
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow: ", ";\n width: 100%;\n button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"], ["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow: ", ";\n width: 100%;\n button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"])), function (props) { return props.visibleInactiveSlides ? 'visible' : 'hidden'; });
|
|
2365
|
+
var SlidesWrapper = newStyled.ul(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"], ["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"])), function (props) { return -props.translateX; });
|
|
2366
|
+
var Slide = newStyled.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
2367
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3;
|
|
2368
|
+
|
|
2369
|
+
function Showcase(props) {
|
|
2370
|
+
var items = props.items, backgroundColor = props.backgroundColor;
|
|
2371
|
+
var _a = useState(undefined), hoveredItemKey = _a[0], setHoveredItemKey = _a[1];
|
|
2372
|
+
var eightItems = useMemo(function () {
|
|
2373
|
+
if (items.length >= 8) {
|
|
2374
|
+
return items.slice(0, 7);
|
|
2375
|
+
}
|
|
2376
|
+
var result = [];
|
|
2377
|
+
var i = 0;
|
|
2378
|
+
while (result.length < 8) {
|
|
2379
|
+
result.push(items[i % items.length]);
|
|
2380
|
+
i++;
|
|
2381
|
+
}
|
|
2382
|
+
return result;
|
|
2383
|
+
}, [items]);
|
|
2384
|
+
return (React__default.createElement(Container, { onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor }, eightItems.map(function (item, index) {
|
|
2385
|
+
return item ? (React__default.createElement(ShowcaseItem, { key: index, onClick: function () { return item.callback(); }, backgroundUrl: item.imageUrl, onMouseEnter: function () { return setHoveredItemKey(index); }, itemKey: index, hoveredItemKey: hoveredItemKey },
|
|
2386
|
+
React__default.createElement("span", null, formatText(item.label, 'uppercase')))) : React__default.createElement(React__default.Fragment, null);
|
|
2387
|
+
})));
|
|
2388
|
+
}
|
|
2389
|
+
var Container = newStyled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n gap: 2px;\n padding: 2px 0;\n background-color: ", ";\n"], ["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n gap: 2px;\n padding: 2px 0;\n background-color: ", ";\n"])), function (props) { return props.backgroundColor || 'white'; });
|
|
2390
|
+
var ShowcaseItem = newStyled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n height: 25vw;\n background-image: url(", ");\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"], ["\n position: relative;\n height: 25vw;\n background-image: url(", ");\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"])), function (props) { return props.backgroundUrl; }, function (props) { return props.hoveredItemKey === props.itemKey || props.hoveredItemKey === undefined ? 'unset' : 'brightness(0.3)'; });
|
|
2391
|
+
var templateObject_1, templateObject_2;
|
|
2270
2392
|
|
|
2271
|
-
export { Button, Fade, Hero, Navbar };
|
|
2393
|
+
export { Button, Fade, Hero, Icon, Navbar, Showcase, Slider };
|
|
2272
2394
|
//# sourceMappingURL=index.esm.js.map
|