pixelize-design-library 2.0.22 → 2.1.2

package/dist/Layout.js

@@ -62,6 +62,8 @@ 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 Header_1 = __importDefault(require("./Components/Header/Header"));
+var fileUpload_1 = require("./Pages/fileUpload");
 var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
 var Layout = function () {
     var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
@@ -149,6 +151,43 @@ var Layout = function () {
                 return react_2.default.createElement(TInput_1.default, null);
             case "/kanban":
                 return react_2.default.createElement(kanbanboard_1.default, null);
+            case "/header":
+                return (react_2.default.createElement(Header_1.default, { logo: react_2.default.createElement(react_1.Box, { fontSize: "xl", fontWeight: "bold" }, "MyApp"), 
+                    // colorScheme="gray"
+                    active: "/", menuItems: [
+                        { label: "Home", href: "/" },
+                        {
+                            label: "Products",
+                            // badge: {
+                            //   label: "new",
+                            //   colorScheme: "red",
+                            // },
+                            children: [
+                                {
+                                    label: "AI Tools",
+                                    href: "/products/ai",
+                                    badge: {
+                                        label: "new",
+                                        colorScheme: "blackAlpha",
+                                    },
+                                },
+                                {
+                                    label: "APIs",
+                                    href: "/products/apis",
+                                    badge: { label: "coming soon", colorScheme: "green" },
+                                },
+                            ],
+                        },
+                        {
+                            label: "Docs",
+                            href: "/docs",
+                            badge: { label: "updated", colorScheme: "yellow" },
+                        },
+                    ], rightSlot: react_2.default.createElement(react_2.default.Fragment, null,
+                        react_2.default.createElement(react_1.Button, { variant: "ghost", colorScheme: "purple" }, "Login"),
+                        react_2.default.createElement(react_1.Button, { colorScheme: "purple" }, "Sign Up")) }));
+            case "/upload":
+                return react_2.default.createElement(fileUpload_1.FileUploader, null);
             case "/tag":
                 return (react_2.default.createElement(Tag_1.default, { label: "tag", icon: lucide_react_1.Home, size: "md", colorScheme: "gray", onIconClick: function () { return console.log("Icon"); }, onTagClick: function () { return console.log("Tag"); } }));
             case "/":
@@ -158,44 +197,47 @@ var Layout = function () {
     return (react_2.default.createElement("div", null,
         react_2.default.createElement("nav", null,
             react_2.default.createElement(react_1.HStack, { spacing: 3, flexWrap: "wrap", alignItems: "center" },
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); }, variant: "outline" }, "Home"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/alertdialog"); }, variant: "outline" }, "AlertDialog"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/accordion"); }, variant: "outline" }, "Accordion"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); }, variant: "outline", size: "sm" }, "Home"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/alertdialog"); }, variant: "outline", size: "sm" }, "AlertDialog"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/accordion"); }, variant: "outline", size: "sm" }, "Accordion"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectsearch"); }, variant: "outline", size: "sm" }, "Selectsearch"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/searchSelect"); }, variant: "outline" }, "searchSelect"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectSearch"); }, variant: "outline" }, "selectSearch"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/timeline"); }, variant: "outline" }, "Timeline"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/search"); }, variant: "outline" }, "Search"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/datepicker"); }, variant: "outline" }, "Datepicker"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/multiselect"); }, variant: "outline" }, "Multiselect"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/drawer"); }, variant: "outline" }, "Drawer"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/verifyEmail"); }, variant: "outline" }, "VerifyEmail"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/editor"); }, variant: "outline" }, "Editor"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/dropdown"); }, variant: "outline" }, "Dropdown"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/notearea"); }, variant: "outline" }, "Notearea"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/switch"); }, variant: "outline" }, "Switch"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/photoViewer"); }, variant: "outline" }, "PhotoViewer"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/charts"); }, variant: "outline" }, "Charts"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tooltip"); }, variant: "outline" }, "Tooltip"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/card"); }, variant: "outline" }, "Card"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/pininput"); }, variant: "outline" }, "PinInputs"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/numberinput"); }, variant: "outline" }, "NumberInput"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/progressbar"); }, variant: "outline" }, "Progressbar"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/button"); }, variant: "outline" }, "Button"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/radio"); }, variant: "outline" }, "RadioButton"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/skeleton"); }, variant: "outline" }, "Skeleton"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/textarea"); }, variant: "outline" }, "Textarea"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/select"); }, variant: "outline" }, "Select"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/modal"); }, variant: "outline" }, "Modal"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/checkbox"); }, variant: "outline" }, "Checkbox"),
-                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("/tag"); }, variant: "outline" }, "Tag")),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/timeline"); }, variant: "outline", size: "sm" }, "Timeline"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/search"); }, variant: "outline", size: "sm" }, "Search"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/datepicker"); }, variant: "outline", size: "sm" }, "Datepicker"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/multiselect"); }, variant: "outline", size: "sm" }, "Multiselect"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/drawer"); }, variant: "outline", size: "sm" }, "Drawer"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/verifyEmail"); }, variant: "outline", size: "sm" }, "VerifyEmail"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/editor"); }, variant: "outline", size: "sm" }, "Editor"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/dropdown"); }, variant: "outline", size: "sm" }, "Dropdown"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/notearea"); }, variant: "outline", size: "sm" }, "Notearea"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/switch"); }, variant: "outline", size: "sm" }, "Switch"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/photoViewer"); }, variant: "outline", size: "sm" }, "PhotoViewer"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/charts"); }, variant: "outline", size: "sm" }, "Charts"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tooltip"); }, variant: "outline", size: "sm" }, "Tooltip"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/card"); }, variant: "outline", size: "sm" }, "Card"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/pininput"); }, variant: "outline", size: "sm" }, "PinInputs"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/numberinput"); }, variant: "outline", size: "sm" }, "NumberInput"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/progressbar"); }, variant: "outline", size: "sm" }, "Progressbar"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/button"); }, variant: "outline", size: "sm" }, "Button"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/radio"); }, variant: "outline", size: "sm" }, "RadioButton"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/skeleton"); }, variant: "outline", size: "sm" }, "Skeleton"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/textarea"); }, variant: "outline", size: "sm" }, "Textarea"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/select"); }, variant: "outline", size: "sm" }, "Select"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/modal"); }, variant: "outline", size: "sm" }, "Modal"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/checkbox"); }, variant: "outline", size: "sm" }, "Checkbox"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/toster"); }, variant: "outline", size: "sm" }, "Toster"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/InputPage"); }, variant: "outline", size: "sm" }, "Input"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); }, variant: "outline", size: "sm" }, "Table"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/kanban"); }, variant: "outline", size: "sm" }, "Kanban"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tag"); }, variant: "outline", size: "sm" }, "Tag"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/header"); }, variant: "outline", size: "sm" }, "Header"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/upload"); }, variant: "outline", size: "sm" }, "File Upload")),
             react_2.default.createElement("br", null),
             react_2.default.createElement("br", null),
             react_2.default.createElement("h2", { className: "text-3xl" }, " TailWindCss"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tinput"); }, variant: "outline" }, "Input"),
+            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tinput"); }, variant: "outline", size: "sm" }, "Input"),
             react_2.default.createElement("button", { onClick: function () { return switchTheme("theme2"); } }, "Switch to Theme 2")),
         react_2.default.createElement("br", null),
         react_2.default.createElement("br", null),

package/dist/Pages/fileUpload.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const FileUploader: () => React.JSX.Element;

package/dist/Pages/fileUpload.js

@@ -0,0 +1,65 @@
+"use strict";
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploader = void 0;
+var react_1 = __importStar(require("react"));
+var FileUpload_1 = __importDefault(require("../Components/FileUpload/FileUpload"));
+var Reorder_1 = __importDefault(require("../Components/Reorder/Reorder"));
+var imageList = [
+    { id: "1", previewUrl: "https://picsum.photos/id/1011/100", name: "Image 1" },
+    { id: "2", previewUrl: "https://picsum.photos/id/1012/100", name: "Image 2" },
+    { id: "3", previewUrl: "https://picsum.photos/id/1013/100", name: "Image 3" },
+    { id: "4", previewUrl: "https://picsum.photos/id/1011/100", name: "Image 1" },
+];
+var FileUploader = function () {
+    var _a = (0, react_1.useState)([]), file = _a[0], setFile = _a[1];
+    var _b = (0, react_1.useState)(imageList), list = _b[0], setList = _b[1];
+    var handleFiles = function (files) {
+        setFile(files);
+        var uploadedImages = files.map(function (f, i) { return ({
+            id: "".concat(i + 11),
+            name: f.name,
+            previewUrl: URL.createObjectURL(f),
+        }); });
+        setList(__spreadArray(__spreadArray([], imageList, true), uploadedImages, true));
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(FileUpload_1.default, { onFilesUploaded: function (files) { return handleFiles(files); }, uploadedFiles: file, onRemoveFile: function (file) { return console.log("SDFSDf", file); }, acceptTypes: [".webp", ".pdf", ".zip"], maxSizeKB: 512 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Reorder_1.default, { items: list, onReorder: function (files) { return setList(files); }, label: "Reorder" })));
+};
+exports.FileUploader = FileUploader;

package/dist/index.d.ts

@@ -11,7 +11,9 @@ 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 FileUpload from "./Components/FileUpload/FileUpload";
 import FormWrapper from "./Components/Form/FormWrapper";
+import Header from "./Components/Header/Header";
 import HeaderActions from "./Components/Header/HeaderActions";
 import InputTextArea from "./Components/InputTextArea/InputTextArea";
 import KanbanBoard from "./Components/KanbanBoard/KanbanBoard";
@@ -26,6 +28,7 @@ import ProfileCard, { ProfileCardHeader, ProfileCardBody, ProfileCardFooter } fr
 import ProfilePhotoViewer from "./Components/ProfilePhotoViewer/ProfilePhotoViewer";
 import ProgressBar from "./Components/ProgressBar/ProgressBar";
 import { RadioButton, RadioButtonGroup } from "./Components/RadioButton/RadioButton";
+import Reorder from "./Components/Reorder/Reorder";
 import Search from "./Components/Search/Search";
 import Select from "./Components/Select/Select";
 import SearchSelect from "./Components/SearchSelect/SearchSelect";
@@ -45,5 +48,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, FormWrapper, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SearchSelect, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, 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, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, 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.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.SearchSelect = 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 = exports.Toaster = void 0;
+exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = 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.Header = exports.FormWrapper = exports.FileUpload = 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 = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -58,8 +58,12 @@ 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 FileUpload_1 = __importDefault(require("./Components/FileUpload/FileUpload"));
+exports.FileUpload = FileUpload_1.default;
 var FormWrapper_1 = __importDefault(require("./Components/Form/FormWrapper"));
 exports.FormWrapper = FormWrapper_1.default;
+var Header_1 = __importDefault(require("./Components/Header/Header"));
+exports.Header = Header_1.default;
 var HeaderActions_1 = __importDefault(require("./Components/Header/HeaderActions"));
 exports.HeaderActions = HeaderActions_1.default;
 var InputTextArea_1 = __importDefault(require("./Components/InputTextArea/InputTextArea"));
@@ -95,6 +99,8 @@ exports.ProgressBar = ProgressBar_1.default;
 var RadioButton_1 = require("./Components/RadioButton/RadioButton");
 Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return RadioButton_1.RadioButton; } });
 Object.defineProperty(exports, "RadioButtonGroup", { enumerable: true, get: function () { return RadioButton_1.RadioButtonGroup; } });
+var Reorder_1 = __importDefault(require("./Components/Reorder/Reorder"));
+exports.Reorder = Reorder_1.default;
 var Search_1 = __importDefault(require("./Components/Search/Search"));
 exports.Search = Search_1.default;
 var Select_1 = __importDefault(require("./Components/Select/Select"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.0.22",
+  "version": "2.1.2",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -17,7 +17,8 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
     "react-scripts": "^5.0.1",
-    "react-window": "^1.8.11"
+    "react-window": "^1.8.11",
+    "react-dropzone": "^14.3.8"
   },
   "scripts": {
     "start": "react-scripts start",

package/dist/Components/KaTable/CustomHeader.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-type CustomHeaderProps = {
-    column: any;
-    onSortChange?: (sortState: string, columnName: string) => void;
-    menuItems?: Array<{
-        label: string;
-        onClick: () => void;
-        submenu?: any[];
-    }>;
-    isSort?: boolean;
-    sortDirection: string;
-};
-declare const CustomHeader: React.MemoExoticComponent<({ column, onSortChange, menuItems, isSort, sortDirection, }: CustomHeaderProps) => React.JSX.Element>;
-export default CustomHeader;

package/dist/Components/KaTable/CustomHeader.js

@@ -1,69 +0,0 @@
-"use strict";
-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 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var bs_1 = require("react-icons/bs");
-var fa_1 = require("react-icons/fa");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var CustomHeader = (0, react_1.memo)(function (_a) {
-    var column = _a.column, onSortChange = _a.onSortChange, menuItems = _a.menuItems, isSort = _a.isSort, sortDirection = _a.sortDirection;
-    var handleSortClick = (0, react_1.useCallback)(function () {
-        var sortOrder = "none";
-        if (sortDirection === "none")
-            sortOrder = "asc";
-        else if (sortDirection === "asc")
-            sortOrder = "desc";
-        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(sortOrder, column.key);
-    }, [sortDirection, column.key, onSortChange]);
-    return (react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center" },
-        react_1.default.createElement(react_2.Box, { fontWeight: "bold" }, column.title),
-        react_1.default.createElement(react_2.Flex, { alignItems: "center" },
-            isSort && (react_1.default.createElement(SortingIcon, { sortState: sortDirection, handleSortClick: handleSortClick })),
-            menuItems && (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (react_1.default.createElement(react_2.Menu, null,
-                react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", _hover: { bg: "none" }, _active: { bg: "none" } }),
-                react_1.default.createElement(react_2.Portal, null,
-                    react_1.default.createElement(react_2.MenuList, null, menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
-                        react_1.default.createElement(react_2.MenuItem, { onClick: function () { return item === null || item === void 0 ? void 0 : item.onClick(); } }, item.label),
-                        item.submenu && react_1.default.createElement(Submenu, { items: item.submenu }))); }))))) : null)));
-});
-var SortingIcon = (0, react_1.memo)(function (_a) {
-    var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
-        sortState === "none" && react_1.default.createElement(fa_1.FaSort, { size: 14 }),
-        sortState === "asc" && react_1.default.createElement(fa_1.FaCaretUp, { size: 14 }),
-        sortState === "desc" && react_1.default.createElement(fa_1.FaCaretDown, { size: 14 })));
-});
-var Submenu = (0, react_1.memo)(function (_a) {
-    var items = _a.items;
-    return (react_1.default.createElement(react_2.MenuGroup, null, items.map(function (subItem, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function () { return (subItem === null || subItem === void 0 ? void 0 : subItem.onClick) && (subItem === null || subItem === void 0 ? void 0 : subItem.onClick()); }, sx: {
-            pl: 6,
-            fontSize: "sm",
-            color: "gray.600",
-            _hover: { bg: "gray.100", color: "gray.800" }, // Hover styles
-        } }, subItem.label)); })));
-});
-exports.default = CustomHeader;

package/dist/Components/KaTable/KaTable.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import * as TableEnums from "ka-table/enums";
-import * as TableProps from "ka-table/props";
-import * as TableActionCreator from "ka-table/actionCreators";
-import * as TableModel from "ka-table/models";
-import * as TableUtils from "ka-table/utils";
-import * as TableFun from "ka-table";
-import "ka-table/style.css";
-import "./ka-table.css";
-import { KaTableProps } from "./KaTableProps";
-declare const _default: React.MemoExoticComponent<({ columns, data, rowKey, Edit, format, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading, checkSelect, onRowClick, onSelectionChange, selected, columnVisibility, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, }: KaTableProps) => React.JSX.Element>;
-export default _default;
-export { TableEnums, TableActionCreator, TableProps, TableModel, TableUtils, TableFun, };

package/dist/Components/KaTable/KaTable.js

@@ -1,111 +0,0 @@
-"use strict";
-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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableActionCreator = exports.TableEnums = void 0;
-var react_1 = __importStar(require("react"));
-var ka_table_1 = require("ka-table");
-var TableEnums = __importStar(require("ka-table/enums"));
-exports.TableEnums = TableEnums;
-var TableProps = __importStar(require("ka-table/props"));
-exports.TableProps = TableProps;
-var TableActionCreator = __importStar(require("ka-table/actionCreators"));
-exports.TableActionCreator = TableActionCreator;
-var TableModel = __importStar(require("ka-table/models"));
-exports.TableModel = TableModel;
-var TableUtils = __importStar(require("ka-table/utils"));
-exports.TableUtils = TableUtils;
-var TableFun = __importStar(require("ka-table"));
-exports.TableFun = TableFun;
-require("ka-table/style.css");
-require("./ka-table.css");
-var useMergedChildComponents_1 = __importDefault(require("./useMergedChildComponents"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var table_1 = require("../../Utils/table");
-var selectionCellColumn = {
-    key: "select-cell",
-    width: 50,
-    columnFreeze: true,
-    customHeader: false,
-    className: "select-cell",
-};
-var KaTable = function (_a) {
-    var _b, _c;
-    var columns = _a.columns, data = _a.data, _d = _a.rowKey, rowKey = _d === void 0 ? "id" : _d, Edit = _a.Edit, 
-    // sorting,
-    format = _a.format, 
-    // paging,
-    filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading, checkSelect = _a.checkSelect, onRowClick = _a.onRowClick, onSelectionChange = _a.onSelectionChange, selected = _a.selected, columnVisibility = _a.columnVisibility, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = (0, react_1.useState)([]), sortState = _e[0], setSortState = _e[1];
-    if (checkSelect &&
-        !columns.some(function (column) { return column.key === "select-cell"; })) {
-        columns.unshift(selectionCellColumn);
-    }
-    var dataLength = (_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0;
-    // const columnVisibilitys = columnVisibility ?? false;
-    var handleSort = function (sort) {
-        setSortState(sort);
-    };
-    var sortedData = (0, react_1.useMemo)(function () { return (0, table_1.SortMultiColumnData)(__spreadArray([], data, true), sortState); }, [sortState, data]);
-    var mergedChildComponents = (0, useMergedChildComponents_1.default)({
-        childComponents: childComponents,
-        onSortChange: handleSort,
-        handleSelection: onSelectionChange,
-        rowKey: rowKey,
-        onRowClick: onRowClick,
-        selected: selected,
-        dataLength: dataLength,
-        columns: columns,
-        headerBgColor: headerBgColor,
-        freezedBgColor: freezedBgColor,
-        headerTextColor: headerTextColor,
-        freezedTextColor: freezedTextColor,
-        sortState: sortState,
-    });
-    return (react_1.default.createElement("div", { style: {
-            borderRadius: "10px 0 0 10px",
-            borderWidth: "0px 0px 0px 5px",
-            borderColor: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[500],
-            boxShadow: theme.shadows.lg,
-        } },
-        react_1.default.createElement(ka_table_1.Table, { columns: columns, data: sortedData, rowKeyField: rowKey, editingMode: Edit, key: columns, sortingMode: TableEnums.SortingMode.MultipleRemote, format: format, 
-            // paging={paging}
-            filteringMode: undefined, childComponents: mergedChildComponents, columnReordering: columnReorder, columnResizing: columnResizing, editableCells: editableCells, validation: validation, loading: loading, virtualScrolling: {
-                enabled: true,
-            } })));
-};
-exports.default = react_1.default.memo(KaTable);

package/dist/Components/KaTable/KaTableProps.d.ts

@@ -1,23 +0,0 @@
-export type KaTableProps = {
-    columns: any;
-    data: any;
-    rowKey?: any;
-    Edit?: any;
-    format?: (props: any) => void;
-    validation?: (props: any) => void;
-    filter?: any;
-    childComponents?: any;
-    columnReorder?: any;
-    columnResizing?: any;
-    editableCells?: any;
-    loading?: any;
-    checkSelect?: any;
-    onRowClick?: (rowData: any, column: any) => void;
-    onSelectionChange?: (selectedIds: any[]) => void;
-    selected?: any;
-    columnVisibility?: boolean;
-    headerBgColor?: string;
-    headerTextColor?: string;
-    freezedBgColor?: string;
-    freezedTextColor?: string;
-};

package/dist/Components/KaTable/SelectionCell.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { TableProps } from "./KaTable";
-declare const _default: React.MemoExoticComponent<({ rowKeyValue, selectedRows, onSelectionChange, selected, }: TableProps.ICellTextProps<any> & {
-    onSelectionChange: (ids: any[], type: string) => void;
-    rowKey: any;
-    selected: any;
-}) => React.JSX.Element>;
-export default _default;

package/dist/Components/KaTable/SelectionCell.js

@@ -1,38 +0,0 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-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 KaTable_1 = require("./KaTable");
-var SelectionCell = function (_a) {
-    var rowKeyValue = _a.rowKeyValue, selectedRows = _a.selectedRows, onSelectionChange = _a.onSelectionChange, selected = _a.selected;
-    var table = KaTable_1.TableFun.useTableInstance();
-    var onChangeHandle = function (event) {
-        if (event.nativeEvent.shiftKey) {
-            table.selectRowsRange(rowKeyValue, __spreadArray([], selectedRows, true).pop());
-        }
-        else {
-            var isChecked = event.currentTarget.checked;
-            var action = isChecked ? "add" : "remove";
-            onSelectionChange(rowKeyValue, action);
-            if (isChecked) {
-                table.selectRow(rowKeyValue);
-            }
-            else {
-                table.deselectRow(rowKeyValue);
-            }
-        }
-    };
-    return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle, style: { marginLeft: "37%" } });
-};
-exports.default = react_1.default.memo(SelectionCell);

package/dist/Components/KaTable/SelectionHeader.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const _default: React.MemoExoticComponent<({ onSelectionChange, rowKey, selected }: any) => React.JSX.Element>;
-export default _default;