nzk-react-components 0.4.6 → 1.0.0-0

package/dist/esm/components/Button/constants.js

@@ -0,0 +1,67 @@
+var THEMES = {
+    primary: {
+        backgroundColor: '#009EE2',
+        color: '#fff',
+        strokeColor: '#00C5ED',
+        shadowColor: '#025899'
+    },
+    confirm: {
+        backgroundColor: '#8CC63F',
+        color: '#fff',
+        strokeColor: '#AFD752',
+        shadowColor: '#579800'
+    },
+    'the-pink': {
+        backgroundColor: '#E40071',
+        color: '',
+        shadowColor: '',
+        strokeColor: ''
+    },
+    'purple': {
+        backgroundColor: '#701EA8',
+        color: '',
+        shadowColor: '#4E1B6D',
+        strokeColor: '#9026C1'
+    },
+    'red': {
+        color: 'white',
+        backgroundColor: '#E20514',
+        strokeColor: '#F60A21',
+        shadowColor: '#931120'
+    },
+    'orange': {
+        color: 'white',
+        backgroundColor: '#F29226',
+        strokeColor: '#F6B230',
+        shadowColor: '#CB6217'
+    },
+    'green': {
+        color: 'white',
+        backgroundColor: '#8DC63F',
+        strokeColor: '#AED752',
+        shadowColor: '#58981F'
+    },
+    'yellow': {
+        color: 'white',
+        backgroundColor: '#FEC532',
+        strokeColor: '#FEE13A',
+        shadowColor: '#C59928'
+    },
+    'white': {
+        color: '',
+        backgroundColor: '#EEEEEE',
+        strokeColor: '#D9D9D9',
+        shadowColor: '#8E9197'
+    }
+};
+var SIZES = {
+    'xx-large': 142,
+    'x-large': 109,
+    large: 71,
+    regular: 50,
+    small: 39,
+    'x-small': 30
+};
+
+export { SIZES, THEMES };
+//# sourceMappingURL=constants.js.map

package/dist/esm/components/Button/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/Button/index.js

@@ -0,0 +1,3 @@
+import Button from './Button.js';
+export { default } from './Button.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/components/Button/utils.js

@@ -0,0 +1,25 @@
+import { getLuminance } from 'polished';
+
+var getTextColor = function (props) {
+    if (props.color) {
+        return props.color;
+    }
+    if (getLuminance(props.backgroundColor) <= 0.5)
+        return '#fff';
+    return '#000';
+};
+var getTextSize = function (props) {
+    if (props.fontSize) {
+        return props.fontSize;
+    }
+    return props.height / 2.5 + "px";
+};
+var getPadding = function (props) {
+    return 0.001 * props.height + "px " + props.height / 2 + "px";
+};
+var getSizeComparedToBase = function (props, originalValue) {
+    return (props.height * originalValue) / 64;
+};
+
+export { getPadding, getSizeComparedToBase, getTextColor, getTextSize };
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/Button/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/DatePicker/DatePicker.js

@@ -0,0 +1,56 @@
+import { __makeTemplateObject } from 'tslib';
+import { getLuminance, darken, lighten } from 'polished';
+import React__default, { useRef, useState, useEffect, forwardRef } from 'react';
+import ReactDatePicker from 'react-datepicker';
+import styled, { css } from 'styled-components';
+import Button from '../Button/Button.js';
+
+var getColors = function (props) {
+    var primary = props.primary;
+    var lum = getLuminance(primary);
+    var light = lum >= 0.5;
+    var secondary = light ? darken(0.2, primary) : lighten(0.2, primary);
+    return {
+        primary: primary,
+        secondary: secondary,
+        color: light ? '#000' : '#fff'
+    };
+};
+var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  .react-datepicker {\n    position: relative;\n    width: 300px;\n  }\n  .react-datepicker__navigation {\n    align-items: center;\n    background: none;\n    display: flex;\n    justify-content: center;\n    text-align: center;\n    cursor: pointer;\n    position: absolute;\n    top: 2px;\n    padding: 0;\n    border: none;\n    z-index: 1;\n    height: 32px;\n    width: 32px;\n    text-indent: -999em;\n    overflow: hidden;\n  }\n  .react-datepicker__navigation-icon::before {\n    border-color: var(--color);\n    border-style: solid;\n    border-width: 5px 5px 0 0;\n    content: \"\";\n    display: block;\n    height: 12px;\n    position: absolute;\n    top: 10px;\n    width: 10px;\n  }\n  .react-datepicker__navigation-icon--previous::before {\n    transform: rotate(225deg);\n    right: -7px;\n  }\n\n  .react-datepicker__navigation-icon--next::before {\n    transform: rotate(45deg);\n    left: -7px;\n  }\n  .react-datepicker__navigation--next {\n    right: 2px;\n  }\n  .react-datepicker__month-container {\n    text-align: center;\n    border-radius: 9px;\n    overflow: hidden;\n    box-shadow: 0 3px 9px 1px rgba(0,0,0,0.3);\n    margin-top: 8px;\n  }\n  .react-datepicker__current-month {\n    padding: 5px 0;\n    font-family: 'Rammetto One';\n    color: var(--color);\n    background: var(--primary);\n  }\n  .react-datepicker__day-names {\n    width: 100%;\n    display: flex;\n    font-weight: bold;\n    color: var(--primary);\n    background-color: var(--secondary);\n    > * { flex: 1; padding: 10px 0; }\n  }\n  .react-datepicker__day {\n    position: relative;\n    background-color: var(--primary);\n    color: var(--color);\n    transition: background-color 0.2s ease-in-out;\n    cursor: pointer;\n    :hover {\n      background-color: var(--secondary);\n      transition: background-color 0.2s ease-in-out;\n    }\n  }\n  .react-datepicker__day--selected {\n    background-color: var(--secondary);\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: var(--secondary);\n    transition: background-color 0.2s ease-in-out;\n  }\n  .react-datepicker__day--outside-month {\n    background-color: #ffffffff;\n    color: var(--primary);\n  }\n  .react-datepicker__week {\n    width: 100%;\n    display: flex;\n    > * { flex: 1; padding: 10px; }\n  }\n"], ["\n  ", "\n  .react-datepicker {\n    position: relative;\n    width: 300px;\n  }\n  .react-datepicker__navigation {\n    align-items: center;\n    background: none;\n    display: flex;\n    justify-content: center;\n    text-align: center;\n    cursor: pointer;\n    position: absolute;\n    top: 2px;\n    padding: 0;\n    border: none;\n    z-index: 1;\n    height: 32px;\n    width: 32px;\n    text-indent: -999em;\n    overflow: hidden;\n  }\n  .react-datepicker__navigation-icon::before {\n    border-color: var(--color);\n    border-style: solid;\n    border-width: 5px 5px 0 0;\n    content: \"\";\n    display: block;\n    height: 12px;\n    position: absolute;\n    top: 10px;\n    width: 10px;\n  }\n  .react-datepicker__navigation-icon--previous::before {\n    transform: rotate(225deg);\n    right: -7px;\n  }\n\n  .react-datepicker__navigation-icon--next::before {\n    transform: rotate(45deg);\n    left: -7px;\n  }\n  .react-datepicker__navigation--next {\n    right: 2px;\n  }\n  .react-datepicker__month-container {\n    text-align: center;\n    border-radius: 9px;\n    overflow: hidden;\n    box-shadow: 0 3px 9px 1px rgba(0,0,0,0.3);\n    margin-top: 8px;\n  }\n  .react-datepicker__current-month {\n    padding: 5px 0;\n    font-family: 'Rammetto One';\n    color: var(--color);\n    background: var(--primary);\n  }\n  .react-datepicker__day-names {\n    width: 100%;\n    display: flex;\n    font-weight: bold;\n    color: var(--primary);\n    background-color: var(--secondary);\n    > * { flex: 1; padding: 10px 0; }\n  }\n  .react-datepicker__day {\n    position: relative;\n    background-color: var(--primary);\n    color: var(--color);\n    transition: background-color 0.2s ease-in-out;\n    cursor: pointer;\n    :hover {\n      background-color: var(--secondary);\n      transition: background-color 0.2s ease-in-out;\n    }\n  }\n  .react-datepicker__day--selected {\n    background-color: var(--secondary);\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: var(--secondary);\n    transition: background-color 0.2s ease-in-out;\n  }\n  .react-datepicker__day--outside-month {\n    background-color: #ffffffff;\n    color: var(--primary);\n  }\n  .react-datepicker__week {\n    width: 100%;\n    display: flex;\n    > * { flex: 1; padding: 10px; }\n  }\n"])), function (props) {
+    var colors = getColors(props);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      --primary: ", ";\n      --secondary: ", ";\n      --color: ", ";\n    "], ["\n      --primary: ", ";\n      --secondary: ", ";\n      --color: ", ";\n    "])), colors.primary, colors.secondary, colors.color);
+});
+var DatePicker = function (props) {
+    var datePickerRef = useRef(null);
+    var _a = useState(props.defaultValue || new Date()), startDate = _a[0], setStartDate = _a[1];
+    useEffect(function () {
+        if (props.autoFocus && datePickerRef.current && datePickerRef.current.input) {
+            datePickerRef.current.input.focus();
+        }
+    }, []);
+    var ButtonInput = forwardRef(function (_a, ref) {
+        var value = _a.value, onClick = _a.onClick;
+        if (props.input)
+            return React__default.cloneElement(props.input, { onClick: onClick, ref: ref, children: value });
+        return React__default.createElement(Button, { onClick: onClick, ref: ref, theme: 'primary', size: 'small' }, value);
+    });
+    useEffect(function () {
+        if (props.onChange) {
+            props.onChange(startDate);
+        }
+    }, [startDate]);
+    return React__default.createElement(Wrapper, { primary: props.primary },
+        React__default.createElement(ReactDatePicker, { ref: datePickerRef, dateFormat: "d MMMM yyyy", withPortal: true, selected: startDate, onChange: function (date) { return setStartDate(date); }, customInput: React__default.createElement(ButtonInput, null) }));
+};
+DatePicker.defaultProps = {
+    primary: '#1EA7FD',
+    autoFocus: false,
+    onChange: null,
+    range: false,
+    defaultValue: null,
+    input: null,
+};
+var templateObject_1, templateObject_2;
+
+export { DatePicker as default };
+//# sourceMappingURL=DatePicker.js.map

package/dist/esm/components/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/DatePicker/index.js

@@ -0,0 +1,3 @@
+import DatePicker from './DatePicker.js';
+export { default } from './DatePicker.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/components/IconButton/IconButton.js

@@ -0,0 +1,17 @@
+import { __makeTemplateObject, __assign } from 'tslib';
+import React__default from 'react';
+import styled from 'styled-components';
+import Button from '../Button/Button.js';
+import { SIZES } from '../Button/constants.js';
+
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  > :first-child {\n    z-index: 2;\n  }\n  > :nth-child(2) {\n    margin-left: -", "px;\n    z-index: 1;\n  }\n"], ["\n  display: flex;\n  > :first-child {\n    z-index: 2;\n  }\n  > :nth-child(2) {\n    margin-left: -", "px;\n    z-index: 1;\n  }\n"])), function (props) { return props.overlap; });
+var IconButton = (function (props) {
+    var W = (props.size ? SIZES[props.size] : props.height) || 0;
+    return (React__default.createElement(Wrapper, { overlap: 0.3 * W },
+        React__default.createElement(Button, __assign({}, props, { round: true }), props.icon),
+        React__default.createElement(Button, __assign({}, props))));
+});
+var templateObject_1;
+
+export { IconButton as default };
+//# sourceMappingURL=IconButton.js.map

package/dist/esm/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/esm/components/IconButton/index.js

@@ -0,0 +1,3 @@
+import IconButton from './IconButton.js';
+export { default } from './IconButton.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/IconButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/components/Input/Input.js

@@ -0,0 +1,13 @@
+import { __makeTemplateObject } from 'tslib';
+import styled, { css } from 'styled-components';
+
+var Input = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  outline: none;\n  padding: 6px 10px;\n  font-size: 17px;\n  font-family: 'Libre Baskerville';\n  ", "\n"], ["\n  outline: none;\n  padding: 6px 10px;\n  font-size: 17px;\n  font-family: 'Libre Baskerville';\n  ", "\n"])), function (props) { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: ", ";\n    border: ", " solid ", ";\n  "], ["\n    border-radius: ", ";\n    border: ", " solid ", ";\n  "])), props.borderRadius, props.borderWidth, props.borderColor); });
+Input.defaultProps = {
+    borderRadius: '6px',
+    borderColor: '#000',
+    borderWidth: '2px'
+};
+var templateObject_1, templateObject_2;
+
+export { Input as default };
+//# sourceMappingURL=Input.js.map

package/dist/esm/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/esm/components/Input/index.js

@@ -0,0 +1,3 @@
+import Input from './Input.js';
+export { default } from './Input.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/components/Modal/Modal.js

@@ -0,0 +1,35 @@
+import React__default, { useMemo } from 'react';
+import 'tslib';
+import SvgClose from '../../icons/Close.js';
+import Button from '../Button/Button.js';
+import { Wrapper, QuitButton, Title, Content, Actions } from './Modal.styles.js';
+
+var Modal = function (props) {
+    var title = useMemo(function () {
+        if (props.errorMessage)
+            return 'Error';
+        return props.title;
+    }, []);
+    var content = useMemo(function () {
+        if (props.errorMessage)
+            return props.errorMessage;
+        if (props.message)
+            return props.message;
+        return props.children;
+    }, []);
+    var actions = useMemo(function () {
+        if (props.actions)
+            return props.actions;
+        return null;
+    }, []);
+    return React__default.createElement(Wrapper, null,
+        props.dismiss && React__default.createElement(QuitButton, { onClick: props.dismiss },
+            React__default.createElement(Button, { round: true, theme: 'red', size: 'regular' },
+                React__default.createElement(SvgClose, null))),
+        React__default.createElement(Title, null, title),
+        content && React__default.createElement(Content, { hasError: Boolean(props.errorMessage && true) }, content),
+        React__default.createElement(Actions, null, Array.isArray(actions) && actions.map(function (action) { return action; })));
+};
+
+export { Modal as default };
+//# sourceMappingURL=Modal.js.map

package/dist/esm/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/Modal/Modal.styles.js

@@ -0,0 +1,12 @@
+import { __makeTemplateObject } from 'tslib';
+import styled, { css } from 'styled-components';
+
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background-color: #341644;\n  border-radius: 45px;\n  padding-bottom: 15px;\n  padding: 20px 40px;\n  max-width: 760px;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  box-sizing: border-box;\n  color: #fff;\n  display: inline-flex;\n  flex-direction: column;\n  min-width: 340px;\n"], ["\n  position: relative;\n  background-color: #341644;\n  border-radius: 45px;\n  padding-bottom: 15px;\n  padding: 20px 40px;\n  max-width: 760px;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  box-sizing: border-box;\n  color: #fff;\n  display: inline-flex;\n  flex-direction: column;\n  min-width: 340px;\n"])));
+var Title = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: #fff;\n  font-family: 'Rammetto One';\n  text-align: center;\n  font-size: 26px;\n  margin-bottom: 10px;\n"], ["\n  color: #fff;\n  font-family: 'Rammetto One';\n  text-align: center;\n  font-size: 26px;\n  margin-bottom: 10px;\n"])));
+var Content = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: #ffffff0a;\n  flex: 1;\n  border-radius: 20px;\n  font-size: 18px;\n  height: 100%;\n  padding: 20px 15px;\n  ", "\n"], ["\n  background-color: #ffffff0a;\n  flex: 1;\n  border-radius: 20px;\n  font-size: 18px;\n  height: 100%;\n  padding: 20px 15px;\n  ", "\n"])), function (props) { return props.hasError && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    box-shadow: 0px 0px 3px 1px #ff000055;\n  "], ["\n    box-shadow: 0px 0px 3px 1px #ff000055;\n  "]))); });
+var Actions = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin-top: 15px;\n  > * { margin-right: 10px; }\n  > :last-child { margin-right: 0; }\n"], ["\n  display: flex;\n  justify-content: center;\n  margin-top: 15px;\n  > * { margin-right: 10px; }\n  > :last-child { margin-right: 0; }\n"])));
+var QuitButton = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(11px, -16px);\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(11px, -16px);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { Actions, Content, QuitButton, Title, Wrapper };
+//# sourceMappingURL=Modal.styles.js.map

package/dist/esm/components/Modal/Modal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/esm/components/Modal/ModalState.js

@@ -0,0 +1,55 @@
+import { __makeTemplateObject, __assign } from 'tslib';
+import React__default, { useState, useMemo } from 'react';
+import shortid from 'shortid';
+import styled from 'styled-components';
+import { createContainer } from 'unstated-next';
+
+var Overlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 999999999;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 999999999;\n"])), function (props) { return props.active ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0)'; });
+var ModalState = function () {
+    var _a = useState({}), modals = _a[0], setModals = _a[1];
+    var modalsStack = useMemo(function () {
+        return Object.keys(modals).map(function (key) { return modals[key]; });
+    }, [modals]);
+    var lastModalKey = useMemo(function () {
+        return Object.keys(modals)[Object.keys(modals).length - 1];
+    }, [modals]);
+    var close = function (key) {
+        var keyToRemove = key || lastModalKey;
+        setModals(function (modals) {
+            var newModals = __assign({}, modals);
+            delete newModals[keyToRemove];
+            return newModals;
+        });
+    };
+    var open = function (modal, key) {
+        var id = "" + (key || shortid.generate());
+        setModals(function (modals) {
+            var newModals = __assign({}, modals);
+            newModals[id] = React__default.cloneElement(modal, { id: id, dismiss: function () { return close(id); } });
+            return newModals;
+        });
+        return id;
+    };
+    return { open: open, close: close, modals: modalsStack };
+};
+var ModalContainer = createContainer(ModalState);
+var useModalState = ModalContainer.useContainer;
+var Modals = function () {
+    var _a = useModalState(), modals = _a.modals, close = _a.close;
+    if (modals.length === 0)
+        return null;
+    return React__default.createElement(React__default.Fragment, null, modals.map(function (m, i) { return React__default.createElement(Overlay, { onClick: function () { return close(); }, active: i === modals.length - 1 },
+        React__default.createElement("div", { onClick: function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+            }, role: "alert" }, m)); }));
+};
+var ModalProvider = function (props) {
+    return React__default.createElement(ModalContainer.Provider, null,
+        React__default.createElement(Modals, null),
+        React__default.cloneElement(props.children, props));
+};
+var templateObject_1;
+
+export { ModalProvider, useModalState };
+//# sourceMappingURL=ModalState.js.map

package/dist/esm/components/Modal/ModalState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalState.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/Modal/index.js

@@ -0,0 +1,3 @@
+import Modal from './Modal.js';
+export { default } from './Modal.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/hooks/useAsync.js

@@ -0,0 +1,53 @@
+import { __assign } from 'tslib';
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+var initialProps = {
+    asyncFunc: function () { },
+    immediate: false,
+    funcParams: {},
+    initialData: null
+};
+var useAsync = function (props) {
+    if (props === void 0) { props = initialProps; }
+    var _a = __assign({}, props), asyncFunc = _a.asyncFunc, immediate = _a.immediate, funcParams = _a.funcParams, initialData = _a.initialData;
+    var _b = useState(immediate), loading = _b[0], setLoading = _b[1];
+    var _c = useState(initialData), data = _c[0], setData = _c[1];
+    var _d = useState(null), error = _d[0], setError = _d[1];
+    var mountedRef = useRef(true);
+    var execute = useCallback(function (params) {
+        setLoading(true);
+        return asyncFunc(__assign(__assign({}, funcParams), params))
+            .then(function (res) {
+            if (!mountedRef.current)
+                return null;
+            setData(res);
+            setError(null);
+            setLoading(false);
+            return res;
+        })
+            .catch(function (err) {
+            if (!mountedRef.current)
+                return null;
+            setError(err);
+            setLoading(false);
+            throw err;
+        });
+    }, [asyncFunc, funcParams]);
+    useEffect(function () {
+        if (immediate) {
+            execute(funcParams);
+        }
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    return {
+        execute: execute,
+        loading: loading,
+        data: data,
+        error: error
+    };
+};
+
+export { useAsync as default };
+//# sourceMappingURL=useAsync.js.map

package/dist/esm/hooks/useAsync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAsync.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/hooks/useCloudinary/index.js

@@ -0,0 +1,86 @@
+var DefaultProps = {
+    cloudName: 'nzk',
+    unsignedUploadPreset: 'juz5g1j1'
+};
+var useCloudinary = function (props) {
+    var cloudName = (props && props.cloudName) || DefaultProps.cloudName;
+    var unsignedUploadPreset = (props && props.unsignedUploadPreset) || DefaultProps.unsignedUploadPreset;
+    var uploadTag = props && props.uploadTag;
+    var uploadImage = function (file, onComplete) {
+        var url = "https://api.cloudinary.com/v1_1/" + cloudName + "/upload";
+        var xhr = new XMLHttpRequest();
+        var fd = new FormData();
+        xhr.open('POST', url, true);
+        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4 && xhr.status === 200) {
+                var response = JSON.parse(xhr.responseText);
+                if (onComplete) {
+                    onComplete(response.secure_url);
+                }
+            }
+        };
+        fd.append('upload_preset', unsignedUploadPreset);
+        if (uploadTag)
+            fd.append('tags', uploadTag);
+        if (file instanceof Blob) {
+            fd.append('file', file);
+            xhr.send(fd);
+        }
+        else {
+            fetch(file).then(function (response) {
+                response.blob().then(function (blobFile) {
+                    fd.append('file', blobFile);
+                    xhr.send(fd);
+                });
+            });
+        }
+    };
+    var promiseUploadImage = function (file) {
+        return new Promise(function (resolve, reject) {
+            var url = "https://api.cloudinary.com/v1_1/" + cloudName + "/upload";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+            xhr.addEventListener('error', function () {
+                return reject(new Error("Couldn't reach cloudinary to upload image"));
+            });
+            xhr.open('POST', url, true);
+            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
+                    var response = JSON.parse(xhr.responseText);
+                    if (!response.secure_url) {
+                        return reject(new Error("No secure_url returned by cloudinary"));
+                    }
+                    return resolve(response.secure_url);
+                }
+                if (xhr.readyState === 4 && xhr.status >= 300) {
+                    return reject(new Error("Cloudinary returned error code: " + xhr.status));
+                }
+                return null;
+            };
+            fd.append('upload_preset', unsignedUploadPreset);
+            if (uploadTag)
+                fd.append('tags', uploadTag);
+            if (file instanceof Blob) {
+                fd.append('file', file);
+                xhr.send(fd);
+            }
+            else {
+                fetch(file).then(function (response) {
+                    response.blob().then(function (blobFile) {
+                        fd.append('file', blobFile);
+                        xhr.send(fd);
+                    });
+                });
+            }
+        });
+    };
+    return {
+        uploadImage: uploadImage,
+        promiseUploadImage: promiseUploadImage
+    };
+};
+
+export { useCloudinary as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/useCloudinary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/hooks/useConfettis/animations.js

@@ -0,0 +1,67 @@
+import { __assign, __awaiter, __generator } from 'tslib';
+import confetti from 'canvas-confetti';
+
+function randomInRange(min, max) {
+    return Math.random() * (max - min) + min;
+}
+var ANIMATIONS = {
+    basicCanon: function (_a) {
+        var _b = _a.confettiOptions, _c = _b.particleCount, particleCount = _c === void 0 ? 100 : _c, _d = _b.spread, spread = _d === void 0 ? 70 : _d, _e = _b.origin, origin = _e === void 0 ? { y: 0.6 } : _e;
+        confetti({
+            particleCount: particleCount,
+            spread: spread,
+            origin: origin,
+        });
+    },
+    fireworks: function (_a) {
+        var _b = _a.durationInMs, durationInMs = _b === void 0 ? 2000 : _b, confettiOptions = _a.confettiOptions;
+        var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+        var animationEnd = Date.now() + durationInMs;
+        var interval = setInterval(function () {
+            var timeLeft = animationEnd - Date.now();
+            if (timeLeft <= 0) {
+                return clearInterval(interval);
+            }
+            var particleCount = 50 * (timeLeft / durationInMs);
+            confetti(__assign(__assign(__assign({}, defaults), confettiOptions), { particleCount: particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
+            confetti(__assign(__assign(__assign({}, defaults), confettiOptions), { particleCount: particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
+            return null;
+        }, 250);
+    },
+    sideCanons: function (_a) {
+        var _b = _a.durationInMs, durationInMs = _b === void 0 ? 2000 : _b, _c = _a.colors, colors = _c === void 0 ? ["#bb0000", "#ffffff"] : _c, _d = _a.confettiOptions, confettiOptions = _d === void 0 ? {
+            angle: 60,
+            spread: 55,
+            particleCount: 2,
+            origin: { x: 0, y: 0.5 },
+        } : _d;
+        return __awaiter(void 0, void 0, void 0, function () {
+            function frame() {
+                confetti(__assign({}, options));
+                confetti(__assign(__assign({}, options), { angle: 2 * options.angle, origin: __assign(__assign({}, options.origin), { x: 1 - options.origin.x }) }));
+                if (Date.now() < end) {
+                    requestAnimationFrame(frame);
+                }
+            }
+            var end, options;
+            var _e, _f;
+            return __generator(this, function (_g) {
+                end = Date.now() + durationInMs;
+                options = {
+                    angle: confettiOptions.angle || 60,
+                    spread: confettiOptions.spread || 55,
+                    particleCount: confettiOptions.particleCount || 2,
+                    colors: colors || ["#bb0000", "#ffffff"],
+                    origin: {
+                        x: ((_e = confettiOptions.origin) === null || _e === void 0 ? void 0 : _e.x) || 0,
+                        y: ((_f = confettiOptions.origin) === null || _f === void 0 ? void 0 : _f.y) || 0.5,
+                    },
+                };
+                return [2, frame()];
+            });
+        });
+    },
+};
+
+export { ANIMATIONS };
+//# sourceMappingURL=animations.js.map

package/dist/esm/hooks/useConfettis/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/hooks/useConfettis/index.js

@@ -0,0 +1,20 @@
+import confetti from 'canvas-confetti';
+import { ANIMATIONS } from './animations.js';
+
+var useConfettis = function () {
+    var cannon = function () {
+        confetti({
+            particleCount: 100,
+            spread: 70,
+            origin: { y: 0.6 }
+        });
+    };
+    return {
+        cannon: cannon,
+        confetti: confetti,
+        ANIMATIONS: ANIMATIONS
+    };
+};
+
+export { useConfettis as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/useConfettis/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/hooks/useDebounce.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay) {
+    var _a = useState(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
+    useEffect(function () {
+        var timer = setTimeout(function () { return setDebouncedValue(value); }, delay || 500);
+        return function () {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}
+
+export { useDebounce as default };
+//# sourceMappingURL=useDebounce.js.map

package/dist/esm/hooks/useDebounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounce.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}