indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/layout/side-panel.js

@@ -0,0 +1,118 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePanel = SidePanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const input_1 = require("../ui/forms/input.js");
+const ui_1 = require("../ui/index.js");
+const utils_1 = require("../../lib/utils.js");
+// --- Component ---
+function SidePanel({ title, icon: Icon, categories, activeItemId, onItemSelect, className, defaultOpenCategories = [], actionButton, isOpen = true, onClose, showSearch = true, itemContextMenu, collapsible = false, defaultCollapsed = false, onCollapseChange, showItemIcons = true, footer, children, recentsAction }) {
+    // State
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [openCategories, setOpenCategories] = (0, react_1.useState)(defaultOpenCategories.length > 0 ? defaultOpenCategories : categories.map(c => c.id));
+    const [menuOpen, setMenuOpen] = (0, react_1.useState)(null);
+    const [menuPosition, setMenuPosition] = (0, react_1.useState)({ top: 0, left: 0 });
+    const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(defaultCollapsed);
+    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+    const menuRef = (0, react_1.useRef)(null);
+    // Notify parent of collapse changes
+    const handleCollapseToggle = () => {
+        const newState = !isCollapsed;
+        setIsAnimating(true);
+        setIsCollapsed(newState);
+        onCollapseChange?.(newState);
+        // Clear animating flag after transition completes
+        setTimeout(() => setIsAnimating(false), 300);
+    };
+    // Close menu on outside click
+    (0, react_1.useEffect)(() => {
+        if (menuOpen === null)
+            return;
+        const handleClick = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                setMenuOpen(null);
+            }
+        };
+        document.addEventListener('click', handleClick);
+        return () => document.removeEventListener('click', handleClick);
+    }, [menuOpen]);
+    // Handlers
+    const toggleCategory = (id) => {
+        setOpenCategories(prev => prev.includes(id) ? prev.filter(c => c !== id) : [...prev, id]);
+    };
+    const handleMenuToggle = (e, itemId) => {
+        e.stopPropagation();
+        if (menuOpen === itemId) {
+            setMenuOpen(null);
+        }
+        else {
+            const button = e.currentTarget;
+            const rect = button.getBoundingClientRect();
+            setMenuPosition({
+                top: rect.top + rect.height / 2,
+                left: rect.left - 170
+            });
+            setMenuOpen(itemId);
+        }
+    };
+    // Filter Logic
+    const filteredCategories = (0, react_1.useMemo)(() => {
+        if (!searchQuery)
+            return categories;
+        return categories.map(cat => ({
+            ...cat,
+            items: cat.items.filter(item => {
+                const haystack = item.searchText ?? (typeof item.label === 'string' ? item.label : '');
+                return haystack.toLowerCase().includes(searchQuery.toLowerCase());
+            })
+        })).filter(cat => cat.items.length > 0);
+    }, [searchQuery, categories]);
+    return ((0, jsx_runtime_1.jsx)(ui_1.TooltipProvider, { delayDuration: 400, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("bg-[rgb(var(--bg-surface))] border-r border-[rgb(var(--bd-default))] flex flex-col h-full overflow-hidden", "transition-[width] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]", isCollapsed ? "w-[3.25rem]" : "w-72", 
+                    // Mobile support
+                    onClose && 'fixed md:relative z-50 md:z-0', onClose && (isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'), 
+                    // Override any passed width classes when collapsible
+                    collapsible && !className?.includes('w-full') && (isCollapsed ? "!w-[3.25rem]" : "")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("shrink-0 overflow-hidden", "transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]", isCollapsed ? "px-2 pt-3 pb-2" : "px-4 py-3 border-b border-[rgb(var(--bd-default))]"), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center", isCollapsed ? "justify-center" : "justify-between"), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-2 whitespace-nowrap min-w-0", "transition-[opacity,transform] duration-200 ease-out", isCollapsed ? "opacity-0 scale-95 w-0 pointer-events-none" : "opacity-100 scale-100 w-auto"), children: [Icon && (0, jsx_runtime_1.jsx)(Icon, { className: "w-5 h-5 shrink-0 text-[rgb(var(--fg-default))]" }), (0, jsx_runtime_1.jsx)("h2", { className: "font-semibold text-base text-[rgb(var(--fg-default))] truncate", children: title })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-0.5 shrink-0", isCollapsed && "mx-auto"), children: [collapsible && ((0, jsx_runtime_1.jsxs)(ui_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { onClick: handleCollapseToggle, className: (0, utils_1.cn)("h-8 w-8 flex items-center justify-center rounded-lg transition-all duration-200", "text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]", "hover:bg-[rgb(var(--bg-subtle))] active:scale-95"), children: isCollapsed ? (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftOpen, { className: "w-4 h-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { className: "w-4 h-4" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.TooltipContent, { side: "right", children: isCollapsed ? "Expand sidebar" : "Collapse sidebar" })] })), onClose && !isCollapsed && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "md:hidden h-8 w-8 flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-4 h-4" }) }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]", isCollapsed
+                                        ? "max-h-0 opacity-0 mt-0"
+                                        : "max-h-[120px] opacity-100 mt-2.5"), children: [actionButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: actionButton.onClick, className: "w-full px-4 py-2 bg-[rgb(var(--bg-subtle))] border border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))] rounded-lg font-medium text-sm flex items-center justify-center gap-2 hover:bg-[rgb(var(--bg-app))] hover:border-[rgb(var(--color-primary))]/30 active:scale-[0.98] transition-all duration-200", children: [actionButton.icon && (0, jsx_runtime_1.jsx)(actionButton.icon, { className: "w-4 h-4 shrink-0 text-[rgb(var(--color-primary))]" }), (0, jsx_runtime_1.jsx)("span", { children: actionButton.label })] })), showSearch && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(actionButton && "mt-2.5"), children: (0, jsx_runtime_1.jsx)(input_1.Input, { placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), leftIcon: lucide_react_1.Search, className: "bg-[rgb(var(--bg-surface))]", "data-sidepanel-search": true }) }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex-1 overflow-y-auto overflow-x-hidden", "transition-[padding] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]", isCollapsed ? "px-1.5 py-1" : "px-2 py-1", className?.includes('w-full') && !isCollapsed && "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"), children: isCollapsed ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [actionButton && ((0, jsx_runtime_1.jsxs)(ui_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { onClick: actionButton.onClick, className: "w-9 h-9 flex items-center justify-center rounded-lg text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] active:scale-95 transition-all duration-150", children: actionButton.icon ? (0, jsx_runtime_1.jsx)(actionButton.icon, { className: "w-5 h-5" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "w-5 h-5" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.TooltipContent, { side: "right", children: actionButton.label })] })), showItemIcons ? (
+                                    // Show individual item icons with badge count at top-right
+                                    filteredCategories.flatMap(cat => cat.items).slice(0, 10).map((item) => ((0, jsx_runtime_1.jsxs)(ui_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { onClick: () => onItemSelect(item.id), className: (0, utils_1.cn)("relative w-9 h-9 flex items-center justify-center rounded-lg transition-all duration-150", "active:scale-95", activeItemId === item.id
+                                                        ? "bg-[rgb(var(--color-primary))]/10 text-[rgb(var(--color-primary))]"
+                                                        : "text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]"), children: [(() => {
+                                                            const ItemIcon = item.icon || lucide_react_1.MessageSquare;
+                                                            return (0, jsx_runtime_1.jsx)(ItemIcon, { className: "w-5 h-5" });
+                                                        })(), item.badge !== undefined && item.badge !== 0 && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 min-w-[0.875rem] h-3.5 px-0.5 text-[8px] font-bold rounded-full flex items-center justify-center leading-none bg-[rgb(var(--color-primary))] text-white", children: item.badge }))] }) }), (0, jsx_runtime_1.jsxs)(ui_1.TooltipContent, { side: "right", children: [item.label, item.badge !== undefined && item.badge !== 0 ? ` (${item.badge})` : ''] })] }, item.id)))) : (
+                                    // Search + Last Chat + All Chats
+                                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showSearch && ((0, jsx_runtime_1.jsxs)(ui_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                                                handleCollapseToggle();
+                                                                setTimeout(() => {
+                                                                    const searchInput = document.querySelector('[data-sidepanel-search]');
+                                                                    searchInput?.focus();
+                                                                }, 350);
+                                                            }, className: "w-9 h-9 flex items-center justify-center rounded-lg text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] active:scale-95 transition-all duration-150", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "w-5 h-5" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.TooltipContent, { side: "right", children: "Search" })] })), (() => {
+                                                const lastItem = filteredCategories.flatMap(cat => cat.items)[0];
+                                                if (!lastItem)
+                                                    return null;
+                                                return ((0, jsx_runtime_1.jsxs)(ui_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { onClick: () => onItemSelect(lastItem.id), className: (0, utils_1.cn)("w-9 h-9 flex items-center justify-center rounded-lg active:scale-95 transition-all duration-150", activeItemId === lastItem.id
+                                                                    ? "bg-[rgb(var(--color-primary))]/10 text-[rgb(var(--color-primary))]"
+                                                                    : "text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]"), children: (0, jsx_runtime_1.jsx)(lucide_react_1.History, { className: "w-5 h-5" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.TooltipContent, { side: "right", children: lastItem.label })] }));
+                                            })(), (0, jsx_runtime_1.jsxs)(ui_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { onClick: handleCollapseToggle, className: "w-9 h-9 flex items-center justify-center rounded-lg text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] active:scale-95 transition-all duration-150", children: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { className: "w-5 h-5" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.TooltipContent, { side: "right", children: "All Chats" })] })] })), showItemIcons && filteredCategories.flatMap(cat => cat.items).length > 10 && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center text-xs text-[rgb(var(--fg-muted))] py-1", children: ["+", filteredCategories.flatMap(cat => cat.items).length - 10] }))] })) : children ? (
+                            /* Free-form content slot (forms, custom UI) */
+                            (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("transition-opacity duration-200 ease-out", isAnimating ? "opacity-0" : "opacity-100"), children: children })) : (
+                            /* Expanded View */
+                            (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("transition-opacity duration-200 ease-out", isAnimating ? "opacity-0" : "opacity-100"), children: [!showItemIcons && !searchQuery && filteredCategories.some(c => c.items.length > 0) && ((0, jsx_runtime_1.jsxs)("div", { className: "px-3 pt-2 pb-1.5 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[0.65rem] font-semibold text-[rgb(var(--fg-muted))]/70 uppercase tracking-widest", children: "Recents" }), recentsAction] })), filteredCategories.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "text-center text-sm text-[rgb(var(--fg-muted))] py-8 col-span-full", children: searchQuery ? 'No results found' : 'No items yet' })) : (filteredCategories.map(category => ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(className?.includes('w-full') && "bg-[rgb(var(--bg-subtle))] rounded-lg p-2 h-fit"), children: [filteredCategories.length > 1 && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => toggleCategory(category.id), className: "w-full flex items-center justify-between px-2 py-1.5 text-sm font-semibold text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-md transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [category.icon && (0, jsx_runtime_1.jsx)(category.icon, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" }), category.label] }), openCategories.includes(category.id) ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "w-3.5 h-3.5 text-[rgb(var(--fg-muted))]" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "w-3.5 h-3.5 text-[rgb(var(--fg-muted))]" }))] })), (filteredCategories.length === 1 || openCategories.includes(category.id)) && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("space-y-px", filteredCategories.length > 1 && "ml-2 mt-1", filteredCategories.length > 1 && !className?.includes('w-full') && "border-l border-[rgb(var(--bd-default))] pl-2"), children: category.items.map(item => ((0, jsx_runtime_1.jsxs)("div", { className: "relative group", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => { if (!item.disableSelect)
+                                                                onItemSelect(item.id); }, className: (0, utils_1.cn)("w-full text-left px-3 py-2 text-[0.8125rem] rounded-lg transition-all duration-150 flex items-center gap-2.5", activeItemId === item.id
+                                                                ? "bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] font-medium border-l-2 border-[rgb(var(--color-primary))] pl-2.5"
+                                                                : "text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]/60"), children: [showItemIcons && (() => {
+                                                                    const ItemIcon = item.icon || lucide_react_1.MessageSquare;
+                                                                    return (0, jsx_runtime_1.jsx)(ItemIcon, { className: "w-4 h-4 shrink-0 opacity-50" });
+                                                                })(), (0, jsx_runtime_1.jsx)("span", { className: "truncate flex-1", children: item.label }), item.badge !== undefined && item.badge !== 0 && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("text-xs px-1.5 py-0.5 rounded-full shrink-0 tabular-nums", activeItemId === item.id
+                                                                        ? "bg-[rgb(var(--color-primary))] text-white"
+                                                                        : "bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))]"), children: item.badge }))] }), itemContextMenu && ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => handleMenuToggle(e, item.id), className: "absolute right-1.5 top-1/2 -translate-y-1/2 w-6 h-6 rounded-md text-[rgb(var(--fg-muted))]/50 flex items-center justify-center hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-all opacity-0 group-hover:opacity-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { className: "w-3.5 h-3.5" }) }))] }, item.id))) }))] }, category.id))))] })) }), footer && !isCollapsed && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("shrink-0 border-t border-[rgb(var(--bd-default))] transition-opacity duration-200", isAnimating ? "opacity-0" : "opacity-100"), children: footer }))] }), menuOpen !== null && itemContextMenu && ((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "fixed bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg min-w-[170px] shadow-lg overflow-hidden z-[9999]", style: {
+                        left: `${menuPosition.left}px`,
+                        top: `${menuPosition.top}px`,
+                        transform: 'translateY(-50%)'
+                    }, children: itemContextMenu(menuOpen, () => setMenuOpen(null)) }))] }) }));
+}