ikoncomponents 1.5.7 → 1.5.8

package/templates/default/ikoncomponents/skeleton-loader/skeleton-widget.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from "../../shadcn/skeleton";
+
+export function SkeletonWidget({ count }: { count: number }) {
+    return (
+        <div className='flex flex-row gap-3 w-full'>
+            {count > 0 && Array.from({ length: count }).map((_, index) => (
+                <Skeleton key={'widget_' + index} className={"w-1/" + count + " flex flex-col md:flex-row gap-2 h-20"}>
+                    <div className="flex flex-1 flex-row justify-between border rounded-md p-2 bg-card-new"></div>
+                </Skeleton>
+            ))}
+        </div>
+    );
+}

package/templates/default/ikoncomponents/tabs/index.tsx

@@ -0,0 +1,139 @@
+"use client";
+import { TabArray, TabProps } from "./type";
+import {
+  Tabs as TabsComp,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../shadcn/tabs";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../shadcn/dropdown-menu";
+import { Ellipsis, EllipsisVertical } from "lucide-react";
+import { TextButton } from "../buttons";
+import { Card } from "../../shadcn/card";
+import React, { useEffect, useState } from "react";
+import { useIsMobile } from "../../hooks/use-mobile";
+
+
+export function CustomTabs({
+  children,
+  tabArray,
+  pathName,
+  tabListClass = "",
+  tabListInnerClass = "",
+  tabListButtonClass = "",
+  tabContentClass = "",
+  headerEndComponent,
+  onTabChange,
+  isSeperatePage = false,
+}: TabProps) {
+  // const pathName = usePathname();
+  const [itemToDisplay, setItemToDisplay] = useState<number>(5);
+  const isMobile = useIsMobile();
+  const [visibleTabs, setVisibleTabs] = useState<TabArray[]>([]);
+  const [groupedTabs, setGroupedTabs] = useState<TabArray[]>([]);
+  const [activeTab, setActiveTab] = useState<string>(
+    tabArray.find((tab) => tab.default)?.tabId || tabArray[0]?.tabId || ""
+  );
+
+  useEffect(() => {
+    setItemToDisplay(isMobile ? 2 : 5);
+  }, [isMobile]);
+
+  useEffect(() => {
+    if (pathName && isSeperatePage) {
+      const lastPath = pathName.split("/").pop() || "";
+      setActiveTab(lastPath);
+    }
+  }, [pathName, isSeperatePage]);
+
+  useEffect(() => {
+    setVisibleTabs(tabArray.slice(0, itemToDisplay));
+    setGroupedTabs(tabArray.slice(itemToDisplay));
+  }, [tabArray, itemToDisplay]);
+
+  const handleTabChange = (tabId: string) => {
+    setActiveTab(tabId);
+    onTabChange?.(tabId);
+  };
+
+  const handleGroupedTabSelect = (tab: TabArray) => {
+    setVisibleTabs((prev) => {
+      const updatedTabs = [...prev];
+      const replacedTab = updatedTabs.pop();
+      if (replacedTab) {
+        setGroupedTabs((prevGrouped) => [
+          ...prevGrouped.filter((t) => t.tabId !== tab.tabId),
+          replacedTab,
+        ]);
+      }
+      return [...updatedTabs, tab];
+    });
+    handleTabChange(tab.tabId);
+  };
+
+  return (
+    <TabsComp
+      value={activeTab}
+      onValueChange={handleTabChange}
+      className="w-full h-full flex flex-col"
+    >
+      <TabsList className={`flex justify-between items-center ${tabListClass}`}>
+        <div className={`flex w-full ${tabListInnerClass}`}>
+          {visibleTabs.map((tab) => (
+            <TabsTrigger
+              key={tab.tabId}
+              value={tab.tabId}
+              className={tabListButtonClass}
+            >
+              {tab.tabName}
+            </TabsTrigger>
+          ))}
+          {groupedTabs.length > 0 && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <TextButton variant="outline" size='smIcon' className="mt-1">
+                  <EllipsisVertical />
+                </TextButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                {groupedTabs.map((tab) => (
+                  <DropdownMenuItem
+                    key={tab.tabId}
+                    onClick={() => handleGroupedTabSelect(tab)}
+                  >
+                    {tab.tabName}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+        {headerEndComponent && <div>{headerEndComponent}</div>}
+      </TabsList>
+      {children ? (
+        <TabsContent
+          value={activeTab}
+          className={`mt-3 flex-grow overflow-auto h-full w-full ${tabContentClass}`}
+        >
+          <Card className="h-full w-full p-3">{children}</Card>
+        </TabsContent>
+      ) : (
+        tabArray.map((tab) => (
+          <TabsContent
+            value={tab.tabId}
+            key={tab.tabId}
+            className={`mt-3 flex-grow overflow-auto h-full w-full ${tabContentClass}`}
+          >
+
+            <Card className="h-full w-full p-3">{tab?.tabContent}</Card>
+          </TabsContent>
+        ))
+      )}
+    </TabsComp>
+  );
+}

package/{dist/ikoncomponents/tabs/type.d.ts → templates/default/ikoncomponents/tabs/type.ts}

@@ -1,19 +1,20 @@
-export interface TabArray {
-    tabName: string;
-    tabId: string;
-    default: boolean;
-    tabContent?: React.ReactNode;
-    url?: string;
-}
-export interface TabProps {
-    children?: React.ReactNode;
-    tabArray: TabArray[];
-    tabListClass?: string;
-    tabListInnerClass?: string;
-    tabListButtonClass?: string;
-    tabContentClass?: string;
-    pathName?: string;
-    headerEndComponent?: React.ReactNode;
-    onTabChange?: (tabId: string) => void;
-    isSeperatePage?: boolean;
-}
+export interface TabArray {
+    tabName: string;
+    tabId: string;
+    default: boolean;
+    tabContent?: React.ReactNode;
+    url?: string;
+};
+
+export interface TabProps {
+    children?: React.ReactNode;
+    tabArray: TabArray[];
+    tabListClass?: string;
+    tabListInnerClass?: string;
+    tabListButtonClass?: string;
+    tabContentClass?: string;
+    pathName?: string;
+    headerEndComponent?: React.ReactNode;
+    onTabChange?: (tabId: string) => void;
+    isSeperatePage?: boolean;
+}

package/{dist/ikoncomponents/theme-toggle-btn/index.js → templates/default/ikoncomponents/theme-toggle-btn/index.tsx}

@@ -1,118 +1,189 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from "next-themes";
-import { useEffect, useState, useCallback } from "react";
-import { Laptop, Moon, Sun, Check, Waves } from "lucide-react";
-import { Button } from "../../shadcn/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../../shadcn/dropdown-menu";
-export function ThemeToggleBtn() {
-    const { setTheme, theme, resolvedTheme } = useTheme();
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-    const activeTheme = theme === "system" ? resolvedTheme : theme;
-    const getLuminance = (hexColor) => {
-        const rgb = parseInt(hexColor.slice(1), 16);
-        const r = (rgb >> 16) & 0xff;
-        const g = (rgb >> 8) & 0xff;
-        const b = (rgb >> 0) & 0xff;
-        const [rs, gs, bs] = [r, g, b].map(c => {
-            c = c / 255;
-            return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-        });
-        return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
-    };
-    const getContrastColor = (bgColor) => {
-        const luminance = getLuminance(bgColor);
-        return luminance > 0.25 ? '#000000' : '#ffffff';
-    };
-    const applySavedColors = useCallback(() => {
-        const primaryColor = localStorage.getItem("primary") || '#0f172b';
-        const secondaryColor = localStorage.getItem("secondary") || '#1b2336';
-        const tertiaryColor = localStorage.getItem("tertiary") || '#1f3aba';
-        const pChartColor = localStorage.getItem("primaryChart") || '#00bc7d';
-        const sChartColor = localStorage.getItem("secondaryChart") || '#fd9a00';
-        const tChartColor = localStorage.getItem("tertiaryChart") || '#ad46ff';
-        document.documentElement.style.setProperty('--background', primaryColor);
-        document.documentElement.style.setProperty('--secondary', secondaryColor);
-        document.documentElement.style.setProperty('--card', secondaryColor);
-        document.documentElement.style.setProperty('--popover', secondaryColor);
-        document.documentElement.style.setProperty('--muted', secondaryColor);
-        document.documentElement.style.setProperty('--sidebar', secondaryColor);
-        document.documentElement.style.setProperty('--btn-secondary', secondaryColor);
-        document.documentElement.style.setProperty('--accent', tertiaryColor);
-        document.documentElement.style.setProperty('--sidebar-primary', tertiaryColor);
-        document.documentElement.style.setProperty('--sidebar-accent', tertiaryColor);
-        document.documentElement.style.setProperty('--foreground', getContrastColor(primaryColor));
-        document.documentElement.style.setProperty('--secondary-foreground', getContrastColor(secondaryColor));
-        document.documentElement.style.setProperty('--card-foreground', getContrastColor(secondaryColor));
-        document.documentElement.style.setProperty('--popover-foreground', getContrastColor(secondaryColor));
-        document.documentElement.style.setProperty('--muted-foreground', getContrastColor(secondaryColor));
-        document.documentElement.style.setProperty('--sidebar-foreground', getContrastColor(secondaryColor));
-        document.documentElement.style.setProperty('--accent-foreground', getContrastColor(tertiaryColor));
-        document.documentElement.style.setProperty('--sidebar-primary-foreground', getContrastColor(tertiaryColor));
-        document.documentElement.style.setProperty('--sidebar-accent-foreground', getContrastColor(tertiaryColor));
-        document.documentElement.style.setProperty('--chart-1', pChartColor);
-        document.documentElement.style.setProperty('--chart-2', sChartColor);
-        document.documentElement.style.setProperty('--chart-3', tChartColor);
-        document.documentElement.style.setProperty('--chart-4', pChartColor);
-        document.documentElement.style.setProperty('--chart-5', sChartColor);
-    }, []);
-    const resetColors = useCallback(() => {
-        document.documentElement.style.removeProperty('--background');
-        document.documentElement.style.removeProperty('--secondary');
-        document.documentElement.style.removeProperty('--card');
-        document.documentElement.style.removeProperty('--popover');
-        document.documentElement.style.removeProperty('--muted');
-        document.documentElement.style.removeProperty('--sidebar');
-        document.documentElement.style.removeProperty('--btn-secondary');
-        document.documentElement.style.removeProperty('--accent');
-        document.documentElement.style.removeProperty('--sidebar-primary');
-        document.documentElement.style.removeProperty('--sidebar-accent');
-        document.documentElement.style.removeProperty('--foreground');
-        document.documentElement.style.removeProperty('--secondary-foreground');
-        document.documentElement.style.removeProperty('--card-foreground');
-        document.documentElement.style.removeProperty('--popover-foreground');
-        document.documentElement.style.removeProperty('--muted-foreground');
-        document.documentElement.style.removeProperty('--sidebar-foreground');
-        document.documentElement.style.removeProperty('--accent-foreground');
-        document.documentElement.style.removeProperty('--sidebar-primary-foreground');
-        document.documentElement.style.removeProperty('--sidebar-accent-foreground');
-        document.documentElement.style.removeProperty('--chart-1');
-        document.documentElement.style.removeProperty('--chart-2');
-        document.documentElement.style.removeProperty('--chart-3');
-        document.documentElement.style.removeProperty('--chart-4');
-        document.documentElement.style.removeProperty('--chart-5');
-    }, []);
-    useEffect(() => {
-        if (mounted && activeTheme === "blue-dark") {
-            document.documentElement.classList.add("blue-dark");
-            applySavedColors();
-        }
-    }, [mounted, activeTheme, applySavedColors]);
-    const setThemeSafe = useCallback((value) => {
-        setTheme(value);
-        if (value === "light" || value === "dark") {
-            document.documentElement.classList.remove("blue-dark");
-            resetColors();
-        }
-        if (value === "blue-dark") {
-            document.documentElement.classList.add("blue-dark");
-            applySavedColors();
-        }
-    }, [setTheme, applySavedColors, resetColors]);
-    if (!mounted)
-        return null;
-    const triggerIcon = (() => {
-        if (activeTheme === "blue-dark")
-            return _jsx(Waves, { className: "h-5 w-5" });
-        if (activeTheme === "dark")
-            return _jsx(Moon, { className: "h-5 w-5" });
-        if (activeTheme === "light")
-            return _jsx(Sun, { className: "h-5 w-5" });
-        return _jsx(Laptop, { className: "h-5 w-5" });
-    })();
-    const isActive = (value) => activeTheme === value;
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Change theme", title: `Theme: ${theme === "system" ? `system (${resolvedTheme})` : theme}`, children: triggerIcon }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 8, children: [_jsxs(DropdownMenuItem, { onClick: () => setThemeSafe("light"), className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Sun, { className: "mr-2 h-4 w-4" }), " Light"] }), isActive("light") && _jsx(Check, { className: "h-4 w-4" })] }), _jsxs(DropdownMenuItem, { onClick: () => setThemeSafe("dark"), className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Moon, { className: "mr-2 h-4 w-4" }), " Dark"] }), isActive("dark") && _jsx(Check, { className: "h-4 w-4" })] }), _jsxs(DropdownMenuItem, { onClick: () => setThemeSafe("blue-dark"), className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Waves, { className: "mr-2 h-4 w-4" }), " Custom"] }), isActive("blue-dark") && _jsx(Check, { className: "h-4 w-4" })] })] })] }));
-}
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState, useCallback } from "react";
+
+import { Laptop, Moon, Sun, Check, Waves } from "lucide-react";
+import { Button } from "../../shadcn/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "../../shadcn/dropdown-menu";
+
+export function ThemeToggleBtn() {
+    const { setTheme, theme, resolvedTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    const activeTheme = theme === "system" ? resolvedTheme : theme;
+
+    const getLuminance = (hexColor: string): number => {
+        const rgb = parseInt(hexColor.slice(1), 16);
+        const r = (rgb >> 16) & 0xff;
+        const g = (rgb >> 8) & 0xff;
+        const b = (rgb >> 0) & 0xff;
+
+        const [rs, gs, bs] = [r, g, b].map(c => {
+            c = c / 255;
+            return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+        });
+
+        return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+    };
+
+    const getContrastColor = (bgColor: string): string => {
+        const luminance = getLuminance(bgColor);
+        return luminance > 0.25 ? '#000000' : '#ffffff';
+    };
+
+    const applySavedColors = useCallback(() => {
+        const primaryColor = localStorage.getItem("primary") || '#0f172b';
+        const secondaryColor = localStorage.getItem("secondary") || '#1b2336';
+        const tertiaryColor = localStorage.getItem("tertiary") || '#1f3aba';
+
+        const pChartColor = localStorage.getItem("primaryChart") || '#00bc7d';
+        const sChartColor = localStorage.getItem("secondaryChart") || '#fd9a00';
+        const tChartColor = localStorage.getItem("tertiaryChart") || '#ad46ff';
+
+        document.documentElement.style.setProperty('--background', primaryColor);
+        document.documentElement.style.setProperty('--secondary', secondaryColor);
+        document.documentElement.style.setProperty('--card', secondaryColor);
+        document.documentElement.style.setProperty('--popover', secondaryColor);
+        document.documentElement.style.setProperty('--muted', secondaryColor);
+        document.documentElement.style.setProperty('--sidebar', secondaryColor);
+        document.documentElement.style.setProperty('--btn-secondary', secondaryColor);
+        document.documentElement.style.setProperty('--accent', tertiaryColor);
+        document.documentElement.style.setProperty('--sidebar-primary', tertiaryColor);
+        document.documentElement.style.setProperty('--sidebar-accent', tertiaryColor);
+
+        document.documentElement.style.setProperty('--foreground', getContrastColor(primaryColor));
+        document.documentElement.style.setProperty('--secondary-foreground', getContrastColor(secondaryColor));
+        document.documentElement.style.setProperty('--card-foreground', getContrastColor(secondaryColor));
+        document.documentElement.style.setProperty('--popover-foreground', getContrastColor(secondaryColor));
+        document.documentElement.style.setProperty('--muted-foreground', getContrastColor(secondaryColor));
+        document.documentElement.style.setProperty('--sidebar-foreground', getContrastColor(secondaryColor));
+        document.documentElement.style.setProperty('--accent-foreground', getContrastColor(tertiaryColor));
+        document.documentElement.style.setProperty('--sidebar-primary-foreground', getContrastColor(tertiaryColor));
+        document.documentElement.style.setProperty('--sidebar-accent-foreground', getContrastColor(tertiaryColor));
+
+        document.documentElement.style.setProperty('--chart-1', pChartColor);
+        document.documentElement.style.setProperty('--chart-2', sChartColor);
+        document.documentElement.style.setProperty('--chart-3', tChartColor);
+        document.documentElement.style.setProperty('--chart-4', pChartColor);
+        document.documentElement.style.setProperty('--chart-5', sChartColor);
+    }, []);
+
+    const resetColors = useCallback(() => {
+        document.documentElement.style.removeProperty('--background');
+        document.documentElement.style.removeProperty('--secondary');
+        document.documentElement.style.removeProperty('--card');
+        document.documentElement.style.removeProperty('--popover');
+        document.documentElement.style.removeProperty('--muted');
+        document.documentElement.style.removeProperty('--sidebar');
+        document.documentElement.style.removeProperty('--btn-secondary');
+        document.documentElement.style.removeProperty('--accent');
+        document.documentElement.style.removeProperty('--sidebar-primary');
+        document.documentElement.style.removeProperty('--sidebar-accent');
+
+        document.documentElement.style.removeProperty('--foreground');
+        document.documentElement.style.removeProperty('--secondary-foreground');
+        document.documentElement.style.removeProperty('--card-foreground');
+        document.documentElement.style.removeProperty('--popover-foreground');
+        document.documentElement.style.removeProperty('--muted-foreground');
+        document.documentElement.style.removeProperty('--sidebar-foreground');
+        document.documentElement.style.removeProperty('--accent-foreground');
+        document.documentElement.style.removeProperty('--sidebar-primary-foreground');
+        document.documentElement.style.removeProperty('--sidebar-accent-foreground');
+
+        document.documentElement.style.removeProperty('--chart-1');
+        document.documentElement.style.removeProperty('--chart-2');
+        document.documentElement.style.removeProperty('--chart-3');
+        document.documentElement.style.removeProperty('--chart-4');
+        document.documentElement.style.removeProperty('--chart-5');
+    }, []);
+
+    useEffect(() => {
+        if (mounted && activeTheme === "blue-dark") {
+            document.documentElement.classList.add("blue-dark");
+            applySavedColors();
+        }
+    }, [mounted, activeTheme, applySavedColors]);
+
+    const setThemeSafe = useCallback(
+        (value: string) => {
+            setTheme(value);
+            if (value === "light" || value === "dark") {
+                document.documentElement.classList.remove("blue-dark");
+                resetColors();
+            }
+            if (value === "blue-dark") {
+                document.documentElement.classList.add("blue-dark");
+                applySavedColors();
+            }
+        },
+        [setTheme, applySavedColors, resetColors]
+    );
+
+    if (!mounted) return null;
+
+    const triggerIcon = (() => {
+        if (activeTheme === "blue-dark") return <Waves className="h-5 w-5" />;
+        if (activeTheme === "dark") return <Moon className="h-5 w-5" />;
+        if (activeTheme === "light") return <Sun className="h-5 w-5" />;
+        return <Laptop className="h-5 w-5" />;
+    })();
+
+    const isActive = (value: string) => activeTheme === value;
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="outline"
+                    size="icon"
+                    aria-label="Change theme"
+                    title={`Theme: ${theme === "system" ? `system (${resolvedTheme})` : theme}`}
+                >
+                    {triggerIcon}
+                </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent align="end" sideOffset={8}>
+                <DropdownMenuItem
+                    onClick={() => setThemeSafe("light")}
+                    className="flex items-center justify-between gap-2"
+                >
+                    <div className="flex items-center">
+                        <Sun className="mr-2 h-4 w-4" /> Light
+                    </div>
+                    {isActive("light") && <Check className="h-4 w-4" />}
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                    onClick={() => setThemeSafe("dark")}
+                    className="flex items-center justify-between gap-2"
+                >
+                    <div className="flex items-center">
+                        <Moon className="mr-2 h-4 w-4" /> Dark
+                    </div>
+                    {isActive("dark") && <Check className="h-4 w-4" />}
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                    onClick={() => setThemeSafe("blue-dark")}
+                    className="flex items-center justify-between gap-2"
+                >
+                    <div className="flex items-center">
+                        <Waves className="mr-2 h-4 w-4" /> Custom
+                    </div>
+                    {isActive("blue-dark") && <Check className="h-4 w-4" />}
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

package/templates/default/ikoncomponents/title-progress/index.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { Progress } from "../../shadcn/progress";
+
+interface Props {
+  title: string;
+  value: number;
+  valueText?: string;
+  isPercent?: boolean;
+  className?: string;
+  titleClassName?: string;
+  valueClassName?: string;
+  progressClassName?: string;
+}
+
+export function TitleProgress({ title, value, valueText, isPercent = true, className, titleClassName, valueClassName, progressClassName }: Props) {
+  let finalValue = value.toFixed(2);
+  const parts = finalValue.split('.');
+
+  if (parts[1] === '00') {
+    finalValue = parts[0];
+  }
+
+  return (
+    <div className={'w-full ' + (className ?? '')}>
+      <div className={'flex items-center justify-between gap-4'}>
+        <div className={'text-muted-foreground text-sm ' + (titleClassName ?? '')}>
+          {title}
+        </div>
+
+        <div className={'text-sm ' + (valueClassName ?? '')}>
+          {valueText ?? `${finalValue}${isPercent ? '%' : ''}`}
+        </div>
+      </div>
+
+      <Progress
+        value={value}
+        className={'w-full mt-2 ' + (progressClassName ?? '')}
+      />
+    </div>
+  );
+}

package/templates/default/ikoncomponents/tooltip/index.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Tooltip as TooltipComp, TooltipContent, TooltipProvider, TooltipTrigger } from "../../shadcn/tooltip";
+
+export function TooltipComponent({ tooltipContent, children }: { tooltipContent: string | React.ReactNode, children: React.ReactNode }) {
+    return (
+        <TooltipProvider>
+            <TooltipComp>
+                <TooltipTrigger asChild>
+                    {children}
+                </TooltipTrigger>
+                <TooltipContent>
+                    {tooltipContent}
+                </TooltipContent>
+            </TooltipComp>
+        </TooltipProvider>
+    );
+}

package/templates/default/ikoncomponents/twolevel-dropdown/convertToDropdownNodes.tsx

@@ -0,0 +1,33 @@
+// import { entries, parentEntries } from "./your-json";
+type DropdownNode = {
+  id: string;
+  title: string;
+  description: string;
+  index: string;
+  children?: DropdownNode[];
+};
+export function convertToDropdownNodes(entriesMap: Record<string, any>, parentEntries: any[]): DropdownNode[] {
+  const map: Record<string, DropdownNode> = {};
+
+  // Create base nodes
+  Object.values(entriesMap).forEach((entry) => {
+    map[entry.id] = {
+      id: entry.id,
+      index: entry.index,
+      title: entry.title,
+      description: entry.description,
+      children: [],
+    };
+  });
+
+  // Build tree
+  parentEntries.forEach((entry) => {
+    const node = map[entry.id];
+    entry.childrenArray?.forEach((childId: string) => {
+      node.children?.push(map[childId]);
+    });
+  });
+
+  // Return top-level (no parentId)
+  return parentEntries.filter(e => !e.parentId).map(e => map[e.id]);
+}