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

package/dist/lib/layouts/section/toolbar.js

@@ -0,0 +1,518 @@
+import { AppIcon } from "../../components/app-icon/index.js";
+import "../../components/panel/responsive.js";
+import { useResponsiveToolbarAction } from "../../components/responsive-toolbar-action/index.js";
+import { ShortcutButton } from "../../components/shortcut-key/index.js";
+import { DEFAULT_SORT, SortMenu } from "./sort-menu.js";
+import { ToolbarMoreSheet } from "./toolbar-more-sheet.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button, Chip, CloseButton, Dropdown, Label, Popover, SearchField, Separator, Tabs, Tooltip, useMediaQuery } from "@vezham/react-v3";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { SortFromBottomToTop, SortFromTopToBottom } from "@vezham/icons-react";
+//#region src/lib/layouts/section/toolbar.tsx
+var iconButtonClassName = "h-9 w-9 min-w-9 p-0";
+var EMPTY_VIEW_ACTIONS = [];
+var FILTER_ACTION = {
+	key: "filter",
+	label: "Filter",
+	icon: "vx:sort-descending"
+};
+var sourceFilterOptions = [{
+	key: "uploaded",
+	label: "Uploaded",
+	icon: "vx:upload"
+}, {
+	key: "generated",
+	label: "Generated",
+	icon: "vx:pencil"
+}];
+var fileTypeFilterOptions = [
+	{
+		key: "images",
+		label: "Images",
+		icon: "vx:gallery"
+	},
+	{
+		key: "documents",
+		label: "Documents",
+		icon: "vx:document"
+	},
+	{
+		key: "spreadsheets",
+		label: "Spreadsheets",
+		icon: "vx:file-spreadsheet"
+	},
+	{
+		key: "presentations",
+		label: "Presentations",
+		icon: "vx:document"
+	},
+	{
+		key: "pdfs",
+		label: "PDFs",
+		icon: "vx:file-text"
+	}
+];
+var filterOptions = [...sourceFilterOptions, ...fileTypeFilterOptions];
+var getActiveFilters = (selectedFilters) => selectedFilters.flatMap((filter) => {
+	const option = filterOptions.find((option) => option.key === filter);
+	return option ? [option] : [];
+});
+var FilterMenuItem = ({ option, isSelected, onToggle }) => /* @__PURE__ */ jsxs(Dropdown.Item, {
+	id: option.key,
+	textValue: option.label,
+	shouldCloseOnSelect: false,
+	onPress: () => onToggle(option.key),
+	children: [/* @__PURE__ */ jsxs(Label, {
+		className: "flex items-center gap-3",
+		children: [/* @__PURE__ */ jsx(AppIcon, {
+			icon: option.icon,
+			size: 18,
+			"aria-hidden": "true"
+		}), option.label]
+	}), isSelected && /* @__PURE__ */ jsx(AppIcon, {
+		icon: "vx:check",
+		size: 18,
+		className: "ml-auto shrink-0",
+		"aria-hidden": "true"
+	})]
+});
+var FilterMenu = ({ selectedFilters, onToggle }) => /* @__PURE__ */ jsxs(Dropdown.Menu, {
+	"aria-label": "Filter options",
+	children: [
+		/* @__PURE__ */ jsx(Label, {
+			className: "text-muted-foreground px-3 pt-2",
+			children: "Source"
+		}),
+		/* @__PURE__ */ jsx(Dropdown.Section, {
+			"aria-label": "Source",
+			children: sourceFilterOptions.map((option) => /* @__PURE__ */ jsx(FilterMenuItem, {
+				option,
+				isSelected: selectedFilters.includes(option.key),
+				onToggle
+			}, option.key))
+		}),
+		/* @__PURE__ */ jsx(Separator, { className: "my-1" }),
+		/* @__PURE__ */ jsx(Label, {
+			className: "text-muted-foreground px-3 pt-1",
+			children: "File type"
+		}),
+		/* @__PURE__ */ jsx(Dropdown.Section, {
+			"aria-label": "File type",
+			children: fileTypeFilterOptions.map((option) => /* @__PURE__ */ jsx(FilterMenuItem, {
+				option,
+				isSelected: selectedFilters.includes(option.key),
+				onToggle
+			}, option.key))
+		})
+	]
+});
+var SectionActiveFilters = ({ selectedFilters, onSelectedFiltersChange }) => {
+	const activeFilters = getActiveFilters(selectedFilters);
+	if (activeFilters.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": "Active filters",
+		className: "flex min-w-0 flex-wrap items-center gap-2",
+		children: activeFilters.map((filter) => /* @__PURE__ */ jsxs(Chip, {
+			variant: "soft",
+			size: "lg",
+			className: "shrink-0 gap-1.5",
+			children: [/* @__PURE__ */ jsx(Chip.Label, { children: filter.label }), /* @__PURE__ */ jsx(CloseButton, {
+				"aria-label": `Remove ${filter.label} filter`,
+				className: "h-6 min-h-6 w-6 min-w-6 rounded-full p-0",
+				onPress: () => onSelectedFiltersChange(selectedFilters.filter((selected) => selected !== filter.key))
+			})]
+		}, filter.key))
+	});
+};
+var SectionActionLabel = ({ action }) => /* @__PURE__ */ jsxs(Label, {
+	className: "flex items-center gap-2",
+	children: [/* @__PURE__ */ jsx(AppIcon, {
+		icon: action.icon,
+		size: 16,
+		"aria-hidden": "true"
+	}), action.label]
+});
+var renderMenuItems = (actions) => actions.map((action) => action.children?.length ? /* @__PURE__ */ jsxs(Dropdown.SubmenuTrigger, { children: [/* @__PURE__ */ jsxs(Dropdown.Item, {
+	id: action.key,
+	textValue: action.label,
+	children: [/* @__PURE__ */ jsx(SectionActionLabel, { action }), /* @__PURE__ */ jsx(Dropdown.SubmenuIndicator, {})]
+}), /* @__PURE__ */ jsx(Dropdown.Popover, { children: /* @__PURE__ */ jsx(Dropdown.Menu, { children: renderMenuItems(action.children) }) })] }, action.key) : /* @__PURE__ */ jsx(Dropdown.Item, {
+	id: action.key,
+	textValue: action.label,
+	onPress: action.onAction,
+	children: /* @__PURE__ */ jsx(SectionActionLabel, { action })
+}, action.key));
+var MobileToolbarDropdown = ({ filterAction, menuActions, onSync, onToggleFilter, onViewModeChange, selectedFilters, sort, sortValue, onSortChange, sync, viewModeActions }) => /* @__PURE__ */ jsxs(Dropdown, { children: [/* @__PURE__ */ jsxs(Tooltip, {
+	delay: 0,
+	children: [/* @__PURE__ */ jsx(Button, {
+		isIconOnly: true,
+		variant: "ghost",
+		"aria-label": "More",
+		className: iconButtonClassName,
+		children: /* @__PURE__ */ jsx(AppIcon, {
+			icon: "vx:menu-vertical",
+			size: 18,
+			"aria-hidden": "true"
+		})
+	}), /* @__PURE__ */ jsx(Tooltip.Content, { children: "More" })]
+}), /* @__PURE__ */ jsx(Dropdown.Popover, {
+	className: "max-w-[calc(100vw-2rem)] min-w-48",
+	children: /* @__PURE__ */ jsxs(Dropdown.Menu, {
+		"aria-label": "More",
+		children: [
+			sync && /* @__PURE__ */ jsx(Dropdown.Item, {
+				id: "sync",
+				textValue: "Sync",
+				onPress: onSync,
+				children: /* @__PURE__ */ jsx(SectionActionLabel, { action: {
+					key: "sync",
+					label: "Sync",
+					icon: "vx:refresh"
+				} })
+			}),
+			filterAction && /* @__PURE__ */ jsxs(Dropdown.SubmenuTrigger, { children: [/* @__PURE__ */ jsxs(Dropdown.Item, {
+				id: "filter",
+				textValue: filterAction.label,
+				children: [/* @__PURE__ */ jsx(SectionActionLabel, { action: filterAction }), /* @__PURE__ */ jsx(Dropdown.SubmenuIndicator, {})]
+			}), /* @__PURE__ */ jsx(Dropdown.Popover, { children: /* @__PURE__ */ jsx(FilterMenu, {
+				selectedFilters,
+				onToggle: onToggleFilter
+			}) })] }),
+			sort && /* @__PURE__ */ jsxs(Dropdown.SubmenuTrigger, { children: [/* @__PURE__ */ jsxs(Dropdown.Item, {
+				id: "sort",
+				textValue: "Sort",
+				children: [
+					sortValue.direction === "ascending" ? /* @__PURE__ */ jsx(SortFromBottomToTop, {
+						size: 18,
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ jsx(SortFromTopToBottom, {
+						size: 18,
+						"aria-hidden": "true"
+					}),
+					"Sort",
+					/* @__PURE__ */ jsx(Dropdown.SubmenuIndicator, {})
+				]
+			}), /* @__PURE__ */ jsx(Dropdown.Popover, { children: /* @__PURE__ */ jsx(SortMenu, {
+				value: sortValue,
+				onChange: onSortChange
+			}) })] }),
+			(filterAction || sort) && viewModeActions.length > 0 && /* @__PURE__ */ jsx(Separator, {}),
+			viewModeActions.map((action) => /* @__PURE__ */ jsx(Dropdown.Item, {
+				id: action.key,
+				textValue: action.label,
+				onPress: () => onViewModeChange(action.key),
+				children: /* @__PURE__ */ jsx(SectionActionLabel, { action })
+			}, action.key)),
+			menuActions.length > 0 && viewModeActions.length > 0 && /* @__PURE__ */ jsx(Separator, {}),
+			renderMenuItems(menuActions)
+		]
+	})
+})] });
+var MobileToolbarMore = (props) => {
+	return useMediaQuery("(width < 640px)", { initializeWithValue: false }) || props.mobileToolbar ? /* @__PURE__ */ jsx(ToolbarMoreSheet, {
+		...props,
+		filterGroups: [{
+			label: "Source",
+			options: sourceFilterOptions
+		}, {
+			label: "File type",
+			options: fileTypeFilterOptions
+		}]
+	}) : /* @__PURE__ */ jsx(MobileToolbarDropdown, { ...props });
+};
+var SectionSearchField = ({ search }) => {
+	const label = search.label ?? "Search content";
+	const input = (isDesktop) => /* @__PURE__ */ jsx(SearchField, {
+		"aria-label": label,
+		value: search.value,
+		onChange: search.onChange,
+		className: isDesktop ? "hidden w-56 lg:block" : "w-56",
+		children: /* @__PURE__ */ jsxs(SearchField.Group, { children: [
+			/* @__PURE__ */ jsx(SearchField.SearchIcon, {}),
+			/* @__PURE__ */ jsx(SearchField.Input, {
+				ref: isDesktop ? search.inputRef : void 0,
+				placeholder: search.placeholder ?? "Search",
+				onKeyDown: (event) => {
+					if (event.key === "Enter") search.onSearch?.();
+					if (event.key === "Escape") search.onOpenChange?.(false);
+				}
+			}),
+			/* @__PURE__ */ jsx(SearchField.ClearButton, { "aria-label": `Clear ${label.toLowerCase()}` })
+		] })
+	});
+	if (search.onSearch) return /* @__PURE__ */ jsxs(Fragment, { children: [input(true), /* @__PURE__ */ jsxs(Tooltip, {
+		delay: 0,
+		children: [/* @__PURE__ */ jsx(Button, {
+			isIconOnly: true,
+			variant: "ghost",
+			size: "sm",
+			"aria-label": "Search",
+			className: `${iconButtonClassName} hidden md:flex lg:hidden`,
+			onPress: search.onSearch,
+			children: /* @__PURE__ */ jsx(AppIcon, {
+				icon: "vx:search",
+				size: 18,
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ jsx(Tooltip.Content, { children: "Search" })]
+	})] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [input(true), /* @__PURE__ */ jsxs(Popover, {
+		isOpen: search.isOpen,
+		onOpenChange: search.onOpenChange,
+		children: [/* @__PURE__ */ jsxs(Tooltip, {
+			delay: 0,
+			children: [/* @__PURE__ */ jsx(Button, {
+				isIconOnly: true,
+				variant: "ghost",
+				size: "sm",
+				"aria-label": "Search",
+				className: `${iconButtonClassName} hidden md:flex lg:hidden`,
+				children: /* @__PURE__ */ jsx(AppIcon, {
+					icon: "vx:search",
+					size: 18,
+					"aria-hidden": "true"
+				})
+			}), /* @__PURE__ */ jsx(Tooltip.Content, { children: "Search" })]
+		}), /* @__PURE__ */ jsx(Popover.Content, {
+			className: "hidden md:block",
+			children: /* @__PURE__ */ jsxs(Popover.Dialog, {
+				"aria-label": label,
+				children: [/* @__PURE__ */ jsx(Popover.Heading, {
+					className: "sr-only",
+					children: label
+				}), input(false)]
+			})
+		})]
+	})] });
+};
+var ToolbarActions = ({ search, toolbar, sync = true, onSync, filterAction, hasFilters, isMobile, isFilterMenuOpen, onFilterOpenChange, selectedFilters, onToggleFilter, sort = false, sortValue = DEFAULT_SORT, onSortChange, view: viewModeActions = EMPTY_VIEW_ACTIONS, viewMode, onViewModeChange, primaryAction, menuActions, isMenuOpen, onMenuOpenChange }) => /* @__PURE__ */ jsxs("div", {
+	role: "group",
+	"aria-label": "Toolbar actions",
+	className: "scrollbar-hide col-start-2 row-start-1 -m-1 hidden max-w-[calc(100vw-2rem)] min-w-0 items-center gap-2 overflow-x-auto p-1 md:flex",
+	children: [
+		search && /* @__PURE__ */ jsx(SectionSearchField, { search }),
+		sync && /* @__PURE__ */ jsx(ShortcutButton, {
+			label: "Sync",
+			shortcut: "⌘ R",
+			"aria-keyshortcuts": "Meta+R",
+			className: iconButtonClassName,
+			onPress: onSync,
+			children: /* @__PURE__ */ jsx(AppIcon, {
+				icon: "vx:refresh",
+				size: 18,
+				"aria-hidden": "true"
+			})
+		}),
+		toolbar,
+		filterAction && /* @__PURE__ */ jsxs(Dropdown, {
+			isOpen: !isMobile && isFilterMenuOpen,
+			onOpenChange: onFilterOpenChange,
+			children: [/* @__PURE__ */ jsxs(Tooltip, {
+				delay: 0,
+				children: [/* @__PURE__ */ jsx(Button, {
+					isIconOnly: true,
+					variant: hasFilters ? "secondary" : "ghost",
+					"aria-label": filterAction.label,
+					"aria-pressed": hasFilters,
+					className: `${iconButtonClassName} shrink-0 rounded-full`,
+					children: /* @__PURE__ */ jsx(AppIcon, {
+						icon: filterAction.icon,
+						size: 18,
+						"aria-hidden": "true"
+					})
+				}), /* @__PURE__ */ jsx(Tooltip.Content, { children: filterAction.label })]
+			}), /* @__PURE__ */ jsx(Dropdown.Popover, {
+				className: "hidden md:block",
+				children: /* @__PURE__ */ jsx(FilterMenu, {
+					selectedFilters,
+					onToggle: onToggleFilter
+				})
+			})]
+		}),
+		sort && /* @__PURE__ */ jsxs(Dropdown, { children: [/* @__PURE__ */ jsxs(Tooltip, {
+			delay: 0,
+			children: [/* @__PURE__ */ jsx(Button, {
+				isIconOnly: true,
+				variant: "ghost",
+				"aria-label": "Sort",
+				className: iconButtonClassName,
+				children: sortValue.direction === "ascending" ? /* @__PURE__ */ jsx(SortFromBottomToTop, {
+					size: 18,
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ jsx(SortFromTopToBottom, {
+					size: 18,
+					"aria-hidden": "true"
+				})
+			}), /* @__PURE__ */ jsx(Tooltip.Content, { children: "Sort" })]
+		}), /* @__PURE__ */ jsx(Dropdown.Popover, {
+			className: "hidden md:block",
+			children: /* @__PURE__ */ jsx(SortMenu, {
+				value: sortValue,
+				onChange: onSortChange
+			})
+		})] }),
+		viewModeActions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [(filterAction || sort) && /* @__PURE__ */ jsx(Separator, {
+			orientation: "vertical",
+			className: "h-8"
+		}), /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": "View options",
+			className: "flex items-center gap-1",
+			children: viewModeActions.map((action) => /* @__PURE__ */ jsxs(Tooltip, {
+				delay: 0,
+				children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(Button, {
+					isIconOnly: true,
+					"aria-label": action.label,
+					"aria-pressed": viewMode === action.key,
+					variant: viewMode === action.key ? "secondary" : "ghost",
+					className: iconButtonClassName,
+					onPress: () => onViewModeChange(action.key),
+					children: /* @__PURE__ */ jsx(AppIcon, {
+						icon: action.icon,
+						size: 18,
+						"aria-hidden": "true"
+					})
+				}) }), /* @__PURE__ */ jsx(Tooltip.Content, { children: action.label })]
+			}, action.key))
+		})] }),
+		primaryAction && /* @__PURE__ */ jsxs(Button, {
+			variant: "primary",
+			"aria-label": primaryAction.label,
+			className: "h-9 min-w-9 px-0 md:px-3",
+			onPress: primaryAction.onAction,
+			children: [/* @__PURE__ */ jsx(AppIcon, {
+				icon: primaryAction.icon,
+				size: 18,
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ jsx(Label, {
+				className: "hidden !text-inherit md:inline",
+				children: primaryAction.label
+			})]
+		}),
+		menuActions.length > 0 && /* @__PURE__ */ jsxs(Dropdown, {
+			isOpen: isMenuOpen,
+			onOpenChange: onMenuOpenChange,
+			children: [/* @__PURE__ */ jsxs(Tooltip, {
+				delay: 0,
+				children: [/* @__PURE__ */ jsx(Button, {
+					isIconOnly: true,
+					variant: "ghost",
+					"aria-label": "More",
+					onPress: () => onMenuOpenChange(true),
+					className: iconButtonClassName,
+					children: /* @__PURE__ */ jsx(AppIcon, {
+						icon: "vx:menu-vertical",
+						size: 18,
+						"aria-hidden": "true"
+					})
+				}), /* @__PURE__ */ jsx(Tooltip.Content, { children: "More" })]
+			}), /* @__PURE__ */ jsx(Dropdown.Popover, {
+				className: "hidden md:block",
+				children: /* @__PURE__ */ jsx(Dropdown.Menu, { children: renderMenuItems(menuActions) })
+			})]
+		})
+	]
+});
+var SectionToolbar = (props) => {
+	const { title, tabs, navigationControls, mobileToolbar, isNavigationCollapsed = false, menuActions, primaryAction, onSync, sync = true, filter = false, sort = false, sortValue = DEFAULT_SORT, onSortChange, view = EMPTY_VIEW_ACTIONS, selectedFilters, onSelectedFiltersChange, onViewModeChange, onMenuOpenChange } = props;
+	const isMobile = useMediaQuery("(max-width: 767px)");
+	const { setAction: setResponsiveToolbarAction } = useResponsiveToolbarAction();
+	const [isFilterMenuOpen, setIsFilterMenuOpen] = useState(false);
+	const [previousIsMobile, setPreviousIsMobile] = useState(isMobile);
+	if (previousIsMobile !== isMobile) {
+		setPreviousIsMobile(isMobile);
+		if (isMobile) setIsFilterMenuOpen(false);
+	}
+	const filterAction = filter ? FILTER_ACTION : void 0;
+	const viewModeActions = view;
+	const activeFilters = getActiveFilters(selectedFilters);
+	const toggleFilter = useCallback((filter) => {
+		onSelectedFiltersChange(selectedFilters.includes(filter) ? selectedFilters.filter((selected) => selected !== filter) : [...selectedFilters, filter]);
+	}, [onSelectedFiltersChange, selectedFilters]);
+	const hasFilters = activeFilters.length > 0;
+	const mobileToolbarAction = useMemo(() => isMobile ? /* @__PURE__ */ jsx(MobileToolbarMore, {
+		filterAction,
+		menuActions,
+		mobileToolbar,
+		onSync,
+		onToggleFilter: toggleFilter,
+		onViewModeChange,
+		selectedFilters,
+		sort,
+		sortValue,
+		onSortChange,
+		sync,
+		viewModeActions
+	}) : null, [
+		filterAction,
+		isMobile,
+		menuActions,
+		mobileToolbar,
+		onSync,
+		onViewModeChange,
+		selectedFilters,
+		sort,
+		sortValue,
+		onSortChange,
+		sync,
+		toggleFilter,
+		viewModeActions
+	]);
+	useEffect(() => {
+		setResponsiveToolbarAction(mobileToolbarAction);
+		return () => setResponsiveToolbarAction(null);
+	}, [mobileToolbarAction, setResponsiveToolbarAction]);
+	useEffect(() => {
+		if (!isMobile) return;
+		onMenuOpenChange(false);
+	}, [isMobile, onMenuOpenChange]);
+	return /* @__PURE__ */ jsxs("header", {
+		className: `bg-background sticky top-0 z-30 shrink-0 px-3 py-0 md:px-4 md:py-2 ${isNavigationCollapsed ? "md:pl-30" : ""}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 md:flex md:min-h-12 md:justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "contents sm:flex sm:min-w-0 sm:flex-1 sm:items-center sm:gap-1",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "col-start-1 row-start-1 hidden min-w-0 items-center gap-1 md:flex",
+					children: navigationControls
+				}), tabs.length > 0 && /* @__PURE__ */ jsx(Tabs.ListContainer, {
+					className: "scrollbar-hide col-span-2 row-start-2 mt-2 w-fit max-w-full min-w-0 justify-self-center overflow-x-auto rounded-full sm:mt-0 sm:max-w-fit sm:flex-1",
+					children: /* @__PURE__ */ jsx(Tabs.List, {
+						"aria-label": `${title} tabs`,
+						className: "flex min-w-max flex-nowrap *:whitespace-nowrap",
+						children: tabs.map((tab) => /* @__PURE__ */ jsxs(Tabs.Tab, {
+							id: tab.key,
+							className: "whitespace-nowrap",
+							children: [tab.title, /* @__PURE__ */ jsx(Tabs.Indicator, {})]
+						}, tab.key))
+					})
+				}, JSON.stringify(tabs.map((tab) => tab.key)))]
+			}), /* @__PURE__ */ jsx(ToolbarActions, {
+				...props,
+				isMobile,
+				filterAction,
+				hasFilters,
+				isFilterMenuOpen,
+				onFilterOpenChange: setIsFilterMenuOpen,
+				onToggleFilter: toggleFilter
+			})]
+		}), isMobile && primaryAction && /* @__PURE__ */ jsxs(Tooltip, {
+			delay: 0,
+			children: [/* @__PURE__ */ jsx(Button, {
+				isIconOnly: true,
+				variant: "primary",
+				"aria-label": primaryAction.label,
+				className: "fixed right-3 bottom-[calc(max(0.75rem,env(safe-area-inset-bottom))+0.5rem)] z-80 h-11 w-11 rounded-full p-0 shadow-lg",
+				onPress: primaryAction.onAction,
+				children: /* @__PURE__ */ jsx(AppIcon, {
+					icon: primaryAction.icon,
+					size: 22,
+					"aria-hidden": "true"
+				})
+			}), /* @__PURE__ */ jsx(Tooltip.Content, { children: primaryAction.label })]
+		})]
+	});
+};
+//#endregion
+export { SectionActiveFilters, SectionToolbar };

package/dist/lib/layouts/settings/index.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare const SettingsLayout: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/layouts/settings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/settings/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,eAAO,MAAM,cAAc,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,gCAEnE,CAAA"}

package/dist/lib/layouts/settings/index.js

@@ -0,0 +1,9 @@
+import { AppFrame } from "../app/frame.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/layouts/settings/index.tsx
+var SettingsLayout = ({ children }) => /* @__PURE__ */ jsx(AppFrame, {
+	contentClassName: "p-0 overflow-hidden",
+	children
+});
+//#endregion
+export { SettingsLayout };

package/dist/lib/navigation-toolbar.d.ts

@@ -0,0 +1,32 @@
+import { AppNavigationItem } from './navigation';
+export type NavigationAction = {
+    key: string;
+    label: string;
+    icon: string;
+    children?: NavigationAction[];
+};
+export type NavigationViewAction = {
+    key: 'grid' | 'list';
+    label: string;
+    icon: string;
+    enabled?: boolean;
+};
+export type NavigationToolbar = {
+    search?: boolean | {
+        label?: string;
+        placeholder?: string;
+    };
+    sync?: boolean;
+    filter?: boolean;
+    sort?: boolean;
+    view?: NavigationViewAction[];
+    menuActions?: NavigationAction[];
+    primaryAction?: false | NavigationAction;
+};
+export declare const getNavigationToolbar: (items: AppNavigationItem[], pathname: string) => Omit<NavigationToolbar, "search"> & {
+    search?: false | {
+        label?: string;
+        placeholder?: string;
+    };
+};
+//# sourceMappingURL=navigation-toolbar.d.ts.map

package/dist/lib/navigation-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-toolbar.d.ts","sourceRoot":"","sources":["../../src/lib/navigation-toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAErD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,OAAO,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,oBAAoB,EAAE,CAAA;IAC7B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAChC,aAAa,CAAC,EAAE,KAAK,GAAG,gBAAgB,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,oBAAoB,GAC/B,OAAO,iBAAiB,EAAE,EAC1B,UAAU,MAAM,KACf,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,GAAG;IACrC,MAAM,CAAC,EAAE,KAAK,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAgC1D,CAAA"}

package/dist/lib/navigation-toolbar.js

@@ -0,0 +1,29 @@
+//#region src/lib/navigation-toolbar.ts
+var getNavigationToolbar = (items, pathname) => {
+	let toolbar = {};
+	let matchLength = -1;
+	const visit = (entries, inherited) => {
+		for (const item of entries) {
+			const resolved = {
+				...inherited,
+				...item.toolbar
+			};
+			if (item.href && (pathname === item.href || item.href !== "/" && pathname.startsWith(`${item.href}/`)) && item.href.length >= matchLength) {
+				toolbar = resolved;
+				matchLength = item.href.length;
+			}
+			visit(item.children ?? [], resolved);
+		}
+	};
+	visit(items, {});
+	const { search, ...settings } = toolbar;
+	return {
+		...settings,
+		...search === true ? { search: {
+			label: "Search content",
+			placeholder: "Search"
+		} } : search === void 0 ? {} : { search }
+	};
+};
+//#endregion
+export { getNavigationToolbar };

package/dist/lib/navigation.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { NavigationToolbar } from './navigation-toolbar';
+export type AppNavigationItem = {
+    key: string;
+    title: string;
+    href?: string;
+    icon?: string;
+    iconActive?: string;
+    toolbar?: NavigationToolbar;
+    startContent?: ReactNode;
+    endContent?: ReactNode;
+    childrenDisplay?: 'tabs' | 'sidebar';
+    children?: AppNavigationItem[];
+    submenu?: AppNavigationItem[];
+    items?: AppNavigationItem[];
+    type?: 'nest';
+    isSelected?: boolean;
+};
+export declare const getSelectedMenuKey: (pathname: string, items: AppNavigationItem[]) => string | undefined;
+export declare const getNavigationPageKey: (items: AppNavigationItem[], pathname: string) => string;
+//# sourceMappingURL=navigation.d.ts.map

package/dist/lib/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/lib/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAE7D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC9B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC7B,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAoBD,eAAO,MAAM,kBAAkB,GAC7B,UAAU,MAAM,EAChB,OAAO,iBAAiB,EAAE,uBAY3B,CAAA;AAED,eAAO,MAAM,oBAAoB,GAC/B,OAAO,iBAAiB,EAAE,EAC1B,UAAU,MAAM,WAoBjB,CAAA"}

package/dist/lib/navigation.js

@@ -0,0 +1,39 @@
+//#region src/lib/navigation.ts
+var getMatchLength = (pathname, item) => {
+	const href = item.href;
+	const ownMatch = href && (pathname === href || href !== "/" && pathname.startsWith(`${href}/`)) ? href.length : 0;
+	return [
+		...item.children ?? [],
+		...item.submenu ?? [],
+		...item.items ?? []
+	].reduce((length, child) => Math.max(length, getMatchLength(pathname, child)), ownMatch);
+};
+var getSelectedMenuKey = (pathname, items) => {
+	let selectedKey;
+	let matchLength = 0;
+	for (const item of items) {
+		const length = getMatchLength(pathname, item);
+		if (length > matchLength) {
+			selectedKey = item.key;
+			matchLength = length;
+		}
+	}
+	return selectedKey;
+};
+var getNavigationPageKey = (items, pathname) => {
+	let key = "";
+	let matchLength = -1;
+	const visit = (entries) => {
+		for (const item of entries) {
+			if (item.href && (pathname === item.href || item.href !== "/" && pathname.startsWith(`${item.href}/`)) && item.href.length >= matchLength) {
+				key = item.key;
+				matchLength = item.href.length;
+			}
+			visit(item.children ?? []);
+		}
+	};
+	visit(items);
+	return key;
+};
+//#endregion
+export { getNavigationPageKey, getSelectedMenuKey };