pixelize-design-library 1.0.42 → 1.0.44

package/README.md

@@ -31,12 +31,13 @@ PixelizeDesign Library Components Are Below
 - ButtonGroupIcon,
 - Card,
 - Checkbox,
+- DatePicker, \* New
 - Dropdown,
 - Editor, 
 - InputTextArea,
 - Loading,
 - Modal,
-- MultiSelect, \* New
+- MultiSelect, 
 - NavigationBar,
 - NoteTextArea,
 - NumberInput,

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

@@ -0,0 +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;

package/dist/Components/DatePicker/DatePicker.js

@@ -0,0 +1,25 @@
+"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_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"])));
+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;
+    return (react_1.default.createElement(DatePickerContainer, null,
+        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 })));
+}
+exports.default = DatePicker;
+var templateObject_1;

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

@@ -0,0 +1,11 @@
+export type DatePickerProps = {
+    selectedDate: Date | null;
+    onChange: (date: Date | null) => void;
+    placeholderText?: string;
+    dateFormat?: string;
+    showTimeSelect?: boolean;
+    timeFormat?: string;
+    timeIntervals?: number;
+    timeCaption?: string;
+    dateTimeFormat?: string;
+};

package/dist/Components/DatePicker/DatePickerProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -15,7 +15,6 @@ function VerifyEmailOtp(_a) {
                 alignItems: "center",
                 justifyContent: "center",
                 padding: "3%",
-                background: "#ffffff",
             } },
             react_1.default.createElement("div", { style: { padding: "3%" } },
                 react_1.default.createElement(lu_1.LuMailCheck, { size: "100", color: "#3182ce" })),

package/dist/Layout.js

@@ -69,6 +69,7 @@ var Editor_1 = __importDefault(require("./Components/Editor/Editor"));
 var VerifyEmailOtp_1 = __importDefault(require("./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
 var Drawer_1 = __importDefault(require("./Components/Drawer/Drawer"));
 var MultiSelect_1 = __importDefault(require("./Components/MultiSelect/MultiSelect"));
+var DatePicker_1 = __importDefault(require("./Components/DatePicker/DatePicker"));
 var Layout = function () {
     var navmenus = [
         { title: "Account Settings", url: "myaccount" },
@@ -287,6 +288,7 @@ var Layout = function () {
         setSelectedOptions(options);
         console.log("Selected options updated:", options);
     };
+    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(react_1.Flex, null,
@@ -447,6 +449,13 @@ var Layout = function () {
                         react_2.default.createElement("footer", null, "Drawer Footer")),
                     react_2.default.createElement("br", null),
                     react_2.default.createElement("br", null),
-                    react_2.default.createElement(MultiSelect_1.default, { value: selectedOptions, onValueChange: handleValueSelectChange }))))));
+                    react_2.default.createElement(MultiSelect_1.default, { value: selectedOptions, onValueChange: handleValueSelectChange }),
+                    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); } }),
+                        selectedDate && (react_2.default.createElement("p", null,
+                            "Selected Date: ",
+                            selectedDate.toISOString()))))))));
 };
 exports.default = Layout;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import Button from "./Components/Button/Button";
 import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
 import Card from "./Components/Card/Card";
 import Checkbox from "./Components/Checkbox/Checkbox";
+import DatePicker from "./Components/DatePicker/DatePicker";
 import Drawer from "./Components/Drawer/Drawer";
 import Dropdown from "./Components/Dropdown/DropDown";
 import Editor from "./Components/Editor/Editor";
@@ -29,4 +30,4 @@ import TextInput from "./Components/Input/TextInput";
 import Toaster, { useToaster } from "./Components/Toaster/Toaster";
 import ToolTip from "./Components/ToolTip/ToolTip";
 import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
-export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Select, SideBar, Skeletons, Switch, Table, TextInput, Toaster, ToolTip, useToaster, VerifyEmailOtp, };
+export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Select, SideBar, Skeletons, Switch, Table, TextInput, Toaster, ToolTip, useToaster, VerifyEmailOtp, };

package/dist/index.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
+exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
 var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarChart/ApexBarChart"));
 exports.ApexBarChart = ApexBarChart_1.default;
 var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
@@ -42,6 +42,8 @@ var Card_1 = __importDefault(require("./Components/Card/Card"));
 exports.Card = Card_1.default;
 var Checkbox_1 = __importDefault(require("./Components/Checkbox/Checkbox"));
 exports.Checkbox = Checkbox_1.default;
+var DatePicker_1 = __importDefault(require("./Components/DatePicker/DatePicker"));
+exports.DatePicker = DatePicker_1.default;
 var Drawer_1 = __importDefault(require("./Components/Drawer/Drawer"));
 exports.Drawer = Drawer_1.default;
 var DropDown_1 = __importDefault(require("./Components/Dropdown/DropDown"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -23,6 +23,7 @@
     "jodit-react": "^4.1.2",
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
+    "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",