ikoncomponents 1.5.8 → 1.5.10

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

@@ -1,189 +1,118 @@
-"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>
-    );
-}
+"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" })] })] })] }));
+}

package/dist/ikoncomponents/title-progress/index.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    title: string;
+    value: number;
+    valueText?: string;
+    isPercent?: boolean;
+    className?: string;
+    titleClassName?: string;
+    valueClassName?: string;
+    progressClassName?: string;
+}
+export declare function TitleProgress({ title, value, valueText, isPercent, className, titleClassName, valueClassName, progressClassName }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ikoncomponents/title-progress/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress } from "../../shadcn/progress";
+export function TitleProgress({ title, value, valueText, isPercent = true, className, titleClassName, valueClassName, progressClassName }) {
+    let finalValue = value.toFixed(2);
+    const parts = finalValue.split('.');
+    if (parts[1] === '00') {
+        finalValue = parts[0];
+    }
+    return (_jsxs("div", { className: 'w-full ' + (className !== null && className !== void 0 ? className : ''), children: [_jsxs("div", { className: 'flex items-center justify-between gap-4', children: [_jsx("div", { className: 'text-muted-foreground text-sm ' + (titleClassName !== null && titleClassName !== void 0 ? titleClassName : ''), children: title }), _jsx("div", { className: 'text-sm ' + (valueClassName !== null && valueClassName !== void 0 ? valueClassName : ''), children: valueText !== null && valueText !== void 0 ? valueText : `${finalValue}${isPercent ? '%' : ''}` })] }), _jsx(Progress, { value: value, className: 'w-full mt-2 ' + (progressClassName !== null && progressClassName !== void 0 ? progressClassName : '') })] }));
+}

package/dist/ikoncomponents/tooltip/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export declare function TooltipComponent({ tooltipContent, children }: {
+    tooltipContent: string | React.ReactNode;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/tooltip/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as TooltipComp, TooltipContent, TooltipProvider, TooltipTrigger } from "../../shadcn/tooltip";
+export function TooltipComponent({ tooltipContent, children }) {
+    return (_jsx(TooltipProvider, { children: _jsxs(TooltipComp, { children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { children: tooltipContent })] }) }));
+}

package/dist/ikoncomponents/twolevel-dropdown/index.d.ts

@@ -0,0 +1,31 @@
+export interface FrameworkEntry {
+    id: string;
+    index: string;
+    title: string;
+    description: string;
+    parentId: string | null;
+    treatAsParent: boolean;
+}
+export interface TreeNode extends FrameworkEntry {
+    level: number;
+}
+export interface ParentEntry extends FrameworkEntry {
+    childrenArray: string[];
+}
+export interface ProcessedFrameworkData {
+    flatTree: TreeNode[];
+    itemMap: Record<string, {
+        parentId: string | null;
+        childrenIds: string[];
+    }>;
+}
+interface FrameworkItemDropdownProps {
+    processedData: ProcessedFrameworkData;
+    value: string[];
+    onChange: (newSelection: string[]) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    className?: string;
+}
+export declare function FrameworkItemDropdown({ processedData, value, onChange, placeholder, searchPlaceholder, className, }: FrameworkItemDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ikoncomponents/twolevel-dropdown/index.js

@@ -0,0 +1,143 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronsUpDown } from "lucide-react";
+import { cn } from "../../utils/cn";
+import { Button } from "../../shadcn/button";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList, } from "../../shadcn/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../shadcn/popover";
+export function FrameworkItemDropdown({ processedData, value, onChange, placeholder = "Select items...", searchPlaceholder = "Search...", className, }) {
+    const [open, setOpen] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const { flatTree, itemMap } = processedData;
+    const selectionState = React.useMemo(() => {
+        const state = new Map();
+        const selectedSet = new Set(value);
+        [...flatTree].reverse().forEach((item) => {
+            const nodeInfo = itemMap[item.id];
+            if (!nodeInfo ||
+                !item.treatAsParent ||
+                nodeInfo.childrenIds.length === 0) {
+                if (selectedSet.has(item.id)) {
+                    state.set(item.id, "checked");
+                }
+            }
+            else {
+                const childStates = nodeInfo.childrenIds.map((childId) => state.get(childId));
+                const checkedCount = childStates.filter((s) => s === "checked").length;
+                const indeterminateCount = childStates.filter((s) => s === "indeterminate").length;
+                if (checkedCount === nodeInfo.childrenIds.length) {
+                    state.set(item.id, "checked");
+                }
+                else if (checkedCount > 0 || indeterminateCount > 0) {
+                    state.set(item.id, "indeterminate");
+                }
+            }
+        });
+        return state;
+    }, [value, flatTree, itemMap]);
+    const handleSelect = (item) => {
+        var _a, _b, _c;
+        const newSelectedIds = new Set(value);
+        const currentState = selectionState.get(item.id);
+        const shouldBeChecked = !(currentState === "checked" || currentState === "indeterminate");
+        const descendants = new Set();
+        const queue = [...(((_a = itemMap[item.id]) === null || _a === void 0 ? void 0 : _a.childrenIds) || [])];
+        while (queue.length > 0) {
+            const currentId = queue.shift();
+            descendants.add(currentId);
+            const children = ((_b = itemMap[currentId]) === null || _b === void 0 ? void 0 : _b.childrenIds) || [];
+            children.forEach((childId) => queue.push(childId));
+        }
+        if (shouldBeChecked) {
+            newSelectedIds.add(item.id);
+            descendants.forEach((id) => newSelectedIds.add(id));
+        }
+        else {
+            newSelectedIds.delete(item.id);
+            descendants.forEach((id) => newSelectedIds.delete(id));
+        }
+        let parentId = (_c = itemMap[item.id]) === null || _c === void 0 ? void 0 : _c.parentId;
+        while (parentId) {
+            const parentInfo = itemMap[parentId];
+            if (parentInfo && parentInfo.childrenIds.length > 0) {
+                const areAllChildrenSelected = parentInfo.childrenIds.every((childId) => newSelectedIds.has(childId));
+                if (areAllChildrenSelected) {
+                    newSelectedIds.add(parentId);
+                }
+                else {
+                    newSelectedIds.delete(parentId);
+                }
+            }
+            parentId = parentInfo === null || parentInfo === void 0 ? void 0 : parentInfo.parentId;
+        }
+        onChange(Array.from(newSelectedIds));
+    };
+    const filteredItems = React.useMemo(() => {
+        if (!searchQuery)
+            return flatTree.slice(); // Always return a new array in original order
+        const lowercasedQuery = searchQuery.toLowerCase();
+        const matchedIds = new Set();
+        // Step 1: collect directly matched items
+        flatTree.forEach((item) => {
+            const matches = item.title.toLowerCase().includes(lowercasedQuery) ||
+                item.description.toLowerCase().includes(lowercasedQuery) ||
+                item.index.toLowerCase().includes(lowercasedQuery);
+            if (matches) {
+                matchedIds.add(item.id);
+            }
+        });
+        // Step 2: collect ancestors and descendants
+        const expandedIds = new Set(matchedIds);
+        const addAncestors = (id) => {
+            var _a;
+            let current = id;
+            while (current) {
+                const parentId = (_a = itemMap[current]) === null || _a === void 0 ? void 0 : _a.parentId;
+                if (parentId && !expandedIds.has(parentId)) {
+                    expandedIds.add(parentId);
+                    current = parentId;
+                }
+                else {
+                    break;
+                }
+            }
+        };
+        const addDescendants = (id) => {
+            var _a;
+            const children = ((_a = itemMap[id]) === null || _a === void 0 ? void 0 : _a.childrenIds) || [];
+            for (const childId of children) {
+                if (!expandedIds.has(childId)) {
+                    expandedIds.add(childId);
+                    addDescendants(childId);
+                }
+            }
+        };
+        matchedIds.forEach((id) => {
+            addAncestors(id);
+            addDescendants(id);
+        });
+        // Step 3: Return nodes in the original flatTree order, but only those in expandedIds
+        return flatTree.filter((node) => expandedIds.has(node.id));
+    }, [searchQuery, flatTree, itemMap]);
+    const getSelectedLabel = () => {
+        const leafNodeIds = value.filter((id) => {
+            const nodeInfo = itemMap[id];
+            return !nodeInfo || nodeInfo.childrenIds.length === 0;
+        });
+        if (leafNodeIds.length === 0) {
+            return _jsx("span", { className: "text-muted-foreground", children: placeholder });
+        }
+        if (leafNodeIds.length === 1) {
+            const item = flatTree.find((i) => i.id === leafNodeIds[0]);
+            return item ? item.index : placeholder;
+        }
+        return `${leafNodeIds.length} items selected`;
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": open, className: cn("w-full justify-between transition-all duration-150 ease-in-out border hover:border-primary hover:shadow-sm bg-secondary cursor-pointer", className), children: [_jsx("span", { className: "truncate", children: getSelectedLabel() }), _jsx(ChevronsUpDown, { className: cn("ml-2 h-4 w-4 shrink-0 transition-transform duration-200", open && "rotate-180") })] }) }), _jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0 max-h-[400px] overflow-y-auto", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: searchPlaceholder, value: searchQuery, onValueChange: setSearchQuery }), _jsxs(CommandList, { className: "transition-all duration-200 ease-in-out", children: [_jsx(CommandEmpty, { children: "No results found." }), filteredItems.map((item) => (_jsxs(CommandItem, { value: `${item.index} ${item.title} ${item.description}`, onSelect: () => handleSelect(item), className: "flex items-start cursor-pointer gap-2", style: { paddingLeft: `${item.level * 1.5 + 0.75}rem` }, children: [_jsx("input", { type: "checkbox", className: "mt-1 h-4 w-4 accent-primary border rounded", checked: selectionState.get(item.id) === "checked", ref: (el) => {
+                                                if (el) {
+                                                    el.indeterminate =
+                                                        selectionState.get(item.id) === "indeterminate";
+                                                }
+                                            }, readOnly: true }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("span", { className: "text-xs font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: item.index }), _jsx("span", { className: "font-medium", children: item.title })] }), _jsx("p", { className: "text-sm text-muted-foreground", children: item.description })] })] }, item.id)))] })] }) })] }));
+}

package/dist/ikoncomponents/upload-tab/index.d.ts

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

package/dist/ikoncomponents/upload-tab/index.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { UploadIcon, X, Send } from "lucide-react";
+import { Button } from "../../shadcn/button";
+import { Input } from "../../shadcn/input";
+import { Label } from "../../shadcn/label";
+import { Progress } from "../../shadcn/progress";
+import { useForm } from "react-hook-form";
+import axios from "axios";
+import { Form, FormField, FormItem, FormControl, FormMessage, } from "../../shadcn/form";
+import { NoDataComponent } from "../no-data";
+export function UploadTab() {
+    const form = useForm({
+        defaultValues: {
+            text: "",
+            fileNames: [],
+        },
+    });
+    const [inputValue, setInputValue] = useState("");
+    const [texts, setTexts] = useState([]);
+    const [fileNames, setFileNames] = useState([]); // Updated type
+    const [formattedDate, setFormattedDate] = useState("");
+    const [noFilesUploaded, setNoFilesUploaded] = useState(true);
+    const isUploading = fileNames.some((file) => file.progress < 100);
+    const simulateFileUpload = async (idx, file) => {
+        const formData = new FormData();
+        formData.append("file", file.file); // Use the actual file object
+        try {
+            const response = await axios.post("UPLOAD_ENDPOINT_URL", formData, {
+                onUploadProgress: (progressEvent) => {
+                    const progress = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 1));
+                    setFileNames((prev) => prev.map((f, i) => (i === idx ? Object.assign(Object.assign({}, f), { progress }) : f)));
+                },
+            });
+            setFileNames((prev) => prev.map((f, i) => i === idx ? Object.assign(Object.assign({}, f), { url: response.data.url, progress: 100 }) : f));
+        }
+        catch (error) {
+            console.error("Upload failed:", error);
+        }
+    };
+    useEffect(() => {
+        const currentDate = new Date();
+        const day = String(currentDate.getDate()).padStart(2, "0");
+        const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+        const year = currentDate.getFullYear();
+        setFormattedDate(`${day}-${month}-${year}`);
+    }, []);
+    useEffect(() => {
+        fileNames.forEach((file, idx) => {
+            if (file.progress === 0) {
+                simulateFileUpload(idx, file);
+            }
+        });
+    }, [fileNames]);
+    const handleAddText = () => {
+        if (inputValue.trim() || fileNames.length > 0) {
+            const newEntry = {
+                text: inputValue.trim(),
+                fileNames: fileNames.map((file) => file.name),
+            };
+            setTexts([newEntry, ...texts]);
+            setInputValue("");
+            setFileNames([]);
+            setNoFilesUploaded(false);
+        }
+    };
+    const handleFileUpload = (e) => {
+        if (e.target.files) {
+            const uploadedFiles = Array.from(e.target.files).map((file) => ({
+                name: file.name,
+                url: "",
+                progress: 0,
+                file,
+            }));
+            setFileNames((prev) => [...prev, ...uploadedFiles]); // Type now matches correctly
+            setNoFilesUploaded(false);
+        }
+    };
+    const removeFile = (index) => {
+        const updatedFiles = fileNames.filter((_, idx) => idx !== index);
+        setFileNames(updatedFiles);
+        if (updatedFiles.length === 0 && texts.length === 0) {
+            setNoFilesUploaded(true);
+        }
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col h-full w-full gap-3", children: [_jsxs("div", { className: "flex-grow overflow-auto flex flex-col-reverse gap-2", children: [noFilesUploaded && _jsx(NoDataComponent, { text: "No files uploaded" }), fileNames.length > 0 && (_jsxs("div", { className: "p-2 my-1 rounded-md border", children: [_jsx("p", { className: "font-bold", children: "Selected Files:" }), fileNames.map((file, idx) => (_jsxs("div", { className: "flex flex-col mb-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("a", { href: file.url, download: file.name, className: "text-sm text-blue-600 underline cursor-pointer", children: file.name }), _jsx("button", { onClick: () => removeFile(idx), className: "text-red-500 hover:text-red-800", children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsx(Progress, { value: file.progress }), _jsxs("p", { className: "text-xs text-gray-500", children: [file.progress, "% uploaded"] })] }, idx)))] })), texts.map((entry, index) => (_jsxs("div", { className: "border-b text-sm pb-2", children: [entry.fileNames.map((fileName, idx) => {
+                                    var _a;
+                                    return (_jsx("p", { children: _jsx("a", { href: ((_a = fileNames.find((file) => file.name === fileName)) === null || _a === void 0 ? void 0 : _a.url) ||
+                                                "#", download: fileName, className: "text-sm text-blue-500 underline cursor-pointer", children: fileName }) }, idx));
+                                }), _jsx("p", { children: entry.text || "(No Text)" }), _jsxs("div", { className: "flex justify-between", children: [_jsx("p", { children: "John Doe" }), _jsx("p", { children: formattedDate })] })] }, index)))] }), _jsx(Form, Object.assign({}, form, { children: _jsx("form", { onSubmit: form.handleSubmit(() => handleAddText()), children: _jsx("div", { className: "flex flex-col", children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(FormField, { name: "text", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(Input, { id: "text-input", type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: "Type something..." }) }), _jsx(FormMessage, {})] })) }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { htmlFor: "file-upload", className: "sr-only", children: "Upload Files" }), _jsx(Button, { variant: "outline", asChild: true, children: _jsx("label", { htmlFor: "file-upload", className: "cursor-pointer", children: _jsx(UploadIcon, { className: "w-5 h-5" }) }) }), _jsx(Input, { id: "file-upload", type: "file", multiple: true, onChange: handleFileUpload, className: "hidden" })] }), _jsx(Button, { variant: "outline", type: "submit", disabled: isUploading, children: _jsx(Send, {}) })] }) }) }) }))] }) }));
+}

package/dist/ikoncomponents/widgets/index.d.ts

@@ -0,0 +1,2 @@
+import { WidgetsFunctionProps } from "./type";
+export declare function Widgets({ widgetData }: WidgetsFunctionProps): import("react/jsx-runtime").JSX.Element;