pixelize-design-library 2.0.3 → 2.0.5

package/dist/Components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { ButtonProps } from "./ButtonProps";
-declare function Button({ label, onClick, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref }: ButtonProps): React.JSX.Element;
+declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, }: ButtonProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Button>;
 export default _default;

package/dist/Components/Button/Button.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 function Button(_a) {
-    var label = _a.label, onClick = _a.onClick, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type, width = _a.width, sx = _a.sx, colorScheme = _a.colorScheme, ref = _a.ref;
-    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx }, label));
+    var label = _a.label, children = _a.children, onClick = _a.onClick, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type, width = _a.width, sx = _a.sx, colorScheme = _a.colorScheme, ref = _a.ref, border = _a.border, borderRadius = _a.borderRadius;
+    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius }, children !== null && children !== void 0 ? children : label));
 }
 exports.default = (0, react_1.memo)(Button);

package/dist/Components/Button/ButtonProps.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx"> & {
+export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius"> & {
     label?: string;
     width?: string | number;
     size?: "lg" | "md" | "sm" | "xs";
@@ -8,4 +8,6 @@ export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "righ
     type?: "button" | "submit" | "reset";
     colorScheme?: 'primary' | 'secondary' | 'tertiary' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
     ref?: React.Ref<HTMLButtonElement>;
+    children?: React.ReactNode;
+    opacity?: number;
 };

package/dist/Components/Common/ErrorMessage.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var ErrorMessage = function (_a) {
     var errorMessage = _a.errorMessage;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.FormErrorMessage, { fontSize: "14px" },
-            react_1.default.createElement(lucide_react_1.Info, { width: "14px" }),
-            react_1.default.createElement(react_2.Text, { ml: "3px" }, errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error"))));
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Flex, { align: "center", color: theme.colors.red[500], fontSize: "0.875rem", role: "alert" },
+        react_1.default.createElement(lucide_react_1.Info, { width: "0.875rem" }),
+        react_1.default.createElement(react_2.Text, { ml: "0.188rem" }, errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error")));
 };
 exports.default = ErrorMessage;

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

@@ -1,4 +1,3 @@
 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, id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, minDate, maxDate, }: DatePickerProps): React.JSX.Element;
+export default function CustomDatePicker(props: DatePickerProps): React.JSX.Element;

package/dist/Components/DatePicker/DatePicker.js

@@ -1,40 +1,200 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 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 react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
-var FormLabel_1 = require("../Common/FormLabel");
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var HelperText_1 = __importDefault(require("../Common/HelperText"));
+var date_fns_1 = require("date-fns");
+var lucide_react_1 = require("lucide-react");
+var Button_1 = __importDefault(require("../Button/Button"));
+var TextInput_1 = __importDefault(require("../Input/TextInput"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 5px;\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    font-size: 14px;\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: ", " !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  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    font-size: 14px;\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: ", " !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"])), function (props) { return props.theme.colors.primary[500]; });
-// const Label = styled.label`
-//   display: block;
-//   margin-bottom: 5px;
-//   font-weight: bold;
-// `;
-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, id = _a.id, name = _a.name, label = _a.label, _h = _a.isRequired, isRequired = _h === void 0 ? false : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, _k = _a.informationMessage, informationMessage = _k === void 0 ? "" : _k, _l = _a.error, error = _l === void 0 ? false : _l, _m = _a.errorMessage, errorMessage = _m === void 0 ? "" : _m, _o = _a.helperText, helperText = _o === void 0 ? "" : _o, minDate = _a.minDate, maxDate = _a.maxDate;
+var FormLabel_1 = require("../Common/FormLabel");
+var TimePicker_1 = __importDefault(require("./TimePicker"));
+var inferPickerTypeFromFormat = function (formatStr) {
+    var lower = formatStr.toLowerCase();
+    var hasTime = lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
+    var hasDate = lower.includes("d") && lower.includes("m") && lower.includes("y");
+    if (hasTime && hasDate)
+        return "datetime";
+    if (hasTime)
+        return "time";
+    return "date";
+};
+function CustomDatePicker(props) {
+    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, _a = props.placeholderText, placeholderText = _a === void 0 ? "Select a date" : _a, _b = props.dateFormat, dateFormat = _b === void 0 ? "dd/MM/yyyy" : _b, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, isRange = props.isRange, autoComplete = props.autoComplete, disabled = props.disabled, _c = props.width, width = _c === void 0 ? "100%" : _c;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error },
+    var _d = (0, react_2.useDisclosure)(), isOpen = _d.isOpen, onOpen = _d.onOpen, onClose = _d.onClose;
+    var resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
+    var inputRef = (0, react_1.useRef)(null);
+    var today = new Date();
+    var showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
+    var showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
+    var selectedDate = !isRange ? props.selectedDate : null;
+    var _e = (0, react_1.useState)(isRange ? new Date() : selectedDate !== null && selectedDate !== void 0 ? selectedDate : new Date()), currentMonth = _e[0], setCurrentMonth = _e[1];
+    var _f = (0, react_1.useState)(null), rangeStart = _f[0], setRangeStart = _f[1];
+    var _g = (0, react_1.useState)(null), rangeEnd = _g[0], setRangeEnd = _g[1];
+    var _h = (0, react_1.useState)(true), selectingStart = _h[0], setSelectingStart = _h[1];
+    var _j = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _j[0], setTempDate = _j[1];
+    var _k = (0, react_1.useState)(rangeStart), tempRangeStart = _k[0], setTempRangeStart = _k[1];
+    var _l = (0, react_1.useState)(rangeEnd), tempRangeEnd = _l[0], setTempRangeEnd = _l[1];
+    (0, react_1.useEffect)(function () {
+        if (!isRange) {
+            setTempDate(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
+        }
+    }, [selectedDate, isRange]);
+    (0, react_1.useEffect)(function () {
+        setTempDate(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
+    }, [selectedDate]);
+    var handleDaySelect = function (day) {
+        var updated = new Date(day);
+        if (isRange) {
+            if (selectingStart) {
+                setTempRangeStart(updated);
+                setTempRangeEnd(null);
+                setSelectingStart(false);
+            }
+            else {
+                var finalStart = tempRangeStart && updated < tempRangeStart ? updated : tempRangeStart;
+                var finalEnd = tempRangeStart && updated < tempRangeStart ? tempRangeStart : updated;
+                setTempRangeStart(finalStart !== null && finalStart !== void 0 ? finalStart : updated);
+                setTempRangeEnd(finalEnd);
+                setSelectingStart(true);
+            }
+        }
+        else {
+            setTempDate(updated);
+        }
+    };
+    var renderDays = function () {
+        var monthStart = (0, date_fns_1.startOfMonth)(currentMonth);
+        var monthEnd = (0, date_fns_1.endOfMonth)(currentMonth);
+        var startDate = (0, date_fns_1.startOfWeek)(monthStart);
+        var endDate = (0, date_fns_1.endOfWeek)(monthEnd);
+        var rows = [];
+        var day = startDate;
+        while (day <= endDate) {
+            var days = [];
+            var _loop_1 = function (i) {
+                var thisDay = day;
+                var isInCurrentMonth = thisDay.getMonth() === currentMonth.getMonth();
+                var isToday = (0, date_fns_1.isSameDay)(thisDay, today);
+                var isStart = isRange && tempRangeStart && (0, date_fns_1.isSameDay)(thisDay, tempRangeStart);
+                var isEnd = isRange && tempRangeEnd && (0, date_fns_1.isSameDay)(thisDay, tempRangeEnd);
+                var isInRange = isRange &&
+                    tempRangeStart &&
+                    tempRangeEnd &&
+                    (0, date_fns_1.isAfter)(thisDay, tempRangeStart) &&
+                    (0, date_fns_1.isBefore)(thisDay, tempRangeEnd);
+                var isSelected = !isRange && tempDate && (0, date_fns_1.isSameDay)(thisDay, tempDate);
+                var disabled_1 = !isInCurrentMonth ||
+                    (minDate && (0, date_fns_1.isBefore)(thisDay, minDate)) ||
+                    (maxDate && (0, date_fns_1.isAfter)(thisDay, maxDate)) ||
+                    (disablePastDates && (0, date_fns_1.isBefore)(thisDay, today) && !(0, date_fns_1.isSameDay)(thisDay, today)) ||
+                    (disableFutureDates && (0, date_fns_1.isAfter)(thisDay, today) && !(0, date_fns_1.isSameDay)(thisDay, today));
+                days.push(react_1.default.createElement(Button_1.default, { key: thisDay.toString(), size: "sm", variant: isStart || isEnd
+                        ? "solid"
+                        : isInRange
+                            ? "outline"
+                            : isSelected
+                                ? "solid"
+                                : "ghost", colorScheme: isStart || isEnd || isInRange || isSelected ? "primary" : "gray", opacity: isInCurrentMonth ? 1 : 0.4, onClick: function () { return !disabled_1 && handleDaySelect(new Date(thisDay)); }, isDisabled: disabled_1, border: isToday ? "0.125rem solid ".concat(theme.colors.primary[500]) : undefined, borderRadius: "md" }, (0, date_fns_1.format)(thisDay, "d")));
+                day = (0, date_fns_1.addDays)(day, 1);
+            };
+            for (var i = 0; i < 7; i++) {
+                _loop_1(i);
+            }
+            rows.push(react_1.default.createElement(react_2.Grid, { key: day.toString(), templateColumns: "repeat(7, 1fr)", gap: 1 }, days));
+        }
+        return rows;
+    };
+    var displayValue = isRange
+        ? tempRangeStart && tempRangeEnd
+            ? "".concat((0, date_fns_1.format)(tempRangeStart, dateFormat), " - ").concat((0, date_fns_1.format)(tempRangeEnd, dateFormat))
+            : tempRangeStart
+                ? "".concat((0, date_fns_1.format)(tempRangeStart, dateFormat), " -")
+                : ""
+        : tempDate
+            ? (0, date_fns_1.format)(tempDate, dateFormat)
+            : "";
+    return (react_1.default.createElement(react_2.Box, { width: width, position: "relative" },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(DatePickerContainer, null,
-            react_1.default.createElement(react_datepicker_1.default, { minDate: minDate, maxDate: maxDate, 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, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light, style: { border: error ? "2px solid #DC143C" : "" } }) })),
-        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
-        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
+        react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", modifiers: [
+                {
+                    name: "flip",
+                    enabled: true,
+                    options: {
+                        fallbackPlacements: ["top-start", "right-start", "left-start"],
+                    },
+                },
+                {
+                    name: "preventOverflow",
+                    enabled: true,
+                    options: {
+                        boundary: "viewport",
+                    },
+                },
+            ] },
+            react_1.default.createElement(react_2.PopoverTrigger, null,
+                react_1.default.createElement(react_2.Box, { onClick: onOpen },
+                    react_1.default.createElement(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width }))),
+            react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2 },
+                react_1.default.createElement(react_2.PopoverBody, null,
+                    showDate && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mb: 2 },
+                            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.subMonths)(prev, 1); }); } },
+                                react_1.default.createElement(lucide_react_1.ChevronLeftIcon, null)),
+                            react_1.default.createElement(react_2.Box, { fontWeight: "bold" }, (0, date_fns_1.format)(currentMonth, "MMMM yyyy")),
+                            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.addMonths)(prev, 1); }); } },
+                                react_1.default.createElement(lucide_react_1.ChevronRightIcon, null))),
+                        react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day }, day)); })),
+                        renderDays())),
+                    !isRange && showTime && tempDate && (react_1.default.createElement(TimePicker_1.default, { date: tempDate, onChange: setTempDate })),
+                    react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3 },
+                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
+                                setTempDate(null);
+                                setTempRangeStart(null);
+                                setTempRangeEnd(null);
+                                setRangeStart(null);
+                                setRangeEnd(null);
+                                setSelectingStart(true);
+                                props.onChange(null);
+                                onClose();
+                            } }, "Clear"),
+                        react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: function () {
+                                if (isRange && tempRangeStart && tempRangeEnd) {
+                                    setRangeStart(tempRangeStart);
+                                    setRangeEnd(tempRangeEnd);
+                                    props.onChange({ from: tempRangeStart, to: tempRangeEnd });
+                                }
+                                else if (!isRange && tempDate) {
+                                    props.onChange(tempDate);
+                                }
+                                onClose();
+                            } }, "OK")))))));
 }
-exports.default = DatePicker;
-var templateObject_1;
+exports.default = CustomDatePicker;

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

@@ -1,26 +1,36 @@
-/// <reference types="react" />
-import DatePicker from "react-datepicker";
-type ReactDatePickerProps = React.ComponentProps<typeof DatePicker>;
-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;
-    label?: string;
+export type PickerType = "date" | "time" | "datetime";
+export interface BaseDatePickerProps {
     id?: string;
     name?: string;
+    label?: string;
     isRequired?: boolean;
     isInformation?: boolean;
     informationMessage?: string;
     error?: boolean;
     errorMessage?: string;
     helperText?: string;
+    placeholderText?: string;
+    dateFormat?: string;
+    pickerType?: PickerType;
     minDate?: Date;
     maxDate?: Date;
-} & Partial<ReactDatePickerProps>;
-export {};
+    disableFutureDates?: boolean;
+    disablePastDates?: boolean;
+    autoComplete?: string;
+    disabled?: boolean;
+    width?: string | number;
+}
+export interface SingleDatePickerProps extends BaseDatePickerProps {
+    isRange?: false;
+    selectedDate: Date | null;
+    onChange: (date: Date | null) => void;
+}
+export interface RangeDatePickerProps extends BaseDatePickerProps {
+    isRange: true;
+    selectedDate?: Date | null;
+    onChange: ((date: Date | null) => void) | ((range: {
+        from: Date | null;
+        to: Date | null;
+    } | null) => void);
+}
+export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const TimePicker: ({ date, onChange }: {
+    date: Date;
+    onChange: (date: Date) => void;
+}) => React.JSX.Element;
+export default TimePicker;

package/dist/Components/DatePicker/TimePicker.js

@@ -0,0 +1,16 @@
+"use strict";
+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 TimePicker = function (_a) {
+    var date = _a.date, onChange = _a.onChange;
+    return (react_1.default.createElement("input", { type: "time", value: date.toISOString().substring(11, 16), onChange: function (e) {
+            var _a = e.target.value.split(':'), hours = _a[0], minutes = _a[1];
+            var newDate = new Date(date);
+            newDate.setHours(Number(hours), Number(minutes));
+            onChange(newDate);
+        } }));
+};
+exports.default = TimePicker;

package/dist/Components/Header/HeaderActions.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { OptionProp } from "../Select/SelectProps";
+declare const HeaderActions: ({ select, edit, create, }: {
+    select?: {
+        isSelect?: boolean | undefined;
+        options?: OptionProp[] | undefined;
+        onSelectChange?: ((option?: OptionProp) => void) | undefined;
+        selectPlaceholderText?: string | undefined;
+        width?: string | undefined;
+    } | undefined;
+    edit?: {
+        isEditable?: boolean | undefined;
+        onEdit?: (() => void) | undefined;
+    } | undefined;
+    create?: {
+        isCreatable?: boolean | undefined;
+        onCreate?: (() => void) | undefined;
+    } | undefined;
+}) => React.JSX.Element;
+export default HeaderActions;

package/dist/Components/Header/HeaderActions.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Select_1 = __importDefault(require("../Select/Select"));
+var Divider_1 = __importDefault(require("../Divider/Divider"));
+var HeaderActions = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var select = _a.select, edit = _a.edit, create = _a.create;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var elements = [];
+    if (select === null || select === void 0 ? void 0 : select.isSelect) {
+        elements.push(react_2.default.createElement(Select_1.default, { key: "select", options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, width: (_c = select.width) !== null && _c !== void 0 ? _c : "12.5rem", onChange: function (option) { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); } }));
+    }
+    if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
+        elements.push(react_2.default.createElement(react_1.Box, { key: "edit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); } },
+            react_2.default.createElement(lucide_react_1.SquarePen, { size: 20, color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[500] }),
+            react_2.default.createElement(react_1.Text, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _e === void 0 ? void 0 : _e[500] }, "Edit Layout")));
+    }
+    if (create === null || create === void 0 ? void 0 : create.isCreatable) {
+        elements.push(react_2.default.createElement(react_1.Box, { key: "create", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); } },
+            react_2.default.createElement(lucide_react_1.CirclePlus, { size: 20, color: (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[500] }),
+            react_2.default.createElement(react_1.Text, { color: (_g = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _g === void 0 ? void 0 : _g[500] }, "Create New")));
+    }
+    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem" }, elements.map(function (el, i) { return (react_2.default.createElement(react_2.default.Fragment, { key: i },
+        i > 0 && react_2.default.createElement(Divider_1.default, null),
+        el)); })));
+};
+exports.default = HeaderActions;

package/dist/Components/Input/TextInput.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
 import { TextInputProps } from "./TextInputProps";
-declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, height, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputLeftIcon, onLeftIconClick, inputGroupStyle, inputStyle, size, isInformation, informationMessage, leftElementStyle, rightElementStyle, ref, ...props }: TextInputProps): React.JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof TextInput>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>>;
 export default _default;

package/dist/Components/Input/TextInput.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,20 +48,21 @@ 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_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../Common/FormLabel");
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-function TextInput(_a) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "22.5rem" : _g, _h = _a.height, height = _h === void 0 ? "2.75rem" : _h, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _j = _a.size, size = _j === void 0 ? "md" : _j, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, ref = _a.ref, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "ref"]);
+var TextInput = (0, react_1.forwardRef)(function (_a, ref) {
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "22.5rem" : _g, _h = _a.height, height = _h === void 0 ? "2.75rem" : _h, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _j = _a.size, size = _j === void 0 ? "md" : _j, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, autoComplete = _a.autoComplete, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "autoComplete"]);
     return (react_1.default.createElement(react_2.FormControl, { w: width },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
         react_1.default.createElement(react_2.InputGroup, { style: inputGroupStyle, height: height },
             inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle), inputLeftIcon)),
-            react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, height: height, isInvalid: error, ref: ref }, inputStyle, props)),
+            react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, height: height, isInvalid: error, ref: ref, autoComplete: autoComplete }, inputStyle, props)),
             inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none" }, rightElementStyle), inputRightIcon))),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
-}
+});
+TextInput.displayName = "TextInput";
 exports.default = react_1.default.memo(TextInput);

package/dist/Components/Input/TextInputProps.d.ts

@@ -18,4 +18,5 @@ export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "p
     leftElementStyle?: {};
     rightElementStyle?: {};
     ref?: React.Ref<HTMLInputElement>;
+    autoComplete?: string;
 };

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { OptionProp } from '../../Select/SelectProps';
+declare const KanbanActions: ({ options, onSelectChange, onEdit, onCreate }: {
+    options: OptionProp[];
+    onSelectChange?: ((option?: OptionProp) => void) | undefined;
+    onEdit?: (() => void) | undefined;
+    onCreate?: (() => void) | undefined;
+}) => React.JSX.Element;
+export default KanbanActions;

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+var Select_1 = __importDefault(require("../../Select/Select"));
+var lucide_react_1 = require("lucide-react");
+var Divider_1 = __importDefault(require("../../Divider/Divider"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var KanbanActions = function (_a) {
+    var _b, _c, _d, _e;
+    var options = _a.options, onSelectChange = _a.onSelectChange, onEdit = _a.onEdit, onCreate = _a.onCreate;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem" },
+        react_2.default.createElement(Select_1.default, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: function (option) { return onSelectChange && onSelectChange(option); } }),
+        react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { return onEdit === null || onEdit === void 0 ? void 0 : onEdit(); } },
+            react_2.default.createElement(lucide_react_1.SquarePen, { size: 20, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500] }),
+            react_2.default.createElement(react_1.Text, { color: (_c = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _c === void 0 ? void 0 : _c[500] }, "Edit Layout")),
+        react_2.default.createElement(Divider_1.default, null),
+        react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { return onCreate === null || onCreate === void 0 ? void 0 : onCreate(); } },
+            react_2.default.createElement(lucide_react_1.CirclePlus, { size: 20, color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[500] }),
+            react_2.default.createElement(react_1.Text, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _e === void 0 ? void 0 : _e[500] }, "Create New"))));
+};
+exports.default = KanbanActions;

package/dist/Components/Select/Select.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { chakraSelectProps } from "./SelectProps";
-export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, formControlStyle, isInformation, informationMessage, selectStyle }: chakraSelectProps): React.JSX.Element;
+export default function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): React.JSX.Element;

package/dist/Components/Select/Select.js

@@ -32,7 +32,7 @@ var FormLabel_1 = require("../Common/FormLabel");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 function Select(_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "sm" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? 500 : _h, formControlStyle = _a.formControlStyle, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
+    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? 500 : _h, formControlStyle = _a.formControlStyle, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
     var getOptionsList = (0, react_1.useCallback)(function () {
         if (!options.length)
             return react_1.default.createElement("option", { value: "" }, "No Options");
@@ -47,7 +47,7 @@ function Select(_a) {
     };
     return (react_1.default.createElement(react_2.FormControl, { isInvalid: error, style: formControlStyle, width: width },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: "flushed", icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle }, getOptionsList()),
+        react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle }, getOptionsList()),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/Select/Select.styles.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+export declare const Select: ComponentStyleConfig;

package/dist/Components/Select/Select.styles.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+exports.Select = {
+    baseStyle: {
+        field: {
+            fontWeight: 500,
+            fontSize: "0.875rem",
+            letterSpacing: "0.044rem",
+            borderRadius: "0.25rem",
+            minWidth: "0",
+            width: "100%",
+            maxWidth: "100%",
+            _placeholder: {
+                fontStyle: "italic",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+            },
+        },
+        icon: {
+            width: "1.25rem",
+            height: "1.25rem",
+        },
+    },
+    sizes: {
+        sm: {
+            field: {
+                h: "2.125rem",
+                fontSize: "0.8125rem",
+                px: "0.5rem",
+                py: "0.5rem",
+            },
+        },
+        md: {
+            field: {
+                h: "2.375rem",
+                fontSize: "0.875rem",
+                px: "0.75rem",
+                py: "0.5rem",
+            },
+        },
+        lg: {
+            field: {
+                h: "2.75rem",
+                fontSize: "0.9375rem",
+                px: "1rem",
+                py: "0.5rem",
+            },
+        },
+    },
+    variants: {
+        outline: function (props) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var theme = props.theme;
+            var errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
+            var borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
+            var shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
+            var shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
+            var primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
+            return {
+                field: {
+                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
+                    border: "0.063rem solid",
+                    borderColor: borderColor,
+                    _hover: {
+                        borderColor: primary,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
+                    },
+                    _focus: {
+                        borderColor: primary,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
+                    },
+                    _disabled: {
+                        opacity: 0.4,
+                        cursor: "not-allowed",
+                    },
+                    _invalid: {
+                        borderColor: errorColor,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                        _hover: {
+                            borderColor: errorColor,
+                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                        },
+                        _focus: {
+                            borderColor: errorColor,
+                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                        },
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/Components/Toggle/TableToggle.js

@@ -18,6 +18,7 @@ var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 var TableToggle = function (_a) {
     var value = _a.value, onChange = _a.onChange;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -51,7 +52,9 @@ var TableToggle = function (_a) {
         }); },
     };
     return (react_1.default.createElement(react_2.Box, __assign({}, styles.container),
-        react_1.default.createElement(react_2.IconButton, __assign({ "aria-label": "Grid View", icon: react_1.default.createElement(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: function () { return onChange("grid"); } }, styles.button("grid"))),
-        react_1.default.createElement(react_2.IconButton, __assign({ "aria-label": "List View", icon: react_1.default.createElement(lucide_react_1.Columns3, { size: "1.25rem" }), variant: "ghost", onClick: function () { return onChange("list"); } }, styles.button("list")))));
+        react_1.default.createElement(ToolTip_1.default, { label: "Table View", placement: "top", fontSize: 12, hasArrow: true },
+            react_1.default.createElement(react_2.IconButton, __assign({ "aria-label": "Grid View", icon: react_1.default.createElement(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: function () { return onChange("grid"); } }, styles.button("grid")))),
+        react_1.default.createElement(ToolTip_1.default, { label: "Kanban View", placement: "top", fontSize: 12, hasArrow: true },
+            react_1.default.createElement(react_2.IconButton, __assign({ "aria-label": "List View", icon: react_1.default.createElement(lucide_react_1.Columns3, { size: "1.25rem" }), variant: "ghost", onClick: function () { return onChange("list"); } }, styles.button("list"))))));
 };
 exports.default = TableToggle;

package/dist/Pages/datePick.js

@@ -29,10 +29,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var DatePicker_1 = __importDefault(require("../Components/DatePicker/DatePicker"));
 var DatePick = function () {
-    var _a = (0, react_1.useState)(new Date("07/26/1995")), selectedDate = _a[0], setSelectedDate = _a[1];
+    var _a = (0, react_1.useState)(new Date()), selectedDate = _a[0], setSelectedDate = _a[1];
+    var handleDateChange = function (value) {
+        console.log("Date change event:", value);
+        if (!value) {
+            console.log("Date cleared");
+            return;
+        }
+        if ("from" in value && "to" in value) {
+            var from = value.from, to = value.to;
+            if (from && to) {
+                console.log("Range selected:", from, to);
+            }
+            else {
+                console.log("Incomplete range selected:", value);
+            }
+        }
+        else {
+            setSelectedDate(value);
+            console.log("Date selected:", value);
+        }
+    };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDate, onChange: function (date) { return setSelectedDate(date); }, 
-            // showTimeSelect={true}
-            label: "Select Date" })));
+        react_1.default.createElement("h2", null, "Single Date Picker"),
+        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDate, onChange: handleDateChange, dateFormat: "dd/MM/yyyy", pickerType: "time", width: "20px" }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("h2", null, "Date Range Picker"),
+        react_1.default.createElement(DatePicker_1.default, { isRange: true, dateFormat: "dd/MM/yyyy", pickerType: "datetime", onChange: handleDateChange })));
 };
 exports.default = DatePick;

package/dist/Theme/componentStyles.d.ts

@@ -2,4 +2,5 @@ export declare const componentStyles: {
     Checkbox: import("@chakra-ui/theme").ComponentStyleConfig;
     Input: import("@chakra-ui/theme").ComponentStyleConfig;
     Button: import("@chakra-ui/theme").ComponentStyleConfig;
+    Select: import("@chakra-ui/theme").ComponentStyleConfig;
 };

package/dist/Theme/componentStyles.js

@@ -4,8 +4,10 @@ exports.componentStyles = void 0;
 var Button_styles_1 = require("../Components/Button/Button.styles");
 var Checkbox_styles_1 = require("../Components/Checkbox/Checkbox.styles");
 var TextInput_styles_1 = require("../Components/Input/TextInput.styles");
+var Select_styles_1 = require("../Components/Select/Select.styles");
 exports.componentStyles = {
     Checkbox: Checkbox_styles_1.Checkbox,
     Input: TextInput_styles_1.Input,
-    Button: Button_styles_1.Button
+    Button: Button_styles_1.Button,
+    Select: Select_styles_1.Select,
 };

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import DatePicker from "./Components/DatePicker/DatePicker";
 import Drawer, { DrawerHeader, DrawerBody, DrawerFooter } from "./Components/Drawer/Drawer";
 import Dropdown from "./Components/Dropdown/DropDown";
 import Editor from "./Components/Editor/Editor";
+import HeaderActions from "./Components/Header/HeaderActions";
 import InputTextArea from "./Components/InputTextArea/InputTextArea";
 import KanbanBoard from "./Components/KanbanBoard/KanbanBoard";
 import Loading from "./Components/Loading/Loading";
@@ -41,5 +42,5 @@ import withTheme from "./withTheme";
 import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
 import { debounce } from "./Utils/table";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ 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.Timeline = exports.TextInput = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = void 0;
+exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -58,6 +58,8 @@ var DropDown_1 = __importDefault(require("./Components/Dropdown/DropDown"));
 exports.Dropdown = DropDown_1.default;
 var Editor_1 = __importDefault(require("./Components/Editor/Editor"));
 exports.Editor = Editor_1.default;
+var HeaderActions_1 = __importDefault(require("./Components/Header/HeaderActions"));
+exports.HeaderActions = HeaderActions_1.default;
 var InputTextArea_1 = __importDefault(require("./Components/InputTextArea/InputTextArea"));
 exports.InputTextArea = InputTextArea_1.default;
 var KanbanBoard_1 = __importDefault(require("./Components/KanbanBoard/KanbanBoard"));

package/package.json

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