@arconnect/components - npm Package Compare versions

Comparing version 0.1.16 to 0.1.17

dist/commonjs/hooks/index.d.ts

 export * from "./useInput";
 export * from "./useChecbox";
+export * from "./useModal";

dist/commonjs/hooks/index.js

@@ -19,1 +19,2 @@ "use strict";
 __exportStar(require("./useChecbox"), exports);
+__exportStar(require("./useModal"), exports);

dist/commonjs/index.d.ts

@@ -15,2 +15,3 @@ export * from "./hooks";
 export * from "./Loading";
+export * from "./Modal";
 export { useToasts } from "./Toast/utils";

dist/commonjs/index.js

@@ -32,3 +32,4 @@ "use strict";
 __exportStar(require("./Loading"), exports);
+__exportStar(require("./Modal"), exports);
 var utils_1 = require("./Toast/utils");
 Object.defineProperty(exports, "useToasts", { enumerable: true, get: function () { return utils_1.useToasts; } });

dist/commonjs/Provider/index.js

@@ -83,3 +83,3 @@ "use strict";
 var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');\n\n  body {\n    background-color: ", ";\n    color: ", ";\n    font-family: 'Manrope VF', 'Manrope', sans-serif;\n    letter-spacing: .5px;\n  }\n\n  input, textarea, button, select {\n    font-family: 'Manrope VF', 'Manrope', sans-serif;\n    letter-spacing: .5px;\n  }\n"], ["\n  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');\n\n  body {\n    background-color: ", ";\n    color: ", ";\n    font-family: 'Manrope VF', 'Manrope', sans-serif;\n    letter-spacing: .5px;\n  }\n\n  input, textarea, button, select {\n    font-family: 'Manrope VF', 'Manrope', sans-serif;\n    letter-spacing: .5px;\n  }\n"])), function (props) { return props.dark ? "#000" : "#fff"; }, function (props) { return props.dark ? "#fff" : "#000"; });
-var ToastsWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: fixed;\n  flex-direction: column;\n  gap: 1rem;\n  bottom: 1rem;\n  left: 1rem;\n  right: 1rem;\n  z-index: 10000;\n"], ["\n  display: flex;\n  position: fixed;\n  flex-direction: column;\n  gap: 1rem;\n  bottom: 1rem;\n  left: 1rem;\n  right: 1rem;\n  z-index: 10000;\n"])));
+var ToastsWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: fixed;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 1rem;\n  bottom: 1rem;\n  right: 1rem;\n  max-width: calc(100% - 2rem);\n  width: 420px;\n  z-index: 10000;\n"], ["\n  display: flex;\n  position: fixed;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 1rem;\n  bottom: 1rem;\n  right: 1rem;\n  max-width: calc(100% - 2rem);\n  width: 420px;\n  z-index: 10000;\n"])));
 var templateObject_1, templateObject_2;

dist/commonjs/Toast/index.js

@@ -121,3 +121,3 @@ "use strict";
     }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 1rem;\n  color: #fff;\n  font-weight: 500;\n  background-color: #000;\n  border-radius: 8px;\n  //padding: .5rem 1.1rem calc(.5rem + ", ");\n  padding: .5rem 1.1rem;\n  overflow: hidden;\n  border: ", ";\n  transition: all .23s ease-in-out;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 1rem;\n  color: #fff;\n  font-weight: 500;\n  background-color: #000;\n  border-radius: 8px;\n  //padding: .5rem 1.1rem calc(.5rem + ", ");\n  padding: .5rem 1.1rem;\n  overflow: hidden;\n  border: ", ";\n  transition: all .23s ease-in-out;\n"])), progressHeight, function (props) { return props.displayTheme === "light" ? "none" : "2px solid rgb(" + props.theme.cardBorder + ")"; });
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 1rem;\n  color: #fff;\n  font-weight: 500;\n  background-color: #000;\n  border-radius: 8px;\n  //padding: .5rem 1.1rem calc(.5rem + ", ");\n  padding: .5rem 1.1rem;\n  width: calc(100% - 2.2rem);\n  overflow: hidden;\n  border: ", ";\n  transition: all .23s ease-in-out;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 1rem;\n  color: #fff;\n  font-weight: 500;\n  background-color: #000;\n  border-radius: 8px;\n  //padding: .5rem 1.1rem calc(.5rem + ", ");\n  padding: .5rem 1.1rem;\n  width: calc(100% - 2.2rem);\n  overflow: hidden;\n  border: ", ";\n  transition: all .23s ease-in-out;\n"])), progressHeight, function (props) { return props.displayTheme === "light" ? "none" : "2px solid rgb(" + props.theme.cardBorder + ")"; });
 var resultColors = {
@@ -124,0 +124,0 @@ success: "20, 209, 16",

dist/commonjs/Toast/Toast.stories.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { ComponentMeta, ComponentStory } from "@storybook/react";
@@ -8,1 +9,2 @@ import { Toast } from "./index";
 export declare const Success: ComponentStory<typeof Toast>;
+export declare const Demo: () => JSX.Element;

dist/commonjs/Toast/Toast.stories.js

@@ -14,5 +14,7 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Success = exports.Error = exports.Info = void 0;
+exports.Demo = exports.Success = exports.Error = exports.Info = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var Button_1 = require("../Button");
 var index_1 = require("./index");
+var utils_1 = require("./utils");
 exports.default = {
@@ -41,1 +43,10 @@ title: "Toast",
 exports.Success.args = __assign(__assign({}, defaultArgs), { type: "success" });
+var Demo = function () {
+    var setToast = (0, utils_1.useToasts)().setToast;
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ onClick: function () { return setToast({
+            type: "info",
+            content: "This is a toast",
+            duration: 3000
+        }); } }, { children: "Show toast!" })));
+};
+exports.Demo = Demo;

dist/module/hooks/index.d.ts

 export * from "./useInput";
 export * from "./useChecbox";
+export * from "./useModal";

dist/module/hooks/index.js

 export * from "./useInput";
 export * from "./useChecbox";
+export * from "./useModal";

dist/module/index.d.ts

@@ -15,2 +15,3 @@ export * from "./hooks";
 export * from "./Loading";
+export * from "./Modal";
 export { useToasts } from "./Toast/utils";

dist/module/index.js

@@ -15,2 +15,3 @@ export * from "./hooks";
 export * from "./Loading";
+export * from "./Modal";
 export { useToasts } from "./Toast/utils";

dist/module/Provider/index.js

@@ -56,3 +56,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');\n\n  body {\n    background-color: ", ";\n    color: ", ";\n    font-family: 'Manrope VF', 'Manrope', sans-serif;\n    letter-spacing: .5px;\n  }\n\n  input, textarea, button, select {\n    font-family: 'Manrope VF', 'Manrope', sans-serif;\n    letter-spacing: .5px;\n  }\n"], ["\n  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');\n\n  body {\n    background-color: ", ";\n    color: ", ";\n    font-family: 'Manrope VF', 'Manrope', sans-serif;\n    letter-spacing: .5px;\n  }\n\n  input, textarea, button, select {\n    font-family: 'Manrope VF', 'Manrope', sans-serif;\n    letter-spacing: .5px;\n  }\n"])), function (props) { return props.dark ? "#000" : "#fff"; }, function (props) { return props.dark ? "#fff" : "#000"; });
-var ToastsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: fixed;\n  flex-direction: column;\n  gap: 1rem;\n  bottom: 1rem;\n  left: 1rem;\n  right: 1rem;\n  z-index: 10000;\n"], ["\n  display: flex;\n  position: fixed;\n  flex-direction: column;\n  gap: 1rem;\n  bottom: 1rem;\n  left: 1rem;\n  right: 1rem;\n  z-index: 10000;\n"])));
+var ToastsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: fixed;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 1rem;\n  bottom: 1rem;\n  right: 1rem;\n  max-width: calc(100% - 2rem);\n  width: 420px;\n  z-index: 10000;\n"], ["\n  display: flex;\n  position: fixed;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 1rem;\n  bottom: 1rem;\n  right: 1rem;\n  max-width: calc(100% - 2rem);\n  width: 420px;\n  z-index: 10000;\n"])));
 var templateObject_1, templateObject_2;

dist/module/Toast/index.js

@@ -114,3 +114,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 1rem;\n  color: #fff;\n  font-weight: 500;\n  background-color: #000;\n  border-radius: 8px;\n  //padding: .5rem 1.1rem calc(.5rem + ", ");\n  padding: .5rem 1.1rem;\n  overflow: hidden;\n  border: ", ";\n  transition: all .23s ease-in-out;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 1rem;\n  color: #fff;\n  font-weight: 500;\n  background-color: #000;\n  border-radius: 8px;\n  //padding: .5rem 1.1rem calc(.5rem + ", ");\n  padding: .5rem 1.1rem;\n  overflow: hidden;\n  border: ", ";\n  transition: all .23s ease-in-out;\n"])), progressHeight, function (props) { return props.displayTheme === "light" ? "none" : "2px solid rgb(" + props.theme.cardBorder + ")"; });
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 1rem;\n  color: #fff;\n  font-weight: 500;\n  background-color: #000;\n  border-radius: 8px;\n  //padding: .5rem 1.1rem calc(.5rem + ", ");\n  padding: .5rem 1.1rem;\n  width: calc(100% - 2.2rem);\n  overflow: hidden;\n  border: ", ";\n  transition: all .23s ease-in-out;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 1rem;\n  color: #fff;\n  font-weight: 500;\n  background-color: #000;\n  border-radius: 8px;\n  //padding: .5rem 1.1rem calc(.5rem + ", ");\n  padding: .5rem 1.1rem;\n  width: calc(100% - 2.2rem);\n  overflow: hidden;\n  border: ", ";\n  transition: all .23s ease-in-out;\n"])), progressHeight, function (props) { return props.displayTheme === "light" ? "none" : "2px solid rgb(" + props.theme.cardBorder + ")"; });
 var resultColors = {
@@ -117,0 +117,0 @@ success: "20, 209, 16",

dist/module/Toast/Toast.stories.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { ComponentMeta, ComponentStory } from "@storybook/react";
@@ -8,1 +9,2 @@ import { Toast } from "./index";
 export declare const Success: ComponentStory<typeof Toast>;
+export declare const Demo: () => JSX.Element;

dist/module/Toast/Toast.stories.js

@@ -13,3 +13,5 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../Button";
 import { Toast } from "./index";
+import { useToasts } from "./utils";
 export default {
@@ -38,1 +40,9 @@ title: "Toast",
 Success.args = __assign(__assign({}, defaultArgs), { type: "success" });
+export var Demo = function () {
+    var setToast = useToasts().setToast;
+    return (_jsx(Button, __assign({ onClick: function () { return setToast({
+            type: "info",
+            content: "This is a toast",
+            duration: 3000
+        }); } }, { children: "Show toast!" })));
+};

package.json

 {
   "name": "@arconnect/components",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "private": false,
@@ -5,0 +5,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

185117

increased by10.04%

Number of package files

142

increased by9.23%

Lines of code

3272

increased by9.61%

No dependency changes