pixelize-design-library 2.0.6 → 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

@@ -168,14 +168,18 @@ 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, dateFormat: dateFormat, onChange: function (updatedDate) {
+                    !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);
                         } })),
@@ -195,7 +199,10 @@ function CustomDatePicker(props) {
                                 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/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/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.6",
+  "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: [],
-};