pixelize-design-library 2.4.1-beta.13 → 2.4.1-beta.14

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -51,9 +51,9 @@ exports.ThemeModeContext = (0, react_1.createContext)(undefined);
 const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
     const [mode, setModeState] = (0, react_1.useState)(defaultMode);
     const [brand, setBrandState] = (0, react_1.useState)(brandProp);
-    // Deterministic on the server and on the first client render — the real OS value lands in
-    // the effect below, so hydration always matches.
-    const [systemMode, setSystemMode] = (0, react_1.useState)("light");
+    // Read synchronously: seeding "light" made every `system` user on a dark OS paint a light
+    // frame before the effect corrected it. SSR-safe — returns "light" with no window.
+    const [systemMode, setSystemMode] = (0, react_1.useState)(colorModeStorage_1.getSystemColorMode);
     (0, react_1.useEffect)(() => {
         setSystemMode((0, colorModeStorage_1.getSystemColorMode)());
         return (0, colorModeStorage_1.subscribeToSystemColorMode)(setSystemMode);
@@ -112,7 +112,7 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
      * page. Scoped to this provider (not a global stylesheet) so `withTheme` consumers — deliberately
      * light-only, see the module doc's "Key rules" — are untouched.
      */
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         document.documentElement.style.colorScheme = resolvedMode;
     }, [resolvedMode]);
     // Held in refs so a caller's inline arrow never re-creates `setMode`/`setBrand`, which would
@@ -159,7 +159,7 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
      * unchanged (so a light-only app is byte-identical to before). Also mirror the mode to
      * `data-mode` for consumers that want to hook their own dark CSS.
      */
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         var _a, _b, _c, _d, _e, _f, _g;
         const root = document.documentElement;
         root.dataset.mode = resolvedMode;

package/dist/esm/Theme/provider/PixelizeThemeProvider.js

@@ -45,9 +45,9 @@ export const ThemeModeContext = createContext(undefined);
 export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
     const [mode, setModeState] = useState(defaultMode);
     const [brand, setBrandState] = useState(brandProp);
-    // Deterministic on the server and on the first client render — the real OS value lands in
-    // the effect below, so hydration always matches.
-    const [systemMode, setSystemMode] = useState("light");
+    // Read synchronously: seeding "light" made every `system` user on a dark OS paint a light
+    // frame before the effect corrected it. SSR-safe — returns "light" with no window.
+    const [systemMode, setSystemMode] = useState(getSystemColorMode);
     useEffect(() => {
         setSystemMode(getSystemColorMode());
         return subscribeToSystemColorMode(setSystemMode);
@@ -106,7 +106,7 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
      * page. Scoped to this provider (not a global stylesheet) so `withTheme` consumers — deliberately
      * light-only, see the module doc's "Key rules" — are untouched.
      */
-    useEffect(() => {
+    useLayoutEffect(() => {
         document.documentElement.style.colorScheme = resolvedMode;
     }, [resolvedMode]);
     // Held in refs so a caller's inline arrow never re-creates `setMode`/`setBrand`, which would
@@ -153,7 +153,7 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
      * unchanged (so a light-only app is byte-identical to before). Also mirror the mode to
      * `data-mode` for consumers that want to hook their own dark CSS.
      */
-    useEffect(() => {
+    useLayoutEffect(() => {
         var _a, _b, _c, _d, _e, _f, _g;
         const root = document.documentElement;
         root.dataset.mode = resolvedMode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.1-beta.13",
+  "version": "2.4.1-beta.14",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/App.d.ts

@@ -1,4 +0,0 @@
-import "./global.css";
-declare function App(): import("react/jsx-runtime").JSX.Element;
-export default App;
-//# sourceMappingURL=App.d.ts.map

package/dist/App.js

@@ -1,95 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const lucide_react_1 = require("lucide-react");
-const Loading_1 = __importDefault(require("./Components/Loading/Loading"));
-const SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
-const NavigationBar_1 = __importDefault(require("./Components/NavigationBar/NavigationBar"));
-const useSidebarPrefs_1 = require("./Hooks/useSidebarPrefs");
-const provider_1 = require("./Theme/provider");
-const useCustomTheme_1 = require("./Theme/useCustomTheme");
-const Layout_1 = __importDefault(require("./Layout"));
-require("./global.css");
-// --- Static demo data (module scope so it isn't re-created each render) ------
-const menu = [
-    {
-        id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "", group: "Main",
-        secondaryItems: [
-            { id: 11, title: "SubMenu", url: "submenu1", icon: lucide_react_1.Cuboid, badge: { count: 10, color: "red", radius: "5px", variant: "outline" } },
-            { id: 12, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
-        ],
-    },
-    {
-        id: 2, title: "AlertDialog", icon: lucide_react_1.Calendar, url: "alertdialog",
-        badge: { count: 10, color: "red", radius: "5px", variant: "outline" },
-    },
-    {
-        id: 3, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
-        subMenu: [
-            { id: 31, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.FileText },
-            { id: 32, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Link2, badge: { count: 10, color: "red", radius: "5px", variant: "subtle" } },
-        ],
-    },
-    {
-        id: 4, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
-        subMenu: [
-            { id: 33, title: "SubMenu1", url: "submenu1" },
-            { id: 34, title: "SubMenu2", url: "submenu2" },
-        ],
-    },
-    {
-        id: 8, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu", group: "Tools",
-        subMenu: [
-            { id: 41, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.Cuboid },
-            { id: 42, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
-        ],
-    },
-];
-const navmenus = [
-    { title: "Account Settings", url: "myaccount", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Cuboid, {}) },
-    { title: "Reset password", url: "resetpassword" },
-    { title: "Billing", url: "billing" },
-    { title: "Notifications", url: "notifications" },
-];
-function useWindowSize() {
-    const [windowSize, setWindowSize] = (0, react_1.useState)({ width: 0, height: 0 });
-    (0, react_1.useEffect)(() => {
-        const handleResize = () => setWindowSize({ width: window.innerWidth, height: window.innerHeight });
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowSize;
-}
-function App() {
-    const { height } = useWindowSize();
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // Persisted layout choices — restored to exactly the same state on reload/new
-    // session via localStorage. `collapsed` = mini-rail; `mobileNav` = navbar mode
-    // forced on a big screen; `mobileOpen` = whether the overlay drawer is open.
-    // Composed handlers (onToggleMobileNav / closeMobile) come straight from the hook,
-    // so this app does not re-implement the navbar-mode/drawer behavior.
-    const { collapsed: toggle, toggleCollapsed, mobileNav, mobileOpen, toggleMobileOpen, onToggleMobileNav, closeMobile, } = (0, useSidebarPrefs_1.useSidebarPrefs)();
-    const [activeMenu, setActiveMenu] = (0, react_1.useState)(2);
-    const [activeSecondaryItem, setActiveSecondaryItem] = (0, react_1.useState)(null);
-    const handleMenuClick = (menu) => {
-        setActiveMenu(menu === null || menu === void 0 ? void 0 : menu.id);
-        setActiveSecondaryItem(null);
-    };
-    const handleSecondaryNavClick = (item) => {
-        var _a, _b;
-        setActiveSecondaryItem((_b = (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.title) !== null && _b !== void 0 ? _b : null);
-    };
-    const handleNavOnClick = () => { };
-    const handleLogout = () => { };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "App", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, handleSecondaryNavClick: handleSecondaryNavClick, toggle: toggle, changeToggle: toggleCollapsed, companyName: "PIXELIZE Technologies Pvt., Ltd.", selectedSecondaryItem: activeSecondaryItem, mobileOpen: mobileOpen, onMobileClose: closeMobile, mobileNav: mobileNav, onToggleMobileNav: onToggleMobileNav }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", userRole: "Admin", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", sideBarToggole: mobileOpen, onSideBarToggole: toggleMobileOpen, forceSideBarToggle: mobileNav, navigationBarText: {
-                                        text: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Dashboard" }),
-                                        onIconClick: () => { },
-                                    }, moreIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Calendar, {}) }, "navbar"), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-testid": "theme-controls", px: "50px", pb: 3, gap: 4, align: "center", justify: "flex-end", children: [(0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "segmented", showBrandPicker: true }), (0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "icon" })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { p: "50px", pt: 0, height: height - 200, overflowY: "scroll", overflowX: "hidden", width: "100%", "data-testid": "playground-surface", bg: theme.colors.backgroundColor.main, children: (0, jsx_runtime_1.jsx)(Layout_1.default, {}) })] })] })] }) }));
-}
-exports.default = App;

package/dist/Layout.d.ts

@@ -1,3 +0,0 @@
-declare const Layout: () => import("react/jsx-runtime").JSX.Element;
-export default Layout;
-//# sourceMappingURL=Layout.d.ts.map

package/dist/Layout.js

@@ -1,286 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const react_2 = require("react");
-const accordion_1 = __importDefault(require("./Pages/accordion"));
-const searchSelect_1 = __importDefault(require("./Pages/searchSelect"));
-const search_1 = __importDefault(require("./Pages/search"));
-const timeline_1 = __importDefault(require("./Pages/timeline"));
-const datePick_1 = __importDefault(require("./Pages/datePick"));
-const multiSelect_1 = __importDefault(require("./Pages/multiSelect"));
-const drawer_1 = __importDefault(require("./Pages/drawer"));
-const verifyEmail_1 = __importDefault(require("./Pages/verifyEmail"));
-const editor_1 = __importDefault(require("./Pages/editor"));
-const dropdown_1 = __importDefault(require("./Pages/dropdown"));
-const noteArea_1 = __importDefault(require("./Pages/noteArea"));
-const switch_1 = __importDefault(require("./Pages/switch"));
-const photoViewer_1 = __importDefault(require("./Pages/photoViewer"));
-const chart_1 = __importDefault(require("./Pages/chart"));
-const tooltip_1 = __importDefault(require("./Pages/tooltip"));
-const card_1 = __importDefault(require("./Pages/card"));
-const pinInputs_1 = __importDefault(require("./Pages/pinInputs"));
-const numberInput_1 = __importDefault(require("./Pages/numberInput"));
-const progressbar_1 = __importDefault(require("./Pages/progressbar"));
-const button_1 = __importDefault(require("./Pages/button"));
-const radioButton_1 = __importDefault(require("./Pages/radioButton"));
-const skeleton_1 = __importDefault(require("./Pages/skeleton"));
-const textArea_1 = __importDefault(require("./Pages/textArea"));
-const select_1 = __importDefault(require("./Pages/select"));
-const modal_1 = __importDefault(require("./Pages/modal"));
-const checkbox_1 = __importDefault(require("./Pages/checkbox"));
-const toster_1 = __importDefault(require("./Pages/toster"));
-const input_1 = __importDefault(require("./Pages/input"));
-const alertdialog_1 = __importDefault(require("./Pages/alertdialog"));
-const productCaard_1 = __importDefault(require("./Pages/productCaard"));
-const table_1 = require("./Pages/table");
-const TInput_1 = __importDefault(require("./Pages/TInput"));
-const kanbanboard_1 = __importDefault(require("./Pages/kanbanboard"));
-const tag_1 = __importDefault(require("./Pages/tag"));
-const Header_1 = __importDefault(require("./Components/Header/Header"));
-const fileUpload_1 = require("./Pages/fileUpload");
-// import SelectSelect from "./Pages/selectSearch";
-const Slider_1 = __importDefault(require("./Components/Slider/Slider"));
-const contactForm_1 = __importDefault(require("./Pages/contactForm"));
-const productDetailCard_1 = __importDefault(require("./Pages/productDetailCard"));
-const notification_1 = __importDefault(require("./Pages/notification"));
-const FeedbackForm_1 = __importDefault(require("./Components/FeedbackForm/FeedbackForm"));
-const productFilter_1 = __importDefault(require("./Pages/productFilter"));
-const tier1_1 = __importDefault(require("./Pages/tier1"));
-const stageProgress_1 = __importDefault(require("./Pages/stageProgress"));
-const orgSwitcher_1 = __importDefault(require("./Pages/orgSwitcher"));
-const upgradeButton_1 = __importDefault(require("./Pages/upgradeButton"));
-const userDetails_1 = __importDefault(require("./Pages/userDetails"));
-const rolesPermission_1 = __importDefault(require("./Pages/rolesPermission"));
-const customModulesTable_1 = __importDefault(require("./Pages/customModulesTable"));
-const signInActivityTable_1 = __importDefault(require("./Pages/signInActivityTable"));
-const organizationDetails_1 = __importDefault(require("./Pages/organizationDetails"));
-// All component demo routes — sorted alphabetically by label for the nav grid.
-const componentLinks = [
-    { label: "Accordion", path: "/accordion" },
-    { label: "Alert Dialog", path: "/alertdialog" },
-    { label: "Button", path: "/button" },
-    { label: "Card", path: "/card" },
-    { label: "Charts", path: "/charts" },
-    { label: "Checkbox", path: "/checkbox" },
-    { label: "Contact Form", path: "/contactForm" },
-    { label: "Datepicker", path: "/datepicker" },
-    { label: "Drawer", path: "/drawer" },
-    { label: "Dropdown", path: "/dropdown" },
-    { label: "Editor", path: "/editor" },
-    { label: "Feedback Form", path: "/feedbackForm" },
-    { label: "File Upload", path: "/upload" },
-    { label: "Header", path: "/header" },
-    { label: "Input", path: "/InputPage" },
-    { label: "Kanban", path: "/kanban" },
-    { label: "Modal", path: "/modal" },
-    { label: "Multiselect", path: "/multiselect" },
-    { label: "Note Area", path: "/notearea" },
-    { label: "Notification", path: "/notification" },
-    { label: "Number Input", path: "/numberinput" },
-    { label: "Photo Viewer", path: "/photoViewer" },
-    { label: "Pin Input", path: "/pininput" },
-    { label: "Product Card", path: "/productCard" },
-    { label: "Product Detail Card", path: "/productDetails" },
-    { label: "Product Filter", path: "/productFilter" },
-    { label: "Progressbar", path: "/progressbar" },
-    { label: "Radio Button", path: "/radio" },
-    { label: "Search", path: "/search" },
-    { label: "Search Select", path: "/searchSelect" },
-    { label: "Select", path: "/select" },
-    { label: "Skeleton", path: "/skeleton" },
-    { label: "Slider", path: "/slider" },
-    { label: "Switch", path: "/switch" },
-    { label: "Table", path: "/table" },
-    { label: "Tag", path: "/tag" },
-    { label: "Tier 1 (New)", path: "/tier1" },
-    { label: "Stage Progress", path: "/stageProgress" },
-    { label: "Org Switcher", path: "/orgSwitcher" },
-    { label: "Upgrade Button", path: "/upgradeButton" },
-    { label: "User Details", path: "/userDetails" },
-    { label: "Roles & Permissions", path: "/rolesPermission" },
-    { label: "Custom Modules", path: "/customModulesTable" },
-    { label: "Sign-in Activity", path: "/signInActivityTable" },
-    { label: "Organization Details", path: "/organizationDetails" },
-    { label: "Text Area", path: "/textarea" },
-    { label: "Timeline", path: "/timeline" },
-    { label: "Toaster", path: "/toster" },
-    { label: "Tooltip", path: "/tooltip" },
-    { label: "Verify Email", path: "/verifyEmail" },
-].sort((a, b) => a.label.localeCompare(b.label));
-const Layout = () => {
-    const [currentPath, setCurrentPath] = (0, react_2.useState)(window.location.pathname);
-    const navigate = (path) => {
-        window.history.pushState({}, "", path);
-        setCurrentPath(path);
-    };
-    (0, react_2.useEffect)(() => {
-        const handlePopState = () => {
-            setCurrentPath(window.location.pathname);
-        };
-        window.addEventListener("popstate", handlePopState);
-        return () => {
-            window.removeEventListener("popstate", handlePopState);
-        };
-    }, []);
-    const renderPage = () => {
-        switch (currentPath) {
-            case "/alertdialog":
-                return (0, jsx_runtime_1.jsx)(alertdialog_1.default, {});
-            case "/accordion":
-                return (0, jsx_runtime_1.jsx)(accordion_1.default, {});
-            case "/searchSelect":
-                return (0, jsx_runtime_1.jsx)(searchSelect_1.default, {});
-            case "/timeline":
-                return (0, jsx_runtime_1.jsx)(timeline_1.default, {});
-            case "/search":
-                return (0, jsx_runtime_1.jsx)(search_1.default, {});
-            case "/datepicker":
-                return (0, jsx_runtime_1.jsx)(datePick_1.default, {});
-            case "/multiselect":
-                return (0, jsx_runtime_1.jsx)(multiSelect_1.default, {});
-            case "/drawer":
-                return (0, jsx_runtime_1.jsx)(drawer_1.default, {});
-            case "/verifyEmail":
-                return (0, jsx_runtime_1.jsx)(verifyEmail_1.default, {});
-            case "/editor":
-                return (0, jsx_runtime_1.jsx)(editor_1.default, {});
-            case "/dropdown":
-                return (0, jsx_runtime_1.jsx)(dropdown_1.default, {});
-            case "/notearea":
-                return (0, jsx_runtime_1.jsx)(noteArea_1.default, {});
-            case "/notification":
-                return (0, jsx_runtime_1.jsx)(notification_1.default, {});
-            case "/switch":
-                return (0, jsx_runtime_1.jsx)(switch_1.default, {});
-            case "/photoViewer":
-                return (0, jsx_runtime_1.jsx)(photoViewer_1.default, {});
-            case "/charts":
-                return (0, jsx_runtime_1.jsx)(chart_1.default, {});
-            case "/tooltip":
-                return (0, jsx_runtime_1.jsx)(tooltip_1.default, {});
-            case "/card":
-                return (0, jsx_runtime_1.jsx)(card_1.default, {});
-            case "/pininput":
-                return (0, jsx_runtime_1.jsx)(pinInputs_1.default, {});
-            case "/numberinput":
-                return (0, jsx_runtime_1.jsx)(numberInput_1.default, {});
-            case "/progressbar":
-                return (0, jsx_runtime_1.jsx)(progressbar_1.default, {});
-            case "/button":
-                return (0, jsx_runtime_1.jsx)(button_1.default, {});
-            case "/radio":
-                return (0, jsx_runtime_1.jsx)(radioButton_1.default, {});
-            case "/skeleton":
-                return (0, jsx_runtime_1.jsx)(skeleton_1.default, {});
-            case "/textarea":
-                return (0, jsx_runtime_1.jsx)(textArea_1.default, {});
-            case "/select":
-                return (0, jsx_runtime_1.jsx)(select_1.default, {});
-            case "/modal":
-                return (0, jsx_runtime_1.jsx)(modal_1.default, {});
-            case "/checkbox":
-                return (0, jsx_runtime_1.jsx)(checkbox_1.default, {});
-            case "/toster":
-                return (0, jsx_runtime_1.jsx)(toster_1.default, {});
-            case "/InputPage":
-                return (0, jsx_runtime_1.jsx)(input_1.default, {});
-            case "/table":
-                return (0, jsx_runtime_1.jsx)(table_1.TableExample, {});
-            case "/tinput":
-                return (0, jsx_runtime_1.jsx)(TInput_1.default, {});
-            case "/kanban":
-                return (0, jsx_runtime_1.jsx)(kanbanboard_1.default, {});
-            case "/contactForm":
-                return (0, jsx_runtime_1.jsx)(contactForm_1.default, {});
-            case "/header":
-                return ((0, jsx_runtime_1.jsx)(Header_1.default, { logo: (0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "xl", fontWeight: "bold", children: "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: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", colorScheme: "purple", children: "Login" }), (0, jsx_runtime_1.jsx)(react_1.Button, { colorScheme: "purple", children: "Sign Up" })] }) }));
-            case "/upload":
-                return (0, jsx_runtime_1.jsx)(fileUpload_1.FileUploader, {});
-            case "/slider":
-                return ((0, jsx_runtime_1.jsx)(Slider_1.default, { images: [
-                        {
-                            "id": 5,
-                            "previewUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1766229935/main_sweets/1766229934288-Winter_Delghts.webp",
-                            "order": 1
-                        },
-                        {
-                            "id": 6,
-                            "previewUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1766229935/main_sweets/1766229935008-Shree_M_-_Desktop_Banner_1.jpg",
-                            "order": 2
-                        },
-                        {
-                            "id": 7,
-                            "previewUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1766649309/main_sweets/1766649308634-muthukavitha_laddu_banner_unde.jpg",
-                            "order": 3
-                        }
-                    ] }));
-            case "/productCard":
-                return (0, jsx_runtime_1.jsx)(productCaard_1.default, {});
-            case "/productDetails":
-                return (0, jsx_runtime_1.jsx)(productDetailCard_1.default, {});
-            case "/productFilter":
-                return (0, jsx_runtime_1.jsx)(productFilter_1.default, {});
-            case "/tier1":
-                return (0, jsx_runtime_1.jsx)(tier1_1.default, {});
-            case "/stageProgress":
-                return (0, jsx_runtime_1.jsx)(stageProgress_1.default, {});
-            case "/orgSwitcher":
-                return (0, jsx_runtime_1.jsx)(orgSwitcher_1.default, {});
-            case "/upgradeButton":
-                return (0, jsx_runtime_1.jsx)(upgradeButton_1.default, {});
-            case "/userDetails":
-                return (0, jsx_runtime_1.jsx)(userDetails_1.default, {});
-            case "/rolesPermission":
-                return (0, jsx_runtime_1.jsx)(rolesPermission_1.default, {});
-            case "/customModulesTable":
-                return (0, jsx_runtime_1.jsx)(customModulesTable_1.default, {});
-            case "/signInActivityTable":
-                return (0, jsx_runtime_1.jsx)(signInActivityTable_1.default, {});
-            case "/organizationDetails":
-                return (0, jsx_runtime_1.jsx)(organizationDetails_1.default, {});
-            case "/feedbackForm":
-                return (0, jsx_runtime_1.jsx)(FeedbackForm_1.default, {});
-            case "/tag":
-                return (0, jsx_runtime_1.jsx)(tag_1.default, {});
-            case "/":
-            default:
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "nav", mb: 8, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", fontWeight: 600, color: "gray.500", mb: 3, children: ["Components (", componentLinks.length, ")"] }), (0, jsx_runtime_1.jsxs)(react_1.SimpleGrid, { minChildWidth: "8rem", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => navigate("/"), variant: currentPath === "/" ? "solid" : "outline", size: "xs", w: "100%", children: "Home" }), componentLinks.map((link) => ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => navigate(link.path), variant: currentPath === link.path ? "solid" : "outline", size: "xs", w: "100%", children: link.label }, link.path)))] })] }), renderPage()] }));
-};
-exports.default = Layout;

package/dist/Pages/TInput.d.ts

@@ -1,3 +0,0 @@
-declare const TInput: () => import("react/jsx-runtime").JSX.Element;
-export default TInput;
-//# sourceMappingURL=TInput.d.ts.map

package/dist/Pages/TInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TInput.d.ts","sourceRoot":"","sources":["../../src/Pages/TInput.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,+CAiCX,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/Pages/TInput.js

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Input_1 = __importDefault(require("../Components/Input/Input/Input"));
-const Buttons_1 = __importDefault(require("../Components/Buttons/Buttons"));
-const PinInputs_1 = __importDefault(require("../Components/PinInputs/PinInputs"));
-const TInput = () => {
-    const [email, setEmail] = (0, react_1.useState)("");
-    const [password, setPassword] = (0, react_1.useState)("");
-    const [errors] = (0, react_1.useState)({
-        email: "ddd",
-        password: "",
-    });
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { label: "Email Address", type: "email", value: email, onChange: setEmail, error: errors.email, placeholder: "Email Address", inputBoxClassName: "w-1/6" }), (0, jsx_runtime_1.jsx)(Input_1.default, { label: "Password", type: "password", value: password, onChange: setPassword, error: errors.password, placeholder: "Password", inputBoxClassName: "w-1/6" }), (0, jsx_runtime_1.jsx)(PinInputs_1.default, { length: 6, error: "", onComplete: (value) => { console.log(value, "value"); } }), (0, jsx_runtime_1.jsx)(Buttons_1.default, { label: "Sign In", onClick: () => { } })] }));
-};
-exports.default = TInput;

package/dist/Pages/accordion.d.ts

@@ -1,3 +0,0 @@
-declare const Accordions: () => import("react/jsx-runtime").JSX.Element;
-export default Accordions;
-//# sourceMappingURL=accordion.d.ts.map

package/dist/Pages/accordion.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/Pages/accordion.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,UAAU,+CAsCf,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/Pages/accordion.js

@@ -1,21 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Accordion_1 = __importDefault(require("../Components/Accordion/Accordion"));
-const react_1 = require("@chakra-ui/react");
-const Accordions = () => {
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { maxW: "40rem", mx: "auto", py: 6, px: 4, children: (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowToggle: true, items: [
-                {
-                    header: "Section 1 title",
-                    content: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { children: "This is text inside Section 1." }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: "gray.100", borderRadius: "md", p: 4, mt: 2, children: "This is a box with more content inside Section 1." }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { mt: 2, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", bg: "blue.100", borderRadius: "md", p: 4, children: "Box 1" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", bg: "green.100", borderRadius: "md", p: 4, children: "Box 2" })] })] })),
-                },
-                {
-                    header: "Section 2 title",
-                    content: ((0, jsx_runtime_1.jsx)(react_1.Text, { children: "This is text inside Section 2. The chevron rotates and the header tints when the section is expanded." })),
-                },
-            ] }) }));
-};
-exports.default = Accordions;

package/dist/Pages/alertdialog.d.ts

@@ -1,3 +0,0 @@
-declare const AlertdialogBox: () => import("react/jsx-runtime").JSX.Element;
-export default AlertdialogBox;
-//# sourceMappingURL=alertdialog.d.ts.map

package/dist/Pages/alertdialog.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"alertdialog.d.ts","sourceRoot":"","sources":["../../src/Pages/alertdialog.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc,+CA0BnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Pages/alertdialog.js

@@ -1,53 +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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const AlertDialog_1 = __importDefault(require("../Components/AlertDialog/AlertDialog"));
-const react_2 = require("@chakra-ui/react");
-const AlertdialogBox = () => {
-    const [alertActive, setAlertActive] = (0, react_1.useState)(false);
-    const leastDestructiveRef = react_1.default.useRef();
-    const handleAlert = () => {
-        setAlertActive(!alertActive);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
-                    setAlertActive(true);
-                }, children: "AlertDialog" }), (0, jsx_runtime_1.jsx)(AlertDialog_1.default, { isOpen: alertActive, onClose: handleAlert, leastDestructiveRef: leastDestructiveRef, title: "hello", content: (0, jsx_runtime_1.jsx)("div", { style: { color: "red", height: "200px" }, children: "hellobody" }), onConfirm: () => handleAlert(), size: "500" })] }));
-};
-exports.default = AlertdialogBox;

package/dist/Pages/button.d.ts

@@ -1,3 +0,0 @@
-declare const ButtonPage: () => import("react/jsx-runtime").JSX.Element;
-export default ButtonPage;
-//# sourceMappingURL=button.d.ts.map

package/dist/Pages/button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/Pages/button.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,UAAU,+CA+Cf,CAAC;AAEF,eAAe,UAAU,CAAC"}