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

package/dist/lib/components/command/command-provider.js

@@ -0,0 +1,44 @@
+import { CommandPaletteDialog } from "./command-dialog.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CommandContext } from "@vezham/hooks";
+//#region src/lib/components/command/command-provider.tsx
+var CommandProvider = ({ children, items }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const openCommand = useCallback(() => setIsOpen(true), []);
+	const closeCommand = useCallback(() => setIsOpen(false), []);
+	const toggleCommand = useCallback(() => {
+		setIsOpen((current) => !current);
+	}, []);
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.defaultPrevented || event.key.toLowerCase() !== "k" || !event.metaKey && !event.ctrlKey) return;
+			event.preventDefault();
+			openCommand();
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [openCommand]);
+	const value = useMemo(() => ({
+		isOpen,
+		openCommand,
+		closeCommand,
+		toggleCommand
+	}), [
+		closeCommand,
+		isOpen,
+		openCommand,
+		toggleCommand
+	]);
+	return /* @__PURE__ */ jsxs(CommandContext.Provider, {
+		value,
+		children: [children, /* @__PURE__ */ jsx(CommandPaletteDialog, {
+			isOpen,
+			items,
+			onAction: closeCommand,
+			onOpenChange: setIsOpen
+		})]
+	});
+};
+//#endregion
+export { CommandProvider };

package/dist/lib/components/command/index.d.ts

@@ -0,0 +1,3 @@
+export * from './command-provider';
+export { useCommand } from '@vezham/hooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/command/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA"}

package/dist/lib/components/command/index.js

@@ -0,0 +1,3 @@
+import "./command-provider.js";
+import { useCommand } from "@vezham/hooks";
+export { useCommand };

package/dist/lib/components/menu/drawer.d.ts

@@ -0,0 +1,4 @@
+import { MenuDrawerProps } from './types';
+declare const MenuDrawer: ({ items, selectedKey, onItemSelect, isOpen, onClose, isDarkMode, buttonTextColor }: MenuDrawerProps) => import("react").JSX.Element;
+export { MenuDrawer };
+//# sourceMappingURL=drawer.d.ts.map

package/dist/lib/components/menu/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menu/drawer.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAOzC,QAAA,MAAM,UAAU,GAAI,oFAQjB,eAAe,gCAuDjB,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/lib/components/menu/drawer.js

@@ -0,0 +1,56 @@
+import { AppIcon } from "../app-icon/index.js";
+import { MenuSheet } from "./sheet.js";
+import { getDrawerButtonClasses, getDrawerItemInnerClasses, getDrawerListClasses } from "./variant.js";
+import { useEffect, useEffectEvent } from "react";
+import { Button } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/components/menu/drawer.tsx
+var MenuDrawer = ({ items, selectedKey, onItemSelect, isOpen, onClose, isDarkMode = false, buttonTextColor }) => {
+	const closeOnResize = useEffectEvent(() => {
+		if (isOpen) onClose();
+	});
+	useEffect(() => {
+		const handleResize = () => closeOnResize();
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
+	return /* @__PURE__ */ jsx(MenuSheet, {
+		title: "More navigation",
+		hideTitle: true,
+		isDarkMode,
+		isOpen,
+		onOpenChange: (open) => !open && onClose(),
+		children: /* @__PURE__ */ jsx("ul", {
+			className: getDrawerListClasses(),
+			children: items.map((item) => /* @__PURE__ */ jsx("li", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					"aria-current": selectedKey === item.key ? "page" : void 0,
+					onPress: () => {
+						onItemSelect(item);
+						onClose();
+					},
+					className: getDrawerButtonClasses({
+						isSelected: selectedKey === item.key,
+						isDarkMode
+					}),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: getDrawerItemInnerClasses(buttonTextColor ?? ""),
+						children: [item.icon && /* @__PURE__ */ jsx(AppIcon, {
+							icon: selectedKey === item.key ? item.iconActive || item.icon : item.icon,
+							className: "h-5 w-5 shrink-0",
+							size: "1em",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 wrap-anywhere whitespace-normal",
+							children: item.title
+						})]
+					})
+				})
+			}, item.key))
+		})
+	});
+};
+//#endregion
+export { MenuDrawer };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BottomNavbarProps } from './types';
+declare const BottomNavbar: React.FC<BottomNavbarProps>;
+export { BottomNavbar };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menu/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAW3D,OAAO,EAAE,iBAAiB,EAAgC,MAAM,SAAS,CAAA;AA4BzE,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoJ7C,CAAA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

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

@@ -0,0 +1,138 @@
+"use client";
+import { AppIcon } from "../app-icon/index.js";
+import { getSelectedMenuKey } from "../../navigation.js";
+import { getNavbarButtonClasses, getNavbarContainerClasses, getNavbarIconClasses, getNavbarMenuContainerClasses, getSearchButtonClasses } from "./variant.js";
+import { MenuDrawer } from "./drawer.js";
+import { SidebarItemType } from "./types.js";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+import { useEffect, useMemo, useState } from "react";
+import { Button, useOverlayState } from "@vezham/react-v3";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Magnifier, MenuDots } from "@vezham/icons-react";
+//#region src/lib/components/menu/index.tsx
+var flattenMenuItems = (menuItems = []) => {
+	const flatList = [];
+	menuItems.forEach((item) => {
+		if (item.type === SidebarItemType.Nest && Array.isArray(item.items)) {
+			flatList.push({ ...item });
+			item.items.forEach((child) => {
+				flatList.push({ ...child });
+			});
+		} else flatList.push(item);
+	});
+	return flatList;
+};
+var EMPTY_ITEMS = [];
+var BottomNavbar = ({ items = EMPTY_ITEMS, onSelect, isDarkMode = false, bgColorClass, showSearch = false, hasPrimaryAction = false, onSearch, textColorClass, buttonTextColor }) => {
+	const navigate = useNavigate();
+	const location = useLocation();
+	const flatItems = useMemo(() => flattenMenuItems(items), [items]);
+	const activeKey = getSelectedMenuKey(location.pathname, flatItems) ?? "";
+	const { isOpen, open: onOpen, close: onClose } = useOverlayState();
+	const [mainVisibleCount, setMainVisibleCount] = useState(flatItems.length);
+	useEffect(() => {
+		const handleResize = () => {
+			const screenWidth = window.innerWidth;
+			let visibleCount = 7;
+			if (screenWidth < 767) {
+				if (screenWidth < 700) visibleCount = Math.min(flatItems.length, 6);
+				if (screenWidth < 650) visibleCount = Math.min(flatItems.length, 5);
+				if (screenWidth < 540) visibleCount = Math.min(flatItems.length, 4);
+				if (screenWidth < 460) visibleCount = Math.min(flatItems.length, 3);
+				if (screenWidth < 380) visibleCount = Math.min(flatItems.length, 2);
+				if (screenWidth < 300) visibleCount = 1;
+			}
+			setMainVisibleCount(visibleCount);
+		};
+		window.addEventListener("resize", handleResize);
+		handleResize();
+		return () => window.removeEventListener("resize", handleResize);
+	}, [flatItems.length]);
+	const showMoreButton = mainVisibleCount < flatItems.length;
+	const mainItems = useMemo(() => {
+		const count = showMoreButton ? mainVisibleCount : flatItems.length;
+		return flatItems.slice(0, count);
+	}, [
+		flatItems,
+		mainVisibleCount,
+		showMoreButton
+	]);
+	const moreItems = useMemo(() => {
+		return showMoreButton ? flatItems.slice(mainVisibleCount) : [];
+	}, [
+		flatItems,
+		mainVisibleCount,
+		showMoreButton
+	]);
+	const handleItemSelect = (item) => {
+		onSelect?.(item.key);
+		if (item.href) navigate({ to: item.href });
+	};
+	if (flatItems.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: `${getNavbarContainerClasses({
+			bgColorClass,
+			isDarkMode
+		})} cursor-pointer justify-between`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: getNavbarMenuContainerClasses({ isDarkMode }),
+			children: [mainItems.map((item) => {
+				const isActive = activeKey === item.key;
+				const iconName = isActive ? item.iconActive || item.icon : item.icon;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => handleItemSelect(item),
+					className: getNavbarButtonClasses({
+						isSelected: isActive,
+						isDarkMode,
+						textColorClass
+					}),
+					children: [iconName && /* @__PURE__ */ jsx(AppIcon, {
+						size: 20,
+						icon: iconName,
+						className: getNavbarIconClasses({
+							isSelected: isActive,
+							isDarkMode
+						}),
+						"aria-hidden": "true"
+					}), item.title]
+				}, item.key);
+			}), showMoreButton && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: onOpen,
+				className: getNavbarButtonClasses({
+					isDarkMode,
+					textColorClass
+				}),
+				children: [/* @__PURE__ */ jsx(MenuDots, {
+					size: 20,
+					className: getNavbarIconClasses({ isDarkMode }),
+					"aria-hidden": "true"
+				}), "More"]
+			})]
+		}), showSearch && /* @__PURE__ */ jsx(Button, {
+			"aria-label": "Search",
+			className: getSearchButtonClasses({
+				isDarkMode,
+				hasPrimaryAction
+			}),
+			variant: "ghost",
+			onPress: onSearch,
+			children: /* @__PURE__ */ jsx(Magnifier, {
+				className: "m-auto h-5 w-5",
+				size: "1em",
+				"aria-hidden": "true"
+			})
+		})]
+	}), /* @__PURE__ */ jsx(MenuDrawer, {
+		items: moreItems,
+		selectedKey: activeKey,
+		onItemSelect: handleItemSelect,
+		isOpen,
+		onClose,
+		isDarkMode,
+		buttonTextColor
+	})] });
+};
+//#endregion
+export { BottomNavbar };

package/dist/lib/components/menu/sheet.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement, ReactNode } from 'react';
+type Props = {
+    title: string;
+    hideTitle?: boolean;
+    isDarkMode?: boolean;
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    trigger?: ReactElement<{
+        onPress?: () => void;
+    }>;
+    children: ReactNode;
+};
+export declare const MenuSheet: ({ title, hideTitle, isDarkMode, isOpen, onOpenChange, trigger, children }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=sheet.d.ts.map

package/dist/lib/components/menu/sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menu/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIpD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,EAAE,OAAO,CAAA;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,YAAY,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAA;IAChD,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,2EAQvB,KAAK,gCAiCP,CAAA"}

package/dist/lib/components/menu/sheet.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Sheet } from "@vezham/react-pro-v3";
+//#region src/lib/components/menu/sheet.tsx
+var MenuSheet = ({ title, hideTitle = false, isDarkMode = false, isOpen, onOpenChange, trigger, children }) => /* @__PURE__ */ jsxs(Sheet, {
+	isOpen,
+	onOpenChange,
+	placement: "bottom",
+	isHandleOnly: true,
+	shouldAutoFocus: true,
+	children: [trigger && /* @__PURE__ */ jsx(Sheet.Trigger, { children: trigger }), /* @__PURE__ */ jsx(Sheet.Backdrop, {
+		variant: "blur",
+		className: "bg-overlay/10 z-80 backdrop-blur-xs",
+		children: /* @__PURE__ */ jsx(Sheet.Content, {
+			className: "mx-auto max-h-[85dvh] w-full max-w-sm",
+			children: /* @__PURE__ */ jsxs(Sheet.Dialog, {
+				className: `bg-surface/90 border-border relative flex max-h-[85dvh] flex-col overflow-hidden rounded-t-[1.75rem] border shadow-2xl backdrop-blur-2xl ${isDarkMode ? "dark" : ""}`,
+				children: [
+					/* @__PURE__ */ jsx(Sheet.Handle, {}),
+					/* @__PURE__ */ jsx(Sheet.CloseTrigger, { "aria-label": `Close ${title}` }),
+					hideTitle ? /* @__PURE__ */ jsx(Sheet.Heading, {
+						className: "sr-only",
+						children: title
+					}) : /* @__PURE__ */ jsx(Sheet.Header, {
+						className: "px-4 pt-0 pb-2",
+						children: /* @__PURE__ */ jsx(Sheet.Heading, {
+							className: "text-base font-semibold",
+							children: title
+						})
+					}),
+					/* @__PURE__ */ jsx(Sheet.Body, {
+						className: `max-h-[calc(85dvh-6rem)] min-h-0 overflow-x-hidden overflow-y-auto overscroll-contain px-4 pb-[max(1rem,env(safe-area-inset-bottom))] ${hideTitle ? "pt-6" : "pt-2"}`,
+						children
+					})
+				]
+			})
+		})
+	})]
+});
+//#endregion
+export { MenuSheet };

package/dist/lib/components/menu/types.d.ts

@@ -0,0 +1,30 @@
+import type { AppNavigationItem } from '../../navigation';
+export declare enum SidebarItemType {
+    Nest = "nest"
+}
+export type SidebarItem = Omit<AppNavigationItem, 'items' | 'type'> & {
+    items?: SidebarItem[];
+    type?: 'nest';
+};
+export interface BottomNavbarProps {
+    items: SidebarItem[];
+    selectedKey: string;
+    onSelect: (key: string) => void;
+    isDarkMode?: boolean;
+    showSearch?: boolean;
+    hasPrimaryAction?: boolean;
+    onSearch?: () => void;
+    bgColorClass?: string;
+    textColorClass?: string;
+    buttonTextColor?: string;
+}
+export type MenuDrawerProps = {
+    items: SidebarItem[];
+    selectedKey: string;
+    onItemSelect: (item: SidebarItem) => void;
+    isOpen: boolean;
+    onClose: () => void;
+    isDarkMode?: boolean;
+    buttonTextColor?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/components/menu/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,oBAAY,eAAe;IACzB,IAAI,SAAS;CACd;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACpE,KAAK,CAAC,EAAE,WAAW,EAAE,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACzC,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA"}

package/dist/lib/components/menu/types.js

@@ -0,0 +1,7 @@
+//#region src/lib/components/menu/types.ts
+var SidebarItemType = /* @__PURE__ */ function(SidebarItemType) {
+	SidebarItemType["Nest"] = "nest";
+	return SidebarItemType;
+}({});
+//#endregion
+export { SidebarItemType };

package/dist/lib/components/menu/variant.d.ts

@@ -0,0 +1,27 @@
+export declare const getNavbarContainerClasses: ({ bgColorClass, isDarkMode }: {
+    bgColorClass?: string;
+    isDarkMode?: boolean;
+}) => string;
+export declare const getNavbarMenuContainerClasses: ({ isDarkMode }: {
+    isDarkMode?: boolean;
+}) => string;
+export declare const getNavbarButtonClasses: ({ isSelected, textColorClass, isDarkMode }: {
+    isSelected?: boolean;
+    textColorClass?: string;
+    isDarkMode?: boolean;
+}) => string;
+export declare const getNavbarIconClasses: ({ isSelected, isDarkMode }: {
+    isSelected?: boolean;
+    isDarkMode?: boolean;
+}) => string;
+export declare const getSearchButtonClasses: ({ isDarkMode, hasPrimaryAction }: {
+    isDarkMode?: boolean;
+    hasPrimaryAction?: boolean;
+}) => string;
+export declare const getDrawerButtonClasses: ({ isSelected, isDarkMode }: {
+    isSelected?: boolean;
+    isDarkMode?: boolean;
+}) => string;
+export declare const getDrawerListClasses: () => string;
+export declare const getDrawerItemInnerClasses: (buttonTextColor: string) => string;
+//# sourceMappingURL=variant.d.ts.map

package/dist/lib/components/menu/variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menu/variant.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,yBAAyB,GAAI,8BAGvC;IACD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,KAAG,MASH,CAAA;AAED,eAAO,MAAM,6BAA6B,GAAI,gBAE3C;IACD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,KAAG,MAQH,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,4CAIpC;IACD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,KAAG,MASH,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,4BAGlC;IACD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,KAAG,MAQH,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,kCAGpC;IACD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,KAAG,MAWH,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,4BAGpC;IACD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,KAAG,MAQH,CAAA;AAED,eAAO,MAAM,oBAAoB,QAAO,MAEvC,CAAA;AAED,eAAO,MAAM,yBAAyB,GAAI,iBAAiB,MAAM,KAAG,MAEnE,CAAA"}

package/dist/lib/components/menu/variant.js

@@ -0,0 +1,28 @@
+import { cn } from "@vezham/react-v3";
+//#region src/lib/components/menu/variant.ts
+var getNavbarContainerClasses = ({ bgColorClass = "", isDarkMode = false }) => {
+	return cn("pointer-events-none fixed bottom-0 z-75 flex w-full md:hidden", "pt-4 pr-20 pb-[max(0.75rem,env(safe-area-inset-bottom))] pl-3", bgColorClass, isDarkMode ? "dark" : "") ?? "";
+};
+var getNavbarMenuContainerClasses = ({ isDarkMode = false }) => {
+	return cn("pointer-events-auto flex inline-flex items-center gap-4 rounded-full p-2 px-4 shadow-xl", "bg-surface backdrop-blur-md", isDarkMode ? "dark" : "") ?? "";
+};
+var getNavbarButtonClasses = ({ isSelected = false, textColorClass = "text-muted", isDarkMode = false }) => {
+	return cn("flex flex-col items-center gap-2 text-xs font-medium transition-colors duration-200 focus:outline-none", isSelected ? "text-foreground font-medium" : textColorClass, "hover:text-foreground", isDarkMode ? "dark" : "") ?? "";
+};
+var getNavbarIconClasses = ({ isSelected = false, isDarkMode = false }) => {
+	return cn(isSelected ? "text-foreground" : "text-muted", "group-hover:text-foreground", isDarkMode ? "dark" : "") ?? "";
+};
+var getSearchButtonClasses = ({ isDarkMode = false, hasPrimaryAction = false }) => {
+	return cn("pointer-events-auto fixed right-3 flex h-11 w-11 items-center justify-center rounded-full shadow-xl", hasPrimaryAction ? "bottom-[calc(max(0.75rem,env(safe-area-inset-bottom))+4.25rem)]" : "bottom-[calc(max(0.75rem,env(safe-area-inset-bottom))+0.5rem)]", "bg-surface text-muted hover:bg-surface-secondary backdrop-blur-md", isDarkMode ? "dark" : "") ?? "";
+};
+var getDrawerButtonClasses = ({ isSelected = false, isDarkMode = false }) => {
+	return cn("h-auto min-h-11 w-full min-w-0 justify-start rounded-lg px-3 py-3 text-start text-sm transition-none", isSelected ? "bg-accent/10 text-accent font-semibold" : "text-muted", isDarkMode ? "dark" : "") ?? "";
+};
+var getDrawerListClasses = () => {
+	return cn("flex min-w-0 flex-col gap-1") ?? "";
+};
+var getDrawerItemInnerClasses = (buttonTextColor) => {
+	return cn("flex w-full min-w-0 items-center gap-3", buttonTextColor) ?? "";
+};
+//#endregion
+export { getDrawerButtonClasses, getDrawerItemInnerClasses, getDrawerListClasses, getNavbarButtonClasses, getNavbarContainerClasses, getNavbarIconClasses, getNavbarMenuContainerClasses, getSearchButtonClasses };

package/dist/lib/components/mobile-controls/index.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+type MobileControlsContextValue = {
+    isFooterHidden: boolean;
+    setIsFooterHidden: (isHidden: boolean) => void;
+};
+export declare const MobileControlsProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const useMobileControls: () => MobileControlsContextValue;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/mobile-controls/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/mobile-controls/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAEd,KAAK,0BAA0B,GAAG;IAChC,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;CAC/C,CAAA;AAOD,eAAO,MAAM,sBAAsB,GAAI,cAEpC;IACD,QAAQ,EAAE,SAAS,CAAA;CACpB,gCAeA,CAAA;AAED,eAAO,MAAM,iBAAiB,kCAA0C,CAAA"}

package/dist/lib/components/mobile-controls/index.js

@@ -0,0 +1,21 @@
+import { createContext, useContext, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/components/mobile-controls/index.tsx
+var MobileControlsContext = createContext({
+	isFooterHidden: false,
+	setIsFooterHidden: () => void 0
+});
+var MobileControlsProvider = ({ children }) => {
+	const [isFooterHidden, setIsFooterHidden] = useState(false);
+	const value = useMemo(() => ({
+		isFooterHidden,
+		setIsFooterHidden
+	}), [isFooterHidden]);
+	return /* @__PURE__ */ jsx(MobileControlsContext.Provider, {
+		value,
+		children
+	});
+};
+var useMobileControls = () => useContext(MobileControlsContext);
+//#endregion
+export { MobileControlsProvider, useMobileControls };

package/dist/lib/components/pagination/index.d.ts

@@ -0,0 +1,10 @@
+import type { Dispatch, SetStateAction } from 'react';
+type Props = {
+    className?: string;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: Dispatch<SetStateAction<number>>;
+};
+export declare const PaginationControls: ({ className, currentPage, totalPages, onPageChange }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAIrD,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,sDAKhC,KAAK,gCA4BP,CAAA"}

package/dist/lib/components/pagination/index.js

@@ -0,0 +1,25 @@
+import { Pagination } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/components/pagination/index.tsx
+var PaginationControls = ({ className, currentPage, totalPages, onPageChange }) => /* @__PURE__ */ jsxs(Pagination.Content, {
+	className,
+	children: [
+		/* @__PURE__ */ jsx(Pagination.Item, { children: /* @__PURE__ */ jsxs(Pagination.Previous, {
+			isDisabled: currentPage <= 1,
+			onPress: () => onPageChange((value) => Math.max(1, value - 1)),
+			children: [/* @__PURE__ */ jsx(Pagination.PreviousIcon, {}), /* @__PURE__ */ jsx("span", { children: "Prev" })]
+		}) }),
+		Array.from({ length: totalPages }, (_, index) => index + 1).map((item) => /* @__PURE__ */ jsx(Pagination.Item, { children: /* @__PURE__ */ jsx(Pagination.Link, {
+			isActive: item === currentPage,
+			onPress: () => onPageChange(item),
+			children: item
+		}) }, item)),
+		/* @__PURE__ */ jsx(Pagination.Item, { children: /* @__PURE__ */ jsxs(Pagination.Next, {
+			isDisabled: currentPage >= totalPages,
+			onPress: () => onPageChange((value) => Math.min(totalPages, value + 1)),
+			children: [/* @__PURE__ */ jsx("span", { children: "Next" }), /* @__PURE__ */ jsx(Pagination.NextIcon, {})]
+		}) })
+	]
+});
+//#endregion
+export { PaginationControls };

package/dist/lib/components/panel/footer/ai/chat-header.d.ts

@@ -0,0 +1,9 @@
+import type { Conversation } from './conversation';
+type Props = {
+    conversation: Conversation;
+    expanded?: boolean;
+    onExpand?: () => void;
+};
+export declare const ChatHeader: ({ conversation, expanded, onExpand }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=chat-header.d.ts.map

package/dist/lib/components/panel/footer/ai/chat-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-header.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/ai/chat-header.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAElD,KAAK,KAAK,GAAG;IACX,YAAY,EAAE,YAAY,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AACD,eAAO,MAAM,UAAU,GAAI,sCAAsC,KAAK,gCAmDrE,CAAA"}

package/dist/lib/components/panel/footer/ai/chat-header.js

@@ -0,0 +1,63 @@
+import { Button, Dropdown } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AddCircle, AltArrowDown, Maximize, Minimize } from "@vezham/icons-react";
+//#region src/lib/components/panel/footer/ai/chat-header.tsx
+var ChatHeader = ({ conversation, expanded, onExpand }) => /* @__PURE__ */ jsxs("nav", {
+	"aria-label": "Chat navigation",
+	className: "flex min-w-0 shrink-0 items-center gap-1",
+	children: [
+		/* @__PURE__ */ jsxs(Dropdown, { children: [/* @__PURE__ */ jsxs(Dropdown.Trigger, {
+			"aria-label": "Choose a chat",
+			className: "button button--ghost button--sm flex w-auto min-w-0 shrink flex-row flex-nowrap items-center justify-start gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate text-start",
+				children: conversation.title
+			}), /* @__PURE__ */ jsx(AltArrowDown, {
+				className: "shrink-0",
+				size: 14,
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ jsx(Dropdown.Popover, {
+			className: "w-72",
+			children: /* @__PURE__ */ jsx(Dropdown.Menu, {
+				"aria-label": "Recent chats",
+				onAction: (key) => conversation.openChat(String(key)),
+				children: conversation.threads.map((thread) => /* @__PURE__ */ jsx(Dropdown.Item, {
+					id: thread.id,
+					textValue: thread.title,
+					children: /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: thread.title
+					})
+				}, thread.id))
+			})
+		})] }),
+		/* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			className: "shrink-0",
+			"aria-label": "New chat",
+			onPress: conversation.newChat,
+			children: /* @__PURE__ */ jsx(AddCircle, {
+				size: 18,
+				"aria-hidden": "true"
+			})
+		}),
+		onExpand && /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			className: "ml-auto shrink-0",
+			"aria-label": expanded ? "Collapse assistant" : "Expand assistant",
+			onPress: onExpand,
+			children: expanded ? /* @__PURE__ */ jsx(Minimize, {
+				size: 18,
+				"aria-hidden": "true"
+			}) : /* @__PURE__ */ jsx(Maximize, {
+				size: 18,
+				"aria-hidden": "true"
+			})
+		})
+	]
+});
+//#endregion
+export { ChatHeader };

package/dist/lib/components/panel/footer/ai/composer.d.ts

@@ -0,0 +1,7 @@
+import type { Conversation } from './conversation';
+type Props = {
+    conversation: Conversation;
+};
+export declare const Composer: ({ conversation: c }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=composer.d.ts.map

package/dist/lib/components/panel/footer/ai/composer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/ai/composer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAIlD,KAAK,KAAK,GAAG;IAAE,YAAY,EAAE,YAAY,CAAA;CAAE,CAAA;AAC3C,eAAO,MAAM,QAAQ,GAAI,qBAAqB,KAAK,gCAuFlD,CAAA"}