pixelize-design-library 1.0.44 → 1.0.45

package/dist/Components/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import "react-datepicker/dist/react-datepicker.css";
 import { DatePickerProps } from "./DatePickerProps";
-export default function DatePicker({ selectedDate, onChange, placeholderText, dateFormat, showTimeSelect, timeFormat, timeIntervals, timeCaption, dateTimeFormat, }: DatePickerProps): React.JSX.Element;
+export default function DatePicker({ selectedDate, onChange, placeholderText, dateFormat, showTimeSelect, timeFormat, timeIntervals, timeCaption, dateTimeFormat, id, name, label, }: DatePickerProps): React.JSX.Element;

package/dist/Components/DatePicker/DatePicker.js

@@ -12,14 +12,16 @@ var react_datepicker_1 = __importDefault(require("react-datepicker"));
 require("react-datepicker/dist/react-datepicker.css");
 var styled_1 = __importDefault(require("@emotion/styled"));
 var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 5px;\n  padding: 10px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);\n  }\n  .react-datepicker__day--selected {\n    background-color: #4caf50 !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"], ["\n  border-radius: 5px;\n  padding: 10px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);\n  }\n  .react-datepicker__day--selected {\n    background-color: #4caf50 !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"])));
+var Label = styled_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  font-weight: bold;\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  font-weight: bold;\n"])));
 function DatePicker(_a) {
-    var selectedDate = _a.selectedDate, onChange = _a.onChange, _b = _a.placeholderText, placeholderText = _b === void 0 ? "Select a date" : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? "MM/dd/yyyy" : _c, _d = _a.showTimeSelect, showTimeSelect = _d === void 0 ? false : _d, _e = _a.timeFormat, timeFormat = _e === void 0 ? "HH:mm aa" : _e, _f = _a.timeIntervals, timeIntervals = _f === void 0 ? 30 : _f, _g = _a.timeCaption, timeCaption = _g === void 0 ? "Time" : _g, dateTimeFormat = _a.dateTimeFormat;
+    var selectedDate = _a.selectedDate, onChange = _a.onChange, _b = _a.placeholderText, placeholderText = _b === void 0 ? "Select a date" : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? "MM/dd/yyyy" : _c, _d = _a.showTimeSelect, showTimeSelect = _d === void 0 ? false : _d, _e = _a.timeFormat, timeFormat = _e === void 0 ? "HH:mm aa" : _e, _f = _a.timeIntervals, timeIntervals = _f === void 0 ? 30 : _f, _g = _a.timeCaption, timeCaption = _g === void 0 ? "Time" : _g, dateTimeFormat = _a.dateTimeFormat, id = _a.id, name = _a.name, label = _a.label;
     return (react_1.default.createElement(DatePickerContainer, null,
+        label && react_1.default.createElement(Label, { htmlFor: id }, label),
         react_1.default.createElement(react_datepicker_1.default, { selected: selectedDate, onChange: onChange, placeholderText: placeholderText, dateFormat: showTimeSelect
                 ? dateTimeFormat
                     ? dateTimeFormat
                     : "MM/dd/yyyy h:mm aa"
-                : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption })));
+                : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name })));
 }
 exports.default = DatePicker;
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/dist/Components/DatePicker/DatePickerProps.d.ts

@@ -8,4 +8,7 @@ export type DatePickerProps = {
     timeIntervals?: number;
     timeCaption?: string;
     dateTimeFormat?: string;
+    label?: string;
+    id?: string;
+    name?: string;
 };

package/dist/Components/Loading/Loading.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { LoadingProps } from "./LoadingProps";
-export default function Loading({ text, isLoading }: LoadingProps): React.JSX.Element | null;
+export default function Loading({ text, isLoading, onlytext }: LoadingProps): React.JSX.Element | null;

package/dist/Components/Loading/Loading.js

@@ -1,18 +1,26 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
+var react_3 = require("@emotion/react");
+var blurAnimation = (0, react_3.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    filter: blur(0);\n  }\n  50% {\n    filter: blur(2px);\n  }\n  100% {\n    filter: blur(0);\n  }\n"], ["\n  0% {\n    filter: blur(0);\n  }\n  50% {\n    filter: blur(2px);\n  }\n  100% {\n    filter: blur(0);\n  }\n"])));
+var colorTransition = (0, react_3.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    color: black;\n  }\n  50% {\n    color: gray;\n  }\n  100% {\n    color: black;\n  }\n"], ["\n  0% {\n    color: black;\n  }\n  50% {\n    color: gray;\n  }\n  100% {\n    color: black;\n  }\n"])));
 function Loading(_a) {
-    var text = _a.text, isLoading = _a.isLoading;
+    var text = _a.text, isLoading = _a.isLoading, onlytext = _a.onlytext;
     if (!isLoading) {
         return null;
     }
-    return (react_1.default.createElement(react_2.Box, { position: "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: "rgba(0, 0, 0, 0.4)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: "9999" },
-        react_1.default.createElement(react_2.Center, { height: "100vh" },
+    return (react_1.default.createElement(react_2.Box, { position: "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: "rgba(0, 0, 0, 0.4)", backdropFilter: "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: "9999" },
+        react_1.default.createElement(react_2.Center, { height: "100vh" }, !onlytext ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "xl" }),
-            react_1.default.createElement(react_2.Text, { mt: "2", ml: "5" }, text))));
+            react_1.default.createElement(react_2.Text, { mt: "2", ml: "5" }, text))) : (react_1.default.createElement(react_2.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_3.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              animation: ", " 2s infinite;\n            "], ["\n              animation: ", " 2s infinite;\n            "])), colorTransition) }, text)))));
 }
 exports.default = Loading;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/Components/Loading/LoadingProps.d.ts

@@ -1,4 +1,5 @@
 export type LoadingProps = {
     text?: string;
     isLoading: boolean;
+    onlytext?: boolean;
 };

package/dist/Components/Switch/Switch.js

@@ -10,8 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_1 = __importDefault(require("@emotion/styled"));
 var react_2 = require("@emotion/react");
-var SwitchContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 230px;\n  height: 42px;\n  background-color: white;\n  border-radius: 20px;\n  overflow: hidden;\n"], ["\n  position: relative;\n  width: 230px;\n  height: 42px;\n  background-color: white;\n  border-radius: 20px;\n  overflow: hidden;\n"])));
-var Highlight = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 50%;\n  background-color: #3182ce;\n  transition: transform 0.3s ease;\n  transform: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 50%;\n  background-color: #3182ce;\n  transition: transform 0.3s ease;\n  transform: ", ";\n"])), function (_a) {
+var SwitchContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 200px;\n  height: 32px;\n  background-color: white;\n  border-radius: 20px;\n  overflow: hidden;\n"], ["\n  position: relative;\n  width: 200px;\n  height: 32px;\n  background-color: white;\n  border-radius: 20px;\n  overflow: hidden;\n"])));
+var Highlight = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 50%;\n  background-color: #3182ce;\n  border-radius: 16px;\n  transition: transform 0.3s ease;\n  transform: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 50%;\n  background-color: #3182ce;\n  border-radius: 16px;\n  transition: transform 0.3s ease;\n  transform: ", ";\n"])), function (_a) {
     var position = _a.position;
     return position === "left" ? "translateX(0%)" : "translateX(100%)";
 });

package/dist/Layout.js

@@ -290,7 +290,7 @@ var Layout = function () {
     };
     var _l = (0, react_2.useState)(new Date("07/26/1995")), selectedDate = _l[0], setSelectedDate = _l[1];
     return (react_2.default.createElement(react_1.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
-        react_2.default.createElement(Loading_1.default, { text: "Loading", isLoading: false }),
+        react_2.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
         react_2.default.createElement(react_1.Flex, null,
             react_2.default.createElement(react_1.Box, null,
                 react_2.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, logo: "https://bit.ly/dan-abramov", companyName: "PIXELIZE" })),
@@ -453,7 +453,9 @@ var Layout = function () {
                     react_2.default.createElement("br", null),
                     react_2.default.createElement("br", null),
                     react_2.default.createElement("div", { style: { width: "200px" } },
-                        react_2.default.createElement(DatePicker_1.default, { selectedDate: selectedDate, onChange: function (date) { return setSelectedDate(date); } }),
+                        react_2.default.createElement(DatePicker_1.default, { selectedDate: selectedDate, onChange: function (date) { return setSelectedDate(date); }, 
+                            // showTimeSelect={true}
+                            label: "Select Date" }),
                         selectedDate && (react_2.default.createElement("p", null,
                             "Selected Date: ",
                             selectedDate.toISOString()))))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",