pixelize-design-library 2.0.5 → 2.0.7

package/dist/App.js

@@ -114,7 +114,12 @@ function App() {
                         // }
                         companyName: "PIXELIZE" })),
                 react_1.default.createElement(react_2.Box, { flex: "1", maxWidth: width, overflow: "hidden" },
-                    react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar", moreIcon: react_1.default.createElement(lucide_react_1.Calendar, null) }),
+                    react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar", navigationBarText: {
+                            text: "Dashboard",
+                            onIconClick: function () {
+                                console.log("Back icon clicked");
+                            },
+                        }, moreIcon: react_1.default.createElement(lucide_react_1.Calendar, null) }),
                     react_1.default.createElement("br", null),
                     react_1.default.createElement(Breadcrumbs_1.default, { separator: react_1.default.createElement(lucide_react_1.ChevronRight, { color: "gray.500" }), items: breadcrumbItems, handleClick: handleClick }),
                     react_1.default.createElement(react_2.Box, { p: "50px", height: height - 160, overflowY: "scroll", width: width - 75 },

package/dist/Components/DatePicker/DatePicker.js

@@ -46,30 +46,27 @@ var inferPickerTypeFromFormat = function (formatStr) {
     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 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, _c = props.autoComplete, autoComplete = _c === void 0 ? "off" : _c, disabled = props.disabled, _d = props.width, width = _d === void 0 ? "100%" : _d;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _d = (0, react_2.useDisclosure)(), isOpen = _d.isOpen, onOpen = _d.onOpen, onClose = _d.onClose;
+    var _e = (0, react_2.useDisclosure)(), isOpen = _e.isOpen, onOpen = _e.onOpen, onClose = _e.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];
+    var _f = (0, react_1.useState)(isRange ? new Date() : selectedDate !== null && selectedDate !== void 0 ? selectedDate : new Date()), currentMonth = _f[0], setCurrentMonth = _f[1];
+    var _g = (0, react_1.useState)(null), rangeStart = _g[0], setRangeStart = _g[1];
+    var _h = (0, react_1.useState)(null), rangeEnd = _h[0], setRangeEnd = _h[1];
+    var _j = (0, react_1.useState)(true), selectingStart = _j[0], setSelectingStart = _j[1];
+    var _k = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _k[0], setTempDate = _k[1];
+    var _l = (0, react_1.useState)(rangeStart), tempRangeStart = _l[0], setTempRangeStart = _l[1];
+    var _m = (0, react_1.useState)(rangeEnd), tempRangeEnd = _m[0], setTempRangeEnd = _m[1];
     (0, react_1.useEffect)(function () {
-        if (!isRange) {
-            setTempDate(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
+        if (!isRange && selectedDate instanceof Date) {
+            setTempDate(new Date(selectedDate)); // clone with full time
         }
     }, [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) {
@@ -87,7 +84,12 @@ function CustomDatePicker(props) {
             }
         }
         else {
-            setTempDate(updated);
+            setTempDate(function (prev) {
+                if (!prev)
+                    return updated;
+                var newDateWithTime = new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), prev.getHours(), prev.getMinutes(), prev.getSeconds());
+                return newDateWithTime;
+            });
         }
     };
     var renderDays = function () {
@@ -166,30 +168,41 @@ function CustomDatePicker(props) {
                 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(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(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 })),
+                    !isRange && showTime && (react_1.default.createElement(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date(), dateFormat: dateFormat, onChange: function (updatedDate) {
+                            setTempDate(updatedDate);
+                            props.onChange(updatedDate);
+                        } })),
                     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);
+                                var now = new Date();
+                                setTempDate(now);
                                 setTempRangeStart(null);
                                 setTempRangeEnd(null);
                                 setRangeStart(null);
                                 setRangeEnd(null);
                                 setSelectingStart(true);
                                 props.onChange(null);
-                                onClose();
+                                onOpen();
                             } }, "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 });
+                                    props.onChange({
+                                        from: tempRangeStart,
+                                        to: tempRangeEnd,
+                                    });
                                 }
                                 else if (!isRange && tempDate) {
                                     props.onChange(tempDate);

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

@@ -22,7 +22,7 @@ export interface BaseDatePickerProps {
 }
 export interface SingleDatePickerProps extends BaseDatePickerProps {
     isRange?: false;
-    selectedDate: Date | null;
+    selectedDate?: Date | null;
     onChange: (date: Date | null) => void;
 }
 export interface RangeDatePickerProps extends BaseDatePickerProps {

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

@@ -1,6 +1,8 @@
-import React from 'react';
-declare const TimePicker: ({ date, onChange }: {
+import React from "react";
+interface TimePickerProps {
     date: Date;
     onChange: (date: Date) => void;
-}) => React.JSX.Element;
+    dateFormat: string;
+}
+declare const TimePicker: React.FC<TimePickerProps>;
 export default TimePicker;

package/dist/Components/DatePicker/TimePicker.js

@@ -1,16 +1,88 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
+var padZero = function (num) { return (num < 10 ? "0".concat(num) : "".concat(num)); };
 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);
-        } }));
+    var date = _a.date, onChange = _a.onChange, dateFormat = _a.dateFormat;
+    var is12HourFormat = /(hh|h).*a/i.test(dateFormat);
+    var _b = (0, react_1.useState)(date.getHours()), hour = _b[0], setHour = _b[1];
+    var _c = (0, react_1.useState)(date.getMinutes()), minute = _c[0], setMinute = _c[1];
+    var ampm = is12HourFormat ? (hour >= 12 ? "PM" : "AM") : "";
+    (0, react_1.useEffect)(function () {
+        setHour(date.getHours());
+        setMinute(date.getMinutes());
+    }, [date]);
+    var convertTo24Hour = function (hr, meridiem) {
+        if (meridiem === "AM") {
+            return hr === 12 ? 0 : hr;
+        }
+        else {
+            return hr === 12 ? 12 : hr + 12;
+        }
+    };
+    var updateTime = function (hrInput, min, meridiem) {
+        var newHour = is12HourFormat ? convertTo24Hour(hrInput, meridiem || ampm) : hrInput;
+        var newDate = new Date(date);
+        newDate.setHours(newHour);
+        newDate.setMinutes(min);
+        newDate.setSeconds(0);
+        newDate.setMilliseconds(0);
+        onChange(newDate);
+    };
+    var handleHourChange = function (e) {
+        var hr = parseInt(e.target.value || "1", 10);
+        if (is12HourFormat) {
+            hr = Math.max(1, Math.min(12, hr));
+            updateTime(hr, minute, ampm);
+        }
+        else {
+            hr = Math.max(0, Math.min(23, hr));
+            updateTime(hr, minute);
+        }
+        setHour(hr);
+    };
+    var handleMinuteChange = function (e) {
+        var min = parseInt(e.target.value || "0", 10);
+        min = Math.max(0, Math.min(59, min));
+        setMinute(min);
+        updateTime(hour, min, ampm);
+    };
+    var handleAmpmToggle = function (e) {
+        e.preventDefault();
+        var newMeridiem = ampm === "AM" ? "PM" : "AM";
+        var displayHr = hour % 12 === 0 ? 12 : hour % 12;
+        var newHr = convertTo24Hour(displayHr, newMeridiem);
+        setHour(newHr);
+        updateTime(newHr, minute, newMeridiem);
+    };
+    var displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
+    return (react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "1.25rem" } },
+        react_1.default.createElement("input", { type: "number", value: padZero(displayHour), onChange: handleHourChange, min: is12HourFormat ? 1 : 0, max: is12HourFormat ? 12 : 23, style: { width: "3rem", textAlign: "center" } }),
+        ":",
+        react_1.default.createElement("input", { type: "number", value: padZero(minute), onChange: handleMinuteChange, min: 0, max: 59, style: { width: "3rem", textAlign: "center" } }),
+        is12HourFormat && (react_1.default.createElement("button", { onClick: function () { return handleAmpmToggle; }, style: { fontWeight: "bold", padding: "0.25rem 0.5rem" } }, ampm))));
 };
 exports.default = TimePicker;

package/dist/Components/Form/FormWrapper.d.ts

@@ -0,0 +1,7 @@
+import React, { ElementType } from "react";
+declare const FormWrapper: ({ icon, text, children, }: {
+    icon?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    text?: string | undefined;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export default FormWrapper;

package/dist/Components/Form/FormWrapper.js

@@ -0,0 +1,19 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var FormWrapper = function (_a) {
+    var _b, _c, _d, _e;
+    var icon = _a.icon, text = _a.text, children = _a.children;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_2.default.createElement(react_1.Box, null,
+        react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2 },
+            icon && react_2.default.createElement(react_1.Icon, { as: icon, size: "1rem", color: (_b = colors === null || colors === void 0 ? void 0 : colors.header) === null || _b === void 0 ? void 0 : _b[500] }),
+            text && (react_2.default.createElement(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: (_c = colors === null || colors === void 0 ? void 0 : colors.header) === null || _c === void 0 ? void 0 : _c[500] }, text))),
+        react_2.default.createElement(react_1.Box, { borderRadius: "0.25rem", bg: colors === null || colors === void 0 ? void 0 : colors.white, border: "0.075rem solid ".concat((_d = colors === null || colors === void 0 ? void 0 : colors.border) === null || _d === void 0 ? void 0 : _d[500]), boxShadow: "0 0.063rem 0.125rem 0 ".concat((_e = colors === null || colors === void 0 ? void 0 : colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary), p: "1.5rem" }, children)));
+};
+exports.default = FormWrapper;

package/dist/Components/NavigationBar/NavigationBar.js

@@ -8,11 +8,15 @@ var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 function NavBar(_a) {
+    var _b, _c, _d, _e;
     var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
         react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
-            react_1.default.createElement(react_2.Box, null, navigationBarText),
+            react_1.default.createElement(react_2.Box, { display: "flex", gap: 1.5, alignItems: "center" },
+                (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, { width: "1.5rem", height: "1.5rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } },
+                    react_1.default.createElement(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] }))),
+                (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (react_1.default.createElement(react_2.Text, { color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.secondary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem" }, navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text))),
             react_1.default.createElement(react_2.Flex, null,
                 react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 7 },
                     react_1.default.createElement(react_2.Menu, null,

package/dist/Components/NavigationBar/NavigationBarProps.d.ts

@@ -7,7 +7,10 @@ export type NavbarProps = {
     handleNavOnClick: (url: string) => void;
     handleLogout: () => void;
     logoutText: string;
-    navigationBarText?: string;
+    navigationBarText?: {
+        text: string;
+        onIconClick?: () => void;
+    };
 };
 export type MenuProps = {
     title: string;

package/dist/Components/Tag/Tag.d.ts

@@ -0,0 +1,12 @@
+import React, { ElementType } from "react";
+interface ChipProps {
+    label: string;
+    onIconClick?: () => void;
+    onTagClick?: () => void;
+    icon?: ElementType;
+    colorScheme?: "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+    size?: "sm" | "md" | "lg";
+    variant?: "solid" | "outline";
+}
+declare const Tag: React.FC<ChipProps>;
+export default Tag;

package/dist/Components/Tag/Tag.js

@@ -0,0 +1,21 @@
+"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 react_2 = require("@chakra-ui/react");
+var Tag = function (_a) {
+    var label = _a.label, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b, _c = _a.variant, variant = _c === void 0 ? "solid" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, icon = _a.icon, onTagClick = _a.onTagClick, onIconClick = _a.onIconClick;
+    return (react_1.default.createElement(react_2.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", cursor: "pointer", onClick: function () { return onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(); } },
+        react_1.default.createElement(react_2.TagLabel, null, label),
+        icon && (react_1.default.createElement(react_2.TagRightIcon, { as: icon, boxSize: "1em", ml: 1.5, cursor: onIconClick ? "pointer" : "default", onClick: function (e) {
+                e.stopPropagation();
+                onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick();
+            }, transition: "all 0.2s ease", _hover: {
+                opacity: 0.8,
+                transform: "scale(1.05)",
+                cursor: onIconClick ? "pointer" : "default",
+            } }))));
+};
+exports.default = Tag;

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

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

package/dist/Components/Tag/Tag.styles.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+exports.Tag = {
+    baseStyle: {
+        borderRadius: "full",
+        fontWeight: "bold",
+        px: 3,
+        py: 1,
+    },
+    sizes: {
+        sm: {
+            fontSize: "0.75rem",
+            px: 2,
+            py: 1,
+        },
+        md: {
+            fontSize: "0.875rem",
+            px: 3,
+            py: 1.5,
+        },
+        lg: {
+            fontSize: "1rem",
+            px: 4,
+            py: 2,
+        },
+    },
+    variants: {
+        solid: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                bg: theme.colors[colorScheme][500],
+                color: theme.colors.white,
+                _hover: {
+                    bg: theme.colors[colorScheme][600],
+                },
+                _active: {
+                    bg: theme.colors[colorScheme][700],
+                },
+            });
+        },
+        outline: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                border: "0.125rem solid",
+                borderColor: theme.colors[colorScheme][500],
+                color: theme.colors[colorScheme][500],
+                bg: "transparent",
+                _hover: {
+                    bg: theme.colors[colorScheme][50],
+                },
+                _active: {
+                    bg: theme.colors[colorScheme][100],
+                },
+            });
+        },
+    },
+    defaultProps: {
+        size: "md",
+        variant: "solid",
+        colorScheme: "primary",
+    },
+};

package/dist/Layout.js

@@ -60,6 +60,8 @@ var alertdialog_1 = __importDefault(require("./Pages/alertdialog"));
 var table_1 = require("./Pages/table");
 var TInput_1 = __importDefault(require("./Pages/TInput"));
 var kanbanboard_1 = __importDefault(require("./Pages/kanbanboard"));
+var Tag_1 = __importDefault(require("./Components/Tag/Tag"));
+var lucide_react_1 = require("lucide-react");
 var Layout = function () {
     var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
     var navigate = function (path) {
@@ -144,6 +146,8 @@ var Layout = function () {
                 return react_2.default.createElement(TInput_1.default, null);
             case "/kanban":
                 return react_2.default.createElement(kanbanboard_1.default, null);
+            case "/tag":
+                return (react_2.default.createElement(Tag_1.default, { label: "tag", icon: lucide_react_1.Home, size: "md", onIconClick: function () { return console.log("Icon"); }, onTagClick: function () { return console.log("Tag"); } }));
             case "/":
             default:
         }
@@ -182,7 +186,8 @@ var Layout = function () {
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/toster"); }, variant: "outline" }, "Toster"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/InputPage"); }, variant: "outline" }, "Input"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); }, variant: "outline" }, "Table"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/kanban"); }, variant: "outline" }, "Kanban")),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/kanban"); }, variant: "outline" }, "Kanban"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tag"); }, variant: "outline" }, "Tag")),
             react_2.default.createElement("br", null),
             react_2.default.createElement("br", null),
             react_2.default.createElement("h2", { className: "text-3xl" }, " TailWindCss"),

package/dist/Pages/datePick.js

@@ -52,7 +52,7 @@ var DatePick = function () {
     };
     return (react_1.default.createElement("div", null,
         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(DatePicker_1.default, { selectedDate: selectedDate, onChange: handleDateChange, dateFormat: "HH:mm", pickerType: "time", width: "300px" }),
         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 })));

package/dist/Theme/componentStyles.d.ts

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

package/dist/Theme/componentStyles.js

@@ -5,9 +5,11 @@ 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");
+var Tag_styles_1 = require("../Components/Tag/Tag.styles");
 exports.componentStyles = {
     Checkbox: Checkbox_styles_1.Checkbox,
     Input: TextInput_styles_1.Input,
     Button: Button_styles_1.Button,
     Select: Select_styles_1.Select,
+    Tag: Tag_styles_1.Tag,
 };

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 FormWrapper from "./Components/Form/FormWrapper";
 import HeaderActions from "./Components/Header/HeaderActions";
 import InputTextArea from "./Components/InputTextArea/InputTextArea";
 import KanbanBoard from "./Components/KanbanBoard/KanbanBoard";
@@ -32,6 +33,7 @@ import SideBar from "./Components/SideBar/SideBar";
 import Skeletons from "./Components/Skeletons/Skeletons";
 import Switch from "./Components/Switch/Switch";
 import Table from "./Components/Table/Table";
+import Tag from "./Components/Tag/Tag";
 import TextInput from "./Components/Input/TextInput";
 import Timeline from "./Components/Timeline/Timeline";
 import Toaster, { useToaster } from "./Components/Toaster/Toaster";
@@ -42,5 +44,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, 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 { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FormWrapper, 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, Tag, 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.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;
+exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = 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.FormWrapper = 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 = exports.useToaster = exports.ToolTip = 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 FormWrapper_1 = __importDefault(require("./Components/Form/FormWrapper"));
+exports.FormWrapper = FormWrapper_1.default;
 var HeaderActions_1 = __importDefault(require("./Components/Header/HeaderActions"));
 exports.HeaderActions = HeaderActions_1.default;
 var InputTextArea_1 = __importDefault(require("./Components/InputTextArea/InputTextArea"));
@@ -107,6 +109,8 @@ var Switch_1 = __importDefault(require("./Components/Switch/Switch"));
 exports.Switch = Switch_1.default;
 var Table_1 = __importDefault(require("./Components/Table/Table"));
 exports.Table = Table_1.default;
+var Tag_1 = __importDefault(require("./Components/Tag/Tag"));
+exports.Tag = Tag_1.default;
 var TextInput_1 = __importDefault(require("./Components/Input/TextInput"));
 exports.TextInput = TextInput_1.default;
 var Timeline_1 = __importDefault(require("./Components/Timeline/Timeline"));

package/package.json

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

package/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
-};

package/tailwind.config.js

@@ -1,239 +0,0 @@
-module.exports = {
-  content: [
-    './src/**/*.{html,js,jsx,ts,tsx}', // Adjust paths based on your project structure
-  ],
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          50: 'var(--color-primary-50)',
-          100: 'var(--color-primary-100)',
-          200: 'var(--color-primary-200)',
-          300: 'var(--color-primary-300)',
-          400: 'var(--color-primary-400)',
-          500: 'var(--color-primary-500)',
-          600: 'var(--color-primary-600)',
-          700: 'var(--color-primary-700)',
-          800: 'var(--color-primary-800)',
-          900: 'var(--color-primary-900)',
-          opacity: {
-            8: 'var(--color-primary-opacity-8)',
-            16: 'var(--color-primary-opacity-16)',
-            24: 'var(--color-primary-opacity-24)',
-            28: 'var(--color-primary-opacity-28)',
-            32: 'var(--color-primary-opacity-32)',
-            40: 'var(--color-primary-opacity-40)',
-          },
-        },
-        semantic: {
-          success: {
-            50: 'var(--color-success-50)',
-            100: 'var(--color-success-100)',
-            200: 'var(--color-success-200)',
-            300: 'var(--color-success-300)',
-            400: 'var(--color-success-400)',
-            500: 'var(--color-success-500)',
-            600: 'var(--color-success-600)',
-            700: 'var(--color-success-700)',
-            800: 'var(--color-success-800)',
-            900: 'var(--color-success-900)',
-          },
-          error: {
-            50: 'var(--color-error-50)',
-            100: 'var(--color-error-100)',
-            200: 'var(--color-error-200)',
-            300: 'var(--color-error-300)',
-            400: 'var(--color-error-400)',
-            500: 'var(--color-error-500)',
-            600: 'var(--color-error-600)',
-            700: 'var(--color-error-700)',
-            800: 'var(--color-error-800)',
-            900: 'var(--color-error-900)',
-          },
-          warning: {
-            50: 'var(--color-warning-50)',
-            100: 'var(--color-warning-100)',
-            200: 'var(--color-warning-200)',
-            300: 'var(--color-warning-300)',
-            400: 'var(--color-warning-400)',
-            500: 'var(--color-warning-500)',
-            600: 'var(--color-warning-600)',
-            700: 'var(--color-warning-700)',
-            800: 'var(--color-warning-800)',
-            900: 'var(--color-warning-900)',
-          },
-          info: {
-            50: 'var(--color-info-50)',
-            100: 'var(--color-info-100)',
-            200: 'var(--color-info-200)',
-            300: 'var(--color-info-300)',
-            400: 'var(--color-info-400)',
-            500: 'var(--color-info-500)',
-            600: 'var(--color-info-600)',
-            700: 'var(--color-info-700)',
-            800: 'var(--color-info-800)',
-            900: 'var(--color-info-900)',
-          },
-        },
-        gray: {
-          50: 'var(--color-gray-50)',
-          100: 'var(--color-gray-100)',
-          200: 'var(--color-gray-200)',
-          300: 'var(--color-gray-300)',
-          400: 'var(--color-gray-400)',
-          500: 'var(--color-gray-500)',
-          600: 'var(--color-gray-600)',
-          700: 'var(--color-gray-700)',
-          800: 'var(--color-gray-800)',
-          900: 'var(--color-gray-900)',
-        },
-        red: {
-          50: 'var(--color-red-50)',
-          100: 'var(--color-red-100)',
-          200: 'var(--color-red-200)',
-          300: 'var(--color-red-300)',
-          400: 'var(--color-red-400)',
-          500: 'var(--color-red-500)',
-          600: 'var(--color-red-600)',
-          700: 'var(--color-red-700)',
-          800: 'var(--color-red-800)',
-          900: 'var(--color-red-900)',
-        },
-        orange: {
-          50: 'var(--color-orange-50)',
-          100: 'var(--color-orange-100)',
-          200: 'var(--color-orange-200)',
-          300: 'var(--color-orange-300)',
-          400: 'var(--color-orange-400)',
-          500: 'var(--color-orange-500)',
-          600: 'var(--color-orange-600)',
-          700: 'var(--color-orange-700)',
-          800: 'var(--color-orange-800)',
-          900: 'var(--color-orange-900)',
-        },
-        yellow: {
-          50: 'var(--color-yellow-50)',
-          100: 'var(--color-yellow-100)',
-          200: 'var(--color-yellow-200)',
-          300: 'var(--color-yellow-300)',
-          400: 'var(--color-yellow-400)',
-          500: 'var(--color-yellow-500)',
-          600: 'var(--color-yellow-600)',
-          700: 'var(--color-yellow-700)',
-          800: 'var(--color-yellow-800)',
-          900: 'var(--color-yellow-900)',
-        },
-        green: {
-          50: 'var(--color-green-50)',
-          100: 'var(--color-green-100)',
-          200: 'var(--color-green-200)',
-          300: 'var(--color-green-300)',
-          400: 'var(--color-green-400)',
-          500: 'var(--color-green-500)',
-          600: 'var(--color-green-600)',
-          700: 'var(--color-green-700)',
-          800: 'var(--color-green-800)',
-          900: 'var(--color-green-900)',
-        },
-        teal: {
-          50: 'var(--color-teal-50)',
-          100: 'var(--color-teal-100)',
-          200: 'var(--color-teal-200)',
-          300: 'var(--color-teal-300)',
-          400: 'var(--color-teal-400)',
-          500: 'var(--color-teal-500)',
-          600: 'var(--color-teal-600)',
-          700: 'var(--color-teal-700)',
-          800: 'var(--color-teal-800)',
-          900: 'var(--color-teal-900)',
-        },
-        blue: {
-          50: 'var(--color-blue-50)',
-          100: 'var(--color-blue-100)',
-          200: 'var(--color-blue-200)',
-          300: 'var(--color-blue-300)',
-          400: 'var(--color-blue-400)',
-          500: 'var(--color-blue-500)',
-          600: 'var(--color-blue-600)',
-          700: 'var(--color-blue-700)',
-          800: 'var(--color-blue-800)',
-          900: 'var(--color-blue-900)',
-        },
-        cyan: {
-          50: 'var(--color-cyan-50)',
-          100: 'var(--color-cyan-100)',
-          200: 'var(--color-cyan-200)',
-          300: 'var(--color-cyan-300)',
-          400: 'var(--color-cyan-400)',
-          500: 'var(--color-cyan-500)',
-          600: 'var(--color-cyan-600)',
-          700: 'var(--color-cyan-700)',
-          800: 'var(--color-cyan-800)',
-          900: 'var(--color-cyan-900)',
-        },
-        purple: {
-          50: 'var(--color-purple-50)',
-          100: 'var(--color-purple-100)',
-          200: 'var(--color-purple-200)',
-          300: 'var(--color-purple-300)',
-          400: 'var(--color-purple-400)',
-          500: 'var(--color-purple-500)',
-          600: 'var(--color-purple-600)',
-          700: 'var(--color-purple-700)',
-          800: 'var(--color-purple-800)',
-          900: 'var(--color-purple-900)',
-        },
-        pink: {
-          50: 'var(--color-pink-50)',
-          100: 'var(--color-pink-100)',
-          200: 'var(--color-pink-200)',
-          300: 'var(--color-pink-300)',
-          400: 'var(--color-pink-400)',
-          500: 'var(--color-pink-500)',
-          600: 'var(--color-pink-600)',
-          700: 'var(--color-pink-700)',
-          800: 'var(--color-pink-800)',
-          900: 'var(--color-pink-900)',
-        },
-        background: {
-          main: 'var(--color-bg-main)',
-          secondary: 'var(--color-bg-secondary)',
-          tertiary: 'var(--color-bg-tertiary)',
-          quaternary: 'var(--color-bg-quaternary)',
-          light: 'var(--color-bg-light)',
-          medium: 'var(--color-bg-medium)',
-          accent: 'var(--color-bg-accent)',
-          subtle: 'var(--color-bg-subtle)',
-          muted: 'var(--color-bg-muted)',
-          neutral: 'var(--color-bg-neutral)',
-          base: 'var(--color-bg-base)',
-          tableHeader: 'var(--color-bg-table-header)',
-        },
-        text: {
-          heading: 'var(--color-text-heading)',
-          body: 'var(--color-text-body)',
-          subtle: 'var(--color-text-subtle)',
-          input: 'var(--color-text-input)',
-          headingOpacity: {
-            4: 'var(--color-heading-opacity-4)',
-            8: 'var(--color-heading-opacity-8)',
-          }
-        },
-        border: {
-          default: 'var(--color-border-default)',
-          light: 'var(--color-border-light)',
-          dark: 'var(--color-border-dark)',
-          input: 'var(--color-border-input)',
-          error: 'var(--color-border-error)',
-          success: 'var(--color-border-success)',
-          warning: 'var(--color-border-warning)',
-          info: 'var(--color-border-info)',
-        },
-        transparent: 'var(--color-transparent)',
-        black: 'var(--color-black)',
-        white: 'var(--color-white)',
-      },
-    },
-  },
-  plugins: [],
-};