@vezham/react 26.0.0-alpha.5 → 26.0.0-alpha.6

package/dist/lib/components/panel/info-panel/provider.js

@@ -0,0 +1,104 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useHotkey } from "@tanstack/react-hotkeys";
+//#region src/lib/components/panel/info-panel/provider.tsx
+var InfoPanelContext = createContext(null);
+var STORAGE_KEY = "vx-app:info-panel";
+var VALID_INFO_PANELS = [
+	"bookmarks",
+	"storage",
+	"ai"
+];
+var isInfoPanel = (panel) => typeof panel === "string" && VALID_INFO_PANELS.includes(panel);
+var readStoredInfoPanelState = () => {
+	if (typeof window === "undefined") return {
+		activeInfoPanel: null,
+		isOpen: false
+	};
+	try {
+		const storedValue = window.localStorage.getItem(STORAGE_KEY);
+		if (!storedValue) return {
+			activeInfoPanel: null,
+			isOpen: false
+		};
+		const parsedValue = JSON.parse(storedValue);
+		const storedPanel = parsedValue.activeInfoPanel;
+		const migratedPanel = storedPanel === "disc" ? "storage" : storedPanel;
+		const activeInfoPanel = isInfoPanel(migratedPanel) ? migratedPanel : null;
+		return {
+			activeInfoPanel,
+			isOpen: Boolean(parsedValue.isOpen && activeInfoPanel)
+		};
+	} catch {
+		return {
+			activeInfoPanel: null,
+			isOpen: false
+		};
+	}
+};
+var InfoPanelProvider = ({ children }) => {
+	const [state, setState] = useState(readStoredInfoPanelState);
+	const { activeInfoPanel, isOpen } = state;
+	useEffect(() => {
+		window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+	}, [state]);
+	const setActiveInfoPanel = useCallback((panel) => {
+		setState({
+			activeInfoPanel: panel,
+			isOpen: Boolean(panel)
+		});
+	}, []);
+	const openInfoPanel = useCallback((panel) => setState({
+		activeInfoPanel: panel,
+		isOpen: true
+	}), []);
+	const closeInfoPanel = useCallback(() => {
+		setState((current) => ({
+			...current,
+			isOpen: false
+		}));
+	}, []);
+	const toggleInfoPanel = useCallback((panel) => {
+		setState((current) => current.activeInfoPanel === panel && current.isOpen ? {
+			...current,
+			isOpen: false
+		} : {
+			activeInfoPanel: panel,
+			isOpen: true
+		});
+	}, []);
+	useHotkey("Mod+Shift+B", () => toggleInfoPanel("bookmarks"), {
+		preventDefault: true,
+		ignoreInputs: true
+	});
+	useHotkey("Mod+Shift+S", () => toggleInfoPanel("storage"), {
+		preventDefault: true,
+		ignoreInputs: true
+	});
+	const value = useMemo(() => ({
+		activeInfoPanel,
+		isOpen,
+		setActiveInfoPanel,
+		openInfoPanel,
+		closeInfoPanel,
+		toggleInfoPanel
+	}), [
+		activeInfoPanel,
+		closeInfoPanel,
+		isOpen,
+		openInfoPanel,
+		setActiveInfoPanel,
+		toggleInfoPanel
+	]);
+	return /* @__PURE__ */ jsx(InfoPanelContext.Provider, {
+		value,
+		children
+	});
+};
+var useInfoPanel = () => {
+	const context = useContext(InfoPanelContext);
+	if (!context) throw new Error("useInfoPanel must be used within InfoPanelProvider");
+	return context;
+};
+//#endregion
+export { InfoPanelProvider, useInfoPanel };

package/dist/lib/components/panel/info-panel/sheet.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { InfoPanelDefinition } from './types';
+export declare const InfoPanelSheet: ({ panel, heading, isOpen, onClose }: {
+    panel: InfoPanelDefinition;
+    heading?: ReactNode;
+    isOpen?: boolean;
+    onClose: () => void;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=sheet.d.ts.map

package/dist/lib/components/panel/info-panel/sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/info-panel/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAYhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,eAAO,MAAM,cAAc,GAAI,qCAK5B;IACD,KAAK,EAAE,mBAAmB,CAAA;IAC1B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,gCAyDA,CAAA"}

package/dist/lib/components/panel/info-panel/sheet.js

@@ -0,0 +1,70 @@
+import { panelBodyClass, panelHeaderClass, panelHeadingClass, panelLayoutClass } from "./styles.js";
+import { useState } from "react";
+import { Button, Surface, Tooltip } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Maximize, Minimize } from "@vezham/icons-react";
+import { Sheet } from "@vezham/react-pro-v3";
+//#region src/lib/components/panel/info-panel/sheet.tsx
+var InfoPanelSheet = ({ panel, heading, isOpen = true, onClose }) => {
+	const [expanded, setExpanded] = useState(false);
+	return /* @__PURE__ */ jsx(Sheet, {
+		isOpen,
+		onOpenChange: (open) => !open && onClose(),
+		placement: "bottom",
+		isHandleOnly: true,
+		shouldAutoFocus: true,
+		children: /* @__PURE__ */ jsx(Sheet.Backdrop, {
+			variant: "blur",
+			className: "bg-overlay/10 z-80 backdrop-blur-xs",
+			children: /* @__PURE__ */ jsx(Sheet.Content, {
+				className: `mx-auto w-full ${expanded ? "h-dvh max-h-none max-w-none" : "h-[75dvh] max-h-[75dvh] max-w-2xl"}`,
+				children: /* @__PURE__ */ jsx(Sheet.Dialog, {
+					className: `${panelLayoutClass} max-h-none ${expanded ? "rounded-none pt-[env(safe-area-inset-top)]" : "rounded-t-[1.75rem]"}`,
+					children: /* @__PURE__ */ jsxs(Surface, {
+						variant: "transparent",
+						className: panelLayoutClass,
+						children: [
+							!expanded && /* @__PURE__ */ jsx(Sheet.Handle, {}),
+							/* @__PURE__ */ jsxs(Sheet.Header, {
+								className: panelHeaderClass,
+								children: [
+									/* @__PURE__ */ jsxs(Sheet.Heading, {
+										className: `${panelHeadingClass} flex flex-1 items-center gap-2`,
+										children: [panel.titleIcon, /* @__PURE__ */ jsx("span", {
+											className: "truncate",
+											children: heading ?? panel.title
+										})]
+									}),
+									/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(Button, {
+										isIconOnly: true,
+										size: "sm",
+										variant: "ghost",
+										"aria-label": `${expanded ? "Collapse" : "Expand"} ${panel.title}`,
+										onPress: () => setExpanded((current) => !current),
+										children: expanded ? /* @__PURE__ */ jsx(Minimize, {
+											size: 18,
+											"aria-hidden": "true"
+										}) : /* @__PURE__ */ jsx(Maximize, {
+											size: 18,
+											"aria-hidden": "true"
+										})
+									}), /* @__PURE__ */ jsx(Tooltip.Content, { children: expanded ? "Collapse" : "Expand" })] }),
+									/* @__PURE__ */ jsx(Sheet.CloseTrigger, {
+										"aria-label": `Close ${panel.title}`,
+										className: "static shrink-0"
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx(Sheet.Body, {
+								className: `${panelBodyClass} @container/info-panel pb-[max(1rem,env(safe-area-inset-bottom))] ${panel.scrollable === false ? "overflow-hidden" : "overflow-y-auto overscroll-contain"}`,
+								children: panel.content
+							})
+						]
+					})
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { InfoPanelSheet };

package/dist/lib/components/panel/info-panel/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const panelLayoutClass = "flex h-full min-h-0 flex-col overflow-hidden";
+export declare const panelHeaderClass = "flex shrink-0 flex-row items-center gap-2 px-4 py-3";
+export declare const panelHeadingClass = "text-foreground min-w-0 truncate text-base font-semibold";
+export declare const panelBodyClass = "min-h-0 flex-1 px-4 pt-2 pb-4";
+export declare const panelContextMenuClass = "w-max min-w-0! max-w-[min(16rem,calc(100vw-1rem))]! text-[13px] [&_[data-slot=context-menu-menu]]:p-1! [&_[data-slot=menu-item]]:min-h-7! [&_[data-slot=menu-item]]:px-2! [&_[data-slot=menu-item]]:py-1! [&_.label]:text-[13px]";
+//# sourceMappingURL=styles.d.ts.map

package/dist/lib/components/panel/info-panel/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/info-panel/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,iDAAiD,CAAA;AAC9E,eAAO,MAAM,gBAAgB,wDAC0B,CAAA;AACvD,eAAO,MAAM,iBAAiB,6DAC8B,CAAA;AAC5D,eAAO,MAAM,cAAc,kCAAkC,CAAA;AAC7D,eAAO,MAAM,qBAAqB,qOACkM,CAAA"}

package/dist/lib/components/panel/info-panel/styles.js

@@ -0,0 +1,8 @@
+//#region src/lib/components/panel/info-panel/styles.ts
+var panelLayoutClass = "flex h-full min-h-0 flex-col overflow-hidden";
+var panelHeaderClass = "flex shrink-0 flex-row items-center gap-2 px-4 py-3";
+var panelHeadingClass = "text-foreground min-w-0 truncate text-base font-semibold";
+var panelBodyClass = "min-h-0 flex-1 px-4 pt-2 pb-4";
+var panelContextMenuClass = "w-max min-w-0! max-w-[min(16rem,calc(100vw-1rem))]! text-[13px] [&_[data-slot=context-menu-menu]]:p-1! [&_[data-slot=menu-item]]:min-h-7! [&_[data-slot=menu-item]]:px-2! [&_[data-slot=menu-item]]:py-1! [&_.label]:text-[13px]";
+//#endregion
+export { panelBodyClass, panelContextMenuClass, panelHeaderClass, panelHeadingClass, panelLayoutClass };

package/dist/lib/components/panel/info-panel/types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export type ActiveInfoPanel = 'bookmarks' | 'storage' | 'ai' | null;
+export interface InfoPanelContextValue {
+    activeInfoPanel: ActiveInfoPanel;
+    isOpen: boolean;
+    setActiveInfoPanel: (panel: ActiveInfoPanel) => void;
+    openInfoPanel: (panel: Exclude<ActiveInfoPanel, null>) => void;
+    closeInfoPanel: () => void;
+    toggleInfoPanel: (panel: Exclude<ActiveInfoPanel, null>) => void;
+}
+export interface InfoPanelDefinition {
+    title: string;
+    titleIcon?: ReactNode;
+    content: ReactNode;
+    scrollable?: boolean;
+    renderCompact?: (props: {
+        isOpen: boolean;
+        onClose: () => void;
+    }) => ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/components/panel/info-panel/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/info-panel/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnE,MAAM,WAAW,qBAAqB;IACpC,eAAe,EAAE,eAAe,CAAA;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,kBAAkB,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IACpD,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,IAAI,CAAA;IAC9D,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,IAAI,CAAA;CACjE;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,EAAE,SAAS,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAA;CAC/E"}

package/dist/lib/components/panel/menu/index.d.ts

@@ -0,0 +1,4 @@
+import { Props } from './types';
+declare const Menu: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Menu };
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/panel/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/menu/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,EAAY,MAAM,SAAS,CAAA;AAExD,QAAA,MAAM,IAAI,+GA8LR,CAAA;AAIF,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/lib/components/panel/menu/index.js

@@ -0,0 +1,156 @@
+import { AppIcon } from "../../app-icon/index.js";
+import { useProps } from "./types.js";
+import { useNavigate } from "@tanstack/react-router";
+import { forwardRef, useState } from "react";
+import { Drawer, ScrollShadow, Tooltip, cn } from "@vezham/react-v3";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/components/panel/menu/index.tsx
+var Menu = forwardRef((props, ref) => {
+	const navigate = useNavigate();
+	const { Component, getBaseProps, getScrollProps, getContainerProps, getItemProps, getIconWrapperProps, getIconProps, getTooltipTriggerProps, getTooltipContentProps, getLabelProps, getAlignProps, items, selectedKey, collapsed, onSelect } = useProps({
+		...props,
+		ref
+	});
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	const [currentSubmenu, setCurrentSubmenu] = useState([]);
+	const [currentTitle, setCurrentTitle] = useState("");
+	const [expandedItems, setExpandedItems] = useState(/* @__PURE__ */ new Set());
+	const handleItemClick = (item) => {
+		if (item.submenu && item.submenu.length > 0) {
+			setCurrentSubmenu(item.submenu);
+			setCurrentTitle(item.title);
+			setExpandedItems(/* @__PURE__ */ new Set());
+			setDrawerOpen(true);
+		} else if (item.href) {
+			onSelect?.(item.key);
+			navigate({ to: item.href });
+		}
+	};
+	const handlePressItem = (item) => {
+		handleItemClick(item);
+	};
+	const handleDrawerItemClick = (item) => {
+		if (item.submenu && item.submenu.length > 0) toggleExpandInDrawer(item.key);
+		else if (item.href) {
+			onSelect?.(item.key);
+			navigate({ to: item.href });
+			setDrawerOpen(false);
+		}
+	};
+	const toggleExpandInDrawer = (key) => {
+		const newExpanded = new Set(expandedItems);
+		if (newExpanded.has(key)) newExpanded.delete(key);
+		else newExpanded.add(key);
+		setExpandedItems(newExpanded);
+	};
+	const renderSubMenuItem = (item, depth) => {
+		const hasSubmenu = item.submenu && item.submenu.length > 0;
+		const isExpanded = expandedItems.has(item.key);
+		const paddingLeft = 12 + depth * 16;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => handleDrawerItemClick(item),
+			className: cn("flex w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent px-4 py-2.5 text-left transition-all duration-200", "hover:bg-default-100", !hasSubmenu && selectedKey === item.key && "bg-primary/10 text-primary"),
+			style: { paddingLeft: `${paddingLeft}px` },
+			children: [
+				item.icon && /* @__PURE__ */ jsx(AppIcon, {
+					icon: item.icon,
+					size: 18,
+					className: "text-default-600",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 text-sm font-medium",
+					children: item.title
+				}),
+				hasSubmenu && /* @__PURE__ */ jsx(AppIcon, {
+					icon: isExpanded ? "vx:chevron-down" : "vx:chevron-right",
+					size: 16,
+					className: "text-default-400 transition-transform duration-200",
+					"aria-hidden": "true"
+				})
+			]
+		}), hasSubmenu && isExpanded && /* @__PURE__ */ jsx("div", {
+			className: "mt-1 ml-4",
+			children: item.submenu?.map((subItem) => renderSubMenuItem(subItem, depth + 1))
+		})] }, item.key);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
+		...getBaseProps(),
+		children: /* @__PURE__ */ jsx(ScrollShadow, {
+			...getScrollProps(),
+			children: /* @__PURE__ */ jsx("div", {
+				...getContainerProps(),
+				children: items.map((item) => {
+					const isActive = selectedKey === item.key;
+					const iconName = isActive ? item.iconActive || item.icon : item.icon;
+					const iconProps = getIconProps({ isActive });
+					return /* @__PURE__ */ jsx("div", {
+						...getItemProps({
+							item,
+							isActive
+						}),
+						children: /* @__PURE__ */ jsxs("div", {
+							...getAlignProps(),
+							children: [/* @__PURE__ */ jsxs(Tooltip, {
+								delay: 0,
+								children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+									...getTooltipTriggerProps(),
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										...getIconWrapperProps(),
+										onClick: () => handlePressItem(item),
+										children: iconName ? /* @__PURE__ */ jsx(AppIcon, {
+											icon: iconName,
+											size: 20,
+											className: iconProps.className,
+											"data-active": iconProps["data-active"],
+											"aria-hidden": "true"
+										}) : null
+									})
+								}), collapsed && /* @__PURE__ */ jsx(Tooltip.Content, {
+									...getTooltipContentProps(),
+									children: item.title
+								})]
+							}), !collapsed && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								...getLabelProps({ isActive }),
+								onClick: () => handlePressItem(item),
+								children: item.title
+							})]
+						})
+					}, item.key);
+				})
+			})
+		})
+	}), /* @__PURE__ */ jsx(Drawer, {
+		isOpen: drawerOpen,
+		onOpenChange: setDrawerOpen,
+		children: /* @__PURE__ */ jsx(Drawer.Content, {
+			placement: "left",
+			children: /* @__PURE__ */ jsxs(Drawer.Dialog, {
+				className: "bg-black/5 backdrop-blur-sm md:translate-x-[106px]",
+				children: [
+					/* @__PURE__ */ jsx(Drawer.CloseTrigger, {}),
+					/* @__PURE__ */ jsx("div", {
+						className: "border-default-200 flex items-center justify-between border-b p-4",
+						children: /* @__PURE__ */ jsx(Drawer.Header, {
+							className: "text-lg font-semibold",
+							children: currentTitle
+						})
+					}),
+					/* @__PURE__ */ jsx(Drawer.Body, {
+						className: "p-2",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "space-y-1",
+							children: currentSubmenu.map((item) => renderSubMenuItem(item, 0))
+						})
+					})
+				]
+			})
+		})
+	})] });
+});
+Menu.displayName = "Menu";
+//#endregion
+export { Menu };