ikoncomponents 1.5.5 → 1.5.7

package/dist/ikoncomponents/main-layout/SidebarNavContext.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+const SidebarNavContext = createContext(undefined);
+export function SidebarNavProvider({ children }) {
+    const [navItems, setNavItems] = useState([]);
+    const [header, setHeader] = useState(null);
+    const [footer, setFooter] = useState(null);
+    const addNavItem = (item) => {
+        setNavItems((prevItems) => {
+            const exists = prevItems.some((navItem) => navItem.title === item.title);
+            if (exists) {
+                return prevItems.map((navItem) => navItem.title === item.title ? Object.assign(Object.assign({}, navItem), item) : navItem);
+            }
+            return [...prevItems, item];
+        });
+    };
+    const removeNavItem = (title) => {
+        setNavItems((prevItems) => prevItems.filter((item) => item.title !== title));
+    };
+    const updateNavItem = (title, updates) => {
+        setNavItems((prevItems) => prevItems.map((item) => item.title === title ? Object.assign(Object.assign({}, item), updates) : item));
+    };
+    const setSidebarHeader = (header) => {
+        setHeader(header);
+    };
+    const setSidebarFooter = (footer) => {
+        setFooter(footer);
+    };
+    const clearNavItems = () => {
+        setNavItems([]);
+    };
+    return (_jsx(SidebarNavContext.Provider, { value: {
+            navItems,
+            header,
+            footer,
+            setNavItems,
+            addNavItem,
+            removeNavItem,
+            updateNavItem,
+            clearNavItems,
+            setSidebarHeader,
+            setSidebarFooter,
+        }, children: children }));
+}
+export function useSidebarNav() {
+    const context = useContext(SidebarNavContext);
+    if (!context) {
+        throw new Error('useSidebarNav must be used within a SidebarNavProvider');
+    }
+    return context;
+}

package/dist/ikoncomponents/main-layout/app-sidebar.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { Sidebar } from "../../shadcn/sidebar";
+export declare function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>): import("react/jsx-runtime").JSX.Element | null;

package/dist/ikoncomponents/main-layout/app-sidebar.js

@@ -0,0 +1,24 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail, } from "../../shadcn/sidebar";
+import { NavMain } from "./nav-main";
+import { useSidebarNav } from "./SidebarNavContext";
+export function AppSidebar(_a) {
+    var props = __rest(_a, []);
+    const { navItems, header, footer } = useSidebarNav();
+    if (!navItems || navItems.length === 0) {
+        return null;
+    }
+    return (_jsxs(Sidebar, Object.assign({ className: "ml-12", collapsible: "offcanvas" }, props, { children: [header && _jsx(SidebarHeader, { children: header }), _jsx(SidebarContent, { children: _jsx(NavMain, {}) }), footer && _jsx(SidebarFooter, { children: footer }), _jsx(SidebarRail, {})] })));
+}

package/dist/ikoncomponents/main-layout/footer.d.ts

@@ -0,0 +1 @@
+export declare function Footer(): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/main-layout/footer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Copyright } from "lucide-react";
+export function Footer() {
+    return (_jsx("footer", { className: "ml-12 flex border-t px-4 py-2 justify-center lg:justify-start", children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx(Copyright, { className: "size-4" }), _jsx("span", { children: "Powered By" }), _jsx("a", { href: "https://keross.com", target: "_blank", children: "Keross" }), _jsx("span", { className: "", children: "|" }), _jsx("span", { id: "txtCopyrightYear", className: "", children: new Date().getFullYear() })] }) }));
+}

package/dist/ikoncomponents/main-layout/header.d.ts

@@ -0,0 +1,3 @@
+export declare function Header({ platformUrl }: {
+    platformUrl: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/main-layout/header.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppBreadcrumb } from "../app-breadcrumb";
+import { ThemeToggleBtn } from "../theme-toggle-btn";
+import { Separator } from "../../shadcn/separator";
+import { SidebarTrigger } from "../../shadcn/sidebar";
+import { Bell, Play } from "lucide-react";
+import { IconButtonWithTooltip, IconTextButton } from "../buttons";
+import { useSidebarNav } from "./SidebarNavContext";
+import Link from "next/link";
+export function Header({ platformUrl }) {
+    const { navItems } = useSidebarNav();
+    return (_jsx("header", { className: "ml-12 flex h-12 border-b shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: _jsxs("div", { className: "flex items-center justify-between gap-2 px-4 w-full", children: [_jsxs("div", { className: "flex items-center gap-2", children: [(!navItems || navItems.length === 0) ? _jsx("div", {}) : _jsx(SidebarTrigger, { className: "-ml-1" }), (!navItems || navItems.length === 0) ?
+                            _jsx("div", {}) :
+                            _jsx(Separator, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }), _jsx(AppBreadcrumb, {})] }), _jsxs("div", { className: "ml-auto flex gap-4", children: [_jsx(IconButtonWithTooltip, { className: "px-2!", tooltipContent: "Notifications", children: _jsx(Bell, {}) }), _jsx(ThemeToggleBtn, {}), _jsx(Link, { href: `${platformUrl}/app-store`, children: _jsxs(IconTextButton, { variant: "default", children: [_jsx(Play, {}), "App Store"] }) })] })] }) }));
+}

package/dist/ikoncomponents/main-layout/index.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare function MainLayout({ children, baseUrl, platformUrl }: {
+    children: ReactNode;
+    baseUrl: string;
+    platformUrl: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/main-layout/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MainSidebar } from './main-sidebar';
+import { SidebarInset, SidebarProvider } from '../../shadcn/sidebar';
+import { DialogProvider } from '../alert-dialog/dialog-context';
+import { AppSidebar } from './app-sidebar';
+import { Header } from './header';
+import { Footer } from './footer';
+import { SidebarNavProvider } from './SidebarNavContext';
+export function MainLayout({ children, baseUrl, platformUrl }) {
+    return (_jsxs(_Fragment, { children: [_jsx(MainSidebar, { baseUrl: baseUrl, platformUrl: platformUrl }), _jsx(SidebarProvider, { children: _jsx(DialogProvider, { children: _jsxs(SidebarNavProvider, { children: [_jsx(AppSidebar, {}), _jsxs(SidebarInset, { className: "flex flex-col h-screen", children: [_jsx(Header, { platformUrl: platformUrl }), _jsx("div", { className: "flex flex-col gap-4 p-4 pt-0 ml-12 grow overflow-auto scrollbar-hidden", children: children }), _jsx(Footer, {})] })] }) }) })] }));
+}

package/dist/ikoncomponents/main-layout/main-sidebar.d.ts

@@ -0,0 +1,60 @@
+export interface AccountMembership {
+    accountId: string;
+    accountName: string;
+    primaryAccount?: boolean;
+}
+export interface Account {
+    accountId: string;
+    accountName: string;
+    accountConfiguration: any | null;
+    accountDeleted: boolean;
+    active: boolean;
+    createdBy: string;
+    createdOn: string;
+    updatedBy: string;
+    updatedOn: string;
+}
+export interface Software {
+    softwareId: string;
+    softwareName: string;
+    url: string;
+    icon: string;
+    visible: boolean;
+    defaultSoftware: boolean;
+    order: number;
+}
+export interface User {
+    userId: string;
+    userName: string;
+    userLogin: string;
+    userPhone: string;
+    userEmail: string;
+    userType: string;
+    active: boolean;
+    dateOfBirth: string;
+    userProfileImage: string;
+    userDescription: string;
+    userDesignation: string;
+    userDeleted: boolean;
+}
+export interface DecodedAccessToken {
+    iss: string;
+    jti: string;
+    aud: string;
+    sub: string;
+    typ: string;
+    sid: string;
+    platformAccess: {
+        roles: string[];
+    };
+    primaryAccountId: string;
+    activeAccountId: string;
+    userType: string;
+    scope: string;
+    iat: number;
+    exp: number;
+}
+export declare const MainSidebar: ({ baseUrl, platformUrl, }: {
+    baseUrl: string;
+    platformUrl: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/main-layout/main-sidebar.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, CircleUserRound, FolderCode, Home, LogOut, Settings, } from "lucide-react";
+import { Button } from "../../shadcn/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../../shadcn/tooltip";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../shadcn/dropdown-menu";
+import { getValidAccessToken } from "../../utils/token-management";
+import { clearAllCookieSession, setCookieSession } from "../../utils/session/cookieSession";
+import axios from "axios";
+import { redirect } from "next/navigation";
+import Link from "next/link";
+import { jwtDecode } from "jwt-decode";
+import { Icon } from "../icon";
+import { useRefresh } from "./RefreshContext";
+export const MainSidebar = ({ baseUrl, platformUrl, }) => {
+    const [user, setUser] = React.useState();
+    const [accounts, setAccounts] = React.useState([]);
+    const [selectedAccount, setSelectedAccount] = React.useState();
+    const [softwares, setSoftwares] = React.useState([]);
+    const { refreshCounter } = useRefresh();
+    const getInitials = (name) => {
+        return name
+            .split(" ")
+            .map((word) => word[0])
+            .join("")
+            .toUpperCase()
+            .slice(0, 2);
+    };
+    function toPascalCase(icon) {
+        return icon
+            .split("-")
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join("");
+    }
+    // Fetch all data
+    React.useEffect(() => {
+        const fetchAllData = async () => {
+            try {
+                const accessToken = await getValidAccessToken(baseUrl, {
+                    platformUrl,
+                    isSetToken: true,
+                });
+                const decoded = jwtDecode(accessToken !== null && accessToken !== void 0 ? accessToken : "");
+                // Fetch all data in parallel
+                const [userResponse, accountsResponse, softwaresResponse] = await Promise.all([
+                    axios.get(`${baseUrl}/platform/user/${decoded.sub}`, {
+                        headers: { Authorization: `Bearer ${accessToken}` },
+                    }),
+                    axios.get(`${baseUrl}/platform/user/account-membership`, {
+                        headers: { Authorization: `Bearer ${accessToken}` },
+                    }),
+                    axios.get(`${baseUrl}/platform/software/accessible/user`, {
+                        headers: { Authorization: `Bearer ${accessToken}` },
+                    }),
+                ]);
+                setUser(userResponse.data);
+                setAccounts(accountsResponse.data);
+                // const primaryAccount = accountsResponse.data.find(
+                //   (account) => account.primaryAccount === true
+                // );
+                // if (primaryAccount) {
+                //   setSelectedAccount(primaryAccount);
+                // }
+                const activeAccount = accountsResponse.data.find((account) => account.accountId === decoded.activeAccountId);
+                setSelectedAccount(activeAccount);
+                const visibleSoftwares = softwaresResponse.data.filter((item) => item.visible);
+                setSoftwares(visibleSoftwares);
+            }
+            catch (error) {
+                console.error("Failed to fetch data:", error);
+            }
+        };
+        fetchAllData();
+    }, [baseUrl, platformUrl, refreshCounter]);
+    const switchAccount = async (accountId, baseUrl) => {
+        try {
+            const accessToken = await getValidAccessToken(baseUrl, {
+                platformUrl: platformUrl,
+                isSetToken: true,
+            });
+            const response = await axios.post(`${baseUrl}/platform/auth/switch-account`, {
+                targetAccountId: accountId,
+            }, {
+                headers: {
+                    Authorization: `Bearer ${accessToken}`,
+                },
+                withCredentials: true,
+            });
+            console.log(response);
+            await setCookieSession("accessToken", response.data.accessToken);
+            await setCookieSession("refreshToken", response.data.refreshToken);
+        }
+        catch (error) {
+            console.error(error);
+            throw error;
+        }
+    };
+    return (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs("aside", { className: "fixed left-0 top-0 z-20 h-screen w-12 border-r border-border bg-sidebar text-sidebar-foreground flex flex-col items-center py-4 ", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "default", className: "mb-4 h-8 w-8 rounded-lg p-0", disabled: !selectedAccount, children: _jsx("span", { className: "text-base font-medium text-accent-foreground", children: selectedAccount
+                                        ? getInitials(selectedAccount.accountName)
+                                        : "..." }) }) }), _jsxs(DropdownMenuContent, { className: "w-55", side: "right", sideOffset: 8, align: "start", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-foreground", children: "Accounts" }), accounts.map((account) => (_jsxs(DropdownMenuItem, { className: "flex items-center justify-between cursor-pointer", onClick: async () => {
+                                        try {
+                                            setSelectedAccount(account);
+                                            console.log(account.accountId);
+                                            await switchAccount(account.accountId, baseUrl);
+                                            window.location.reload();
+                                        }
+                                        catch (error) {
+                                            console.error("Switch account failed", error);
+                                        }
+                                    }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-6 w-6 rounded bg-primary/10 flex items-center justify-center", children: _jsx("span", { className: "text-xs font-medium text-primary", children: getInitials(account.accountName) }) }), _jsx("span", { className: "text-sm", children: account.accountName })] }), (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.accountId) === account.accountId && (_jsx(Check, { className: "h-4 w-4 text-primary" }))] }, account.accountId)))] })] }), _jsx("nav", { className: "flex flex-col gap-1", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: "h-8 w-8", children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10", asChild: true, children: _jsxs(Link, { href: `${platformUrl}/home`, children: [_jsx(Home, { className: "h-8 w-8" }), _jsx("span", { className: "sr-only", children: "Home" })] }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Home" })] }, "home") }), _jsx("nav", { className: "flex flex-col gap-1 flex-1", children: softwares.map((software) => {
+                        var _a, _b;
+                        const hasIcon = Boolean(software.icon && software.icon.trim() !== "");
+                        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: "h-8 w-8", children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10", asChild: true, children: _jsxs(Link, { href: (_a = software.url) !== null && _a !== void 0 ? _a : "#", children: [hasIcon ? (_jsx(Icon, { name: toPascalCase((_b = software.icon) !== null && _b !== void 0 ? _b : ""), className: "h-8 w-8" })) : (_jsx(FolderCode, { className: "h-8 w-8" })), _jsx("span", { className: "sr-only", children: software.softwareName })] }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 5, children: software.softwareName })] }, software.softwareName));
+                    }) }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: "h-8 w-8", children: _jsx(Button, { variant: "ghost", className: "h-10 w-10", asChild: true, children: _jsxs(Link, { href: `${platformUrl}/settings`, children: [_jsx(Settings, { className: "h-8 w-8" }), _jsx("span", { className: "sr-only", children: "Settings" })] }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Settings" })] }, "settings"), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10", children: _jsx(CircleUserRound, { className: "h-8 w-8" }) }) }), _jsxs(DropdownMenuContent, { className: "w-55 p-0", side: "right", sideOffset: 8, children: [_jsxs("div", { className: "flex items-start gap-3 p-4 bg-card", children: [_jsx(CircleUserRound, { className: "h-8 w-8" }), _jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-bold text-foreground blue-dark:text-muted-foreground truncate", children: user === null || user === void 0 ? void 0 : user.userName }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: user === null || user === void 0 ? void 0 : user.userEmail }), _jsx("p", { className: "text-sm text-muted-foreground font-semibold", children: selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.accountName })] })] }), _jsx(DropdownMenuSeparator, { className: "my-0" }), _jsxs(DropdownMenuItem, { onClick: async () => {
+                                        await clearAllCookieSession();
+                                        redirect(`${platformUrl}/login.html`);
+                                    }, className: "flex items-center gap-2 px-4 py-3 cursor-pointer focus:bg-destructive dark:focus:bg-destructive blue-dark:focus:bg-destructive", children: [_jsx(LogOut, { className: "h-4 w-4 text-foreground" }), _jsx("span", { children: "Log out" })] })] })] })] }) }));
+};

package/dist/ikoncomponents/main-layout/nav-main.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { SidebarNavItem } from "./SidebarNavContext";
+export declare function NavMain(): import("react/jsx-runtime").JSX.Element;
+export declare function RenderSidebarNav({ items, sidebarHeader, sidebarFooter }: {
+    items: SidebarNavItem[];
+    sidebarHeader?: ReactNode;
+    sidebarFooter?: ReactNode;
+}): null;
+export declare function AddSidebarNav({ item }: {
+    item: SidebarNavItem;
+}): null;

package/dist/ikoncomponents/main-layout/nav-main.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, } from "react";
+import { ChevronRight } from "lucide-react";
+import { SidebarGroup, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from "../../shadcn/sidebar";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../shadcn/collapsible";
+import Link from "next/link";
+import { useSidebarNav } from "./SidebarNavContext";
+export function NavMain() {
+    const { navItems } = useSidebarNav();
+    // if (!navItems || navItems.length === 0) {
+    //   return null;
+    // }
+    return (_jsx(SidebarGroup, { children: _jsx(SidebarMenu, { children: navItems.map((item) => item.items && item.items.length > 0 ? (_jsx(Collapsible, { asChild: true, defaultOpen: item.isActive, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { tooltip: item.title, children: [item.icon && _jsx(item.icon, {}), _jsx("span", { children: item.title }), _jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: item.items.map((subItem) => (_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { asChild: true, children: _jsx(Link, { href: subItem.url, children: _jsx("span", { children: subItem.title }) }) }) }, subItem.title))) }) })] }) }, item.title)) : (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, children: _jsxs(Link, { href: item.url, className: "flex items-center gap-2 w-full", children: [item.icon && _jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }) }, item.title))) }) }));
+}
+// Helper component to set nav items from pages
+export function RenderSidebarNav({ items, sidebarHeader, sidebarFooter }) {
+    const { setNavItems, setSidebarHeader, setSidebarFooter } = useSidebarNav();
+    useEffect(() => {
+        setNavItems(items);
+        setSidebarHeader(sidebarHeader);
+        setSidebarFooter(sidebarFooter);
+    }, [items, sidebarHeader, sidebarFooter, setNavItems, setSidebarHeader, setSidebarFooter]);
+    return null;
+}
+// Helper component to add a single nav item
+export function AddSidebarNav({ item }) {
+    const { addNavItem } = useSidebarNav();
+    useEffect(() => {
+        addNavItem(item);
+    }, [item, addNavItem]);
+    return null;
+}

package/dist/ikoncomponents/multi-combobox/index.d.ts

@@ -0,0 +1,13 @@
+interface MultiComboboxProps {
+    placeholder: string;
+    items: {
+        value: string;
+        label?: string;
+        disabled?: boolean | ((item: any) => boolean);
+    }[];
+    onValueChange: (selectedItems: string[]) => void;
+    defaultValue?: string[];
+    defaultOptions?: number;
+}
+export declare function MultiCombobox({ placeholder, items, onValueChange, defaultValue, defaultOptions }: MultiComboboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ikoncomponents/multi-combobox/index.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// import React, { useEffect, useState } from 'react'
+// import { Popover, PopoverContent, PopoverTrigger } from '@/shadcn/ui/popover'
+// import { Button } from '@/shadcn/ui/button'
+// import { cn } from '@/shadcn/lib/utils'
+// import { Check, ChevronsUpDown } from 'lucide-react'
+// import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/shadcn/ui/command'
+// interface MultiComboboxProps {
+//   placeholder: string;
+//   items: { value: string; label?: string }[];
+//   onValueChange: (selectedItems: string[]) => void;
+//   defaultValue?: string[];
+// }
+// export default function MultiCombobox({ placeholder, items, onValueChange, defaultValue }: MultiComboboxProps) {
+//   const [selectedItems, setSelectedItems] = useState<string[]>(defaultValue ? defaultValue : []);
+//   useEffect(() => {
+//     onValueChange(selectedItems)
+//   }, [selectedItems])
+//   return (
+//     <>
+//       <Popover>
+//         <PopoverTrigger asChild>
+//           <Button
+//             variant="outline"
+//             role="combobox"
+//             className={cn(
+//               "justify-between",
+//               selectedItems.length == 0 && "text-muted-foreground"
+//             )}
+//           >
+//             {selectedItems && selectedItems.length > 0 ? (
+//               <div className='flex gap-2 items-center'>
+//                 {
+//                   selectedItems.map((value: string) => (
+//                     <span
+//                       key={value}
+//                       className="px-2 py-1 bg-secondary text-secondary-foreground rounded-md"
+//                     >
+//                       {
+//                         (items.find(
+//                           (item) => item.value === value
+//                         )?.label || value)
+//                       }
+//                     </span>
+//                   ))
+//                 }
+//               </div>
+//             ) : placeholder}
+//             <ChevronsUpDown className="opacity-50" />
+//           </Button>
+//         </PopoverTrigger>
+//         <PopoverContent className="p-0" align='start'>
+//           <Command>
+//             <CommandInput
+//               placeholder="Search..."
+//             />
+//             <CommandList>
+//               <CommandEmpty>No items found.</CommandEmpty>
+//               <CommandGroup>
+//                 {
+//                   items.map((item) => {
+//                     const isSelected = selectedItems.includes(item.value);
+//                     return (
+//                       <CommandItem
+//                         value={item.value}
+//                         key={item.value}
+//                         onSelect={(value) => {
+//                           let updatedItems;
+//                           if (selectedItems.includes(value)) {
+//                             updatedItems = selectedItems.filter((val) => val !== value);
+//                           } else {
+//                             updatedItems = [...selectedItems, value];
+//                           }
+//                           setSelectedItems(updatedItems);
+//                         }}
+//                       >
+//                         {item?.label || item.value}
+//                         <Check
+//                           className={cn(
+//                             "ml-auto",
+//                             isSelected
+//                               ? "opacity-100"
+//                               : "opacity-0"
+//                           )}
+//                         />
+//                       </CommandItem>
+//                     )
+//                   })
+//                 }
+//               </CommandGroup>
+//             </CommandList>
+//           </Command>
+//         </PopoverContent>
+//       </Popover>
+//     </>
+//   )
+// }
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '../../shadcn/popover';
+import { Button } from '../../shadcn/button';
+import { cn } from '../../utils/cn';
+import { ChevronsUpDown, X } from 'lucide-react';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../../shadcn/command';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../shadcn/tooltip';
+import { Checkbox } from '../../shadcn/checkbox';
+export function MultiCombobox({ placeholder, items, onValueChange, defaultValue, defaultOptions = 2 }) {
+    const [selectedItems, setSelectedItems] = useState(defaultValue || []);
+    const [search, setSearch] = useState("");
+    const containerRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        onValueChange(selectedItems);
+    }, [selectedItems, onValueChange]);
+    const filteredItems = items
+        .filter((item) => (item.label || item.value).toLowerCase().includes(search.toLowerCase()))
+        .sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.label) !== null && _a !== void 0 ? _a : "").localeCompare((_b = b === null || b === void 0 ? void 0 : b.label) !== null && _b !== void 0 ? _b : ""); });
+    const onWheel = (e) => {
+        const el = e.currentTarget;
+        el.scrollTop += e.deltaY;
+        e.preventDefault();
+    };
+    const toggleItem = (value) => {
+        const updatedItems = selectedItems.includes(value)
+            ? selectedItems.filter((val) => val !== value)
+            : [...selectedItems, value];
+        setSelectedItems(updatedItems);
+    };
+    const [visibleCount, setVisibleCount] = useState(selectedItems.length);
+    const calculateVisibleItems = useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return visibleCount;
+        const children = Array.from(container.children);
+        let availableWidth = container.offsetWidth;
+        let usedWidth = 0;
+        let fitCount = 0;
+        for (const child of children) {
+            const childWidth = child.offsetWidth + 4; // Account for gap
+            if (usedWidth + childWidth <= availableWidth) {
+                usedWidth += childWidth;
+                fitCount++;
+            }
+            else {
+                break;
+            }
+        }
+        return fitCount;
+    }, [visibleCount]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        let animationFrameId = null;
+        const resizeObserver = new ResizeObserver(() => {
+            if (animationFrameId)
+                cancelAnimationFrame(animationFrameId);
+            animationFrameId = requestAnimationFrame(() => {
+                const newVisibleCount = calculateVisibleItems();
+                setVisibleCount((prevVisibleCount) => prevVisibleCount !== newVisibleCount ? newVisibleCount : prevVisibleCount);
+            });
+        });
+        resizeObserver.observe(container);
+        setVisibleCount(calculateVisibleItems());
+        return () => {
+            if (animationFrameId)
+                cancelAnimationFrame(animationFrameId);
+            resizeObserver.disconnect();
+        };
+    }, [calculateVisibleItems]);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, className: "w-full", children: _jsxs(Button, { variant: "outline", role: "combobox", className: cn("justify-between px-3 py-2 h-10", selectedItems.length === 0 && "text-foreground/50", "bg-secondary"), onClick: () => setOpen((prev) => !prev), children: [selectedItems.length > 0 ? (_jsx(TooltipProvider, { children: _jsxs("div", { ref: containerRef, className: "flex flex-wrap gap-2 items-center overflow-hidden flex-1", children: [selectedItems.slice(0, defaultOptions).map((value) => {
+                                        var _a;
+                                        const label = ((_a = items.find((item) => item.value === value)) === null || _a === void 0 ? void 0 : _a.label) || value;
+                                        return (_jsxs("span", { className: "flex items-center px-2 py-1 bg-secondary text-secondary-foreground rounded-md truncate max-w-full", title: label, children: [_jsx("span", { className: "truncate max-w-[120px]", children: label }), _jsx("span", { role: "button", tabIndex: 0, onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        toggleItem(value);
+                                                    }, onKeyDown: (e) => {
+                                                        if (e.key === 'Enter' || e.key === ' ') {
+                                                            e.preventDefault();
+                                                            e.stopPropagation();
+                                                            toggleItem(value);
+                                                        }
+                                                    }, className: "ml-1 text-muted-foreground hover:text-destructive cursor-pointer outline-none", children: _jsx(X, { className: "w-3 h-3 ml-1" }) })] }, value));
+                                    }), selectedItems.length > defaultOptions && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { className: "px-2 py-1 bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground keross:bg-secondary keross:text-secondary-foreground rounded-md cursor-pointer", children: ["+", selectedItems.length - defaultOptions, " more"] }) }), _jsx(TooltipContent, { className: "max-w-xs break-words", children: _jsx("div", { onWheel: onWheel, className: "flex flex-col gap-1 max-h-[200px] overflow-auto", children: selectedItems.slice(defaultOptions).map((value) => {
+                                                        var _a;
+                                                        return (_jsx("span", { className: "text-sm", children: ((_a = items.find((item) => item.value === value)) === null || _a === void 0 ? void 0 : _a.label) || value }, value));
+                                                    }) }) })] }))] }) })) : (_jsx("span", { className: "flex-1 text-left truncate", children: placeholder })), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "p-0 min-w-[var(--radix-popover-trigger-width)]", style: { width: 'max-content', maxWidth: 'min(500px, 90vw)' }, align: "start", children: _jsxs(Command, { onMouseDown: (e) => e.preventDefault(), children: [_jsx(CommandInput, { placeholder: "Search...", value: search, onValueChange: setSearch }), _jsxs(CommandList, { onWheel: onWheel, className: "max-h-60 overflow-auto", children: [_jsx(CommandEmpty, { children: "No items found." }), _jsx(CommandGroup, { children: filteredItems.map((item) => {
+                                        const isSelected = selectedItems.includes(item.value);
+                                        const isDisabled = item.disabled === true || (typeof item.disabled === "function" && item.disabled(item));
+                                        return (_jsxs(CommandItem, { value: item.label || item.value, disabled: isDisabled, onPointerDown: (e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                            }, onSelect: () => {
+                                                if (!isDisabled) {
+                                                    toggleItem(item.value);
+                                                }
+                                            }, className: cn("flex items-center justify-between space-x-2", isDisabled && "opacity-50 cursor-not-allowed"), children: [_jsx(Checkbox, { checked: isSelected, onCheckedChange: () => {
+                                                        if (!isDisabled) {
+                                                            toggleItem(item.value);
+                                                        }
+                                                    }, onClick: (e) => e.stopPropagation(), disabled: isDisabled }), _jsx("span", { className: "flex-grow text-left", children: (item === null || item === void 0 ? void 0 : item.label) || item.value })] }, item.value));
+                                    }) })] })] }) })] }));
+}

package/dist/ikoncomponents/no-data/index.d.ts

@@ -0,0 +1,3 @@
+export declare function NoDataComponent({ text }: {
+    text?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/no-data/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert } from "lucide-react";
+export function NoDataComponent({ text }) {
+    return (_jsxs("div", { className: "flex flex-col h-full justify-center text-center gap-2", children: [_jsx(CircleAlert, { className: "text-muted-foreground mx-auto", size: 36 }), _jsx("p", { className: "text-muted-foreground", children: text ? text : "No Data Available" })] }));
+}

package/dist/ikoncomponents/page-wrapper/index.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+interface Props {
+    title?: string | ReactNode;
+    subtitle?: string | ReactNode;
+    tools?: ReactNode;
+    children: ReactNode;
+}
+export declare function PageWrapper({ title, subtitle, tools, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ikoncomponents/page-wrapper/index.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PageWrapper({ title, subtitle, tools, children }) {
+    title = title !== null && title !== void 0 ? title : '';
+    subtitle = subtitle !== null && subtitle !== void 0 ? subtitle : '';
+    return (_jsxs("div", { className: "flex flex-col gap-4 h-full", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: 'grid grid-cols-1 gap-1', children: [title && _jsx("h1", { className: 'text-2xl font-semibold', children: title }), subtitle && _jsx("p", { className: 'text-muted-foreground/60', children: subtitle })] }), _jsx("div", { children: tools })] }), children] }));
+}

package/dist/ikoncomponents/password-strength-meter/index.d.ts

@@ -0,0 +1,3 @@
+export declare const PasswordStrengthMeter: ({ value }: {
+    value: string;
+}) => import("react/jsx-runtime").JSX.Element;