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

package/dist/lib/layouts/section/toolbar-more-sheet.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react';
+import { type SectionSort } from './sort-menu';
+import type { SectionAction, SectionFilterKey, SectionViewAction, SectionViewMode } from './toolbar';
+type Props = {
+    filterAction?: SectionAction;
+    filterGroups: readonly {
+        label: string;
+        options: readonly {
+            key: SectionFilterKey;
+            label: string;
+            icon: string;
+        }[];
+    }[];
+    menuActions: SectionAction[];
+    mobileToolbar?: ReactNode;
+    onSync: () => void;
+    onToggleFilter: (filter: SectionFilterKey) => void;
+    onViewModeChange: (view: SectionViewMode) => void;
+    selectedFilters: SectionFilterKey[];
+    sync: boolean;
+    sort: boolean;
+    sortValue: SectionSort;
+    onSortChange?: (value: SectionSort) => void;
+    viewModeActions: SectionViewAction[];
+};
+type MobileToolbarPage = {
+    key: string;
+    title: string;
+};
+type MobileToolbarNavigation = {
+    closeSheet: () => void;
+    page: MobileToolbarPage | null;
+    openPage: (page: MobileToolbarPage) => void;
+};
+export declare const useMobileToolbarNavigation: () => MobileToolbarNavigation;
+export declare const ToolbarMoreSheet: ({ filterAction, filterGroups, menuActions, mobileToolbar, onSync, onToggleFilter, onViewModeChange, selectedFilters, sync, sort, sortValue, onSortChange, viewModeActions }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=toolbar-more-sheet.d.ts.map

package/dist/lib/layouts/section/toolbar-more-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-more-sheet.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/toolbar-more-sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAcd,OAAO,EAAE,KAAK,WAAW,EAA8B,MAAM,aAAa,CAAA;AAC1E,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EAChB,MAAM,WAAW,CAAA;AAElB,KAAK,KAAK,GAAG;IACX,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B,YAAY,EAAE,SAAS;QACrB,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,SAAS;YAAE,GAAG,EAAE,gBAAgB,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,EAAE,CAAA;KAC3E,EAAE,CAAA;IACH,WAAW,EAAE,aAAa,EAAE,CAAA;IAC5B,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,cAAc,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAClD,gBAAgB,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IACjD,eAAe,EAAE,gBAAgB,EAAE,CAAA;IACnC,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,WAAW,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,eAAe,EAAE,iBAAiB,EAAE,CAAA;CACrC,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;CAC5C,CAAA;AAKD,eAAO,MAAM,0BAA0B,+BAOtC,CAAA;AAkOD,eAAO,MAAM,gBAAgB,GAAI,6KAc9B,KAAK,gCAoGP,CAAA"}

package/dist/lib/layouts/section/toolbar-more-sheet.js

@@ -0,0 +1,288 @@
+import { AppIcon } from "../../components/app-icon/index.js";
+import { MenuSheet } from "../../components/menu/sheet.js";
+import { sortDirections, sortFields } from "./sort-menu.js";
+import { createContext, useContext, useMemo, useState } from "react";
+import { Button, Label, Separator } from "@vezham/react-v3";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AltArrowLeft, AltArrowRight, CheckCircle, MenuDots, SortFromBottomToTop, SortFromTopToBottom } from "@vezham/icons-react";
+//#region src/lib/layouts/section/toolbar-more-sheet.tsx
+var MobileToolbarNavigationContext = createContext(null);
+var useMobileToolbarNavigation = () => {
+	const context = useContext(MobileToolbarNavigationContext);
+	if (!context) throw new Error("Mobile toolbar navigation requires ToolbarMoreSheet");
+	return context;
+};
+var actionClass = "h-auto min-h-11 w-full justify-start gap-3 rounded-lg px-3 py-2 text-start";
+var SheetFilters = ({ filterGroups, selectedFilters, onToggleFilter }) => {
+	const selectedFilterKeys = new Set(selectedFilters);
+	return filterGroups.map((group, index) => /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [
+			index > 0 && /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
+			/* @__PURE__ */ jsx(Label, {
+				className: "text-muted px-3 pt-2",
+				children: group.label
+			}),
+			group.options.map((option) => /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				className: actionClass,
+				"aria-pressed": selectedFilterKeys.has(option.key),
+				onPress: () => onToggleFilter(option.key),
+				children: [
+					/* @__PURE__ */ jsx(AppIcon, {
+						icon: option.icon,
+						size: 18,
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1",
+						children: option.label
+					}),
+					selectedFilterKeys.has(option.key) && /* @__PURE__ */ jsx(CheckCircle, {
+						size: 18,
+						"aria-hidden": "true",
+						weight: "filled"
+					})
+				]
+			}, option.key))
+		]
+	}, group.label));
+};
+var SheetSort = ({ sortValue, onSortChange }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsx(Label, {
+		className: "text-muted px-3 pt-2",
+		children: "Sort by"
+	}),
+	sortFields.map((option) => /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		className: actionClass,
+		"aria-pressed": sortValue.by === option.key,
+		onPress: () => onSortChange?.({
+			...sortValue,
+			by: option.key
+		}),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex-1",
+			children: option.label
+		}), sortValue.by === option.key && /* @__PURE__ */ jsx(CheckCircle, {
+			size: 18,
+			"aria-hidden": "true",
+			weight: "filled"
+		})]
+	}, option.key)),
+	/* @__PURE__ */ jsx(Separator, { className: "my-1" }),
+	/* @__PURE__ */ jsx(Label, {
+		className: "text-muted px-3 pt-2",
+		children: "Direction"
+	}),
+	sortDirections.map((option) => /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		className: actionClass,
+		"aria-pressed": sortValue.direction === option.key,
+		onPress: () => onSortChange?.({
+			...sortValue,
+			direction: option.key
+		}),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex-1",
+			children: option.label
+		}), sortValue.direction === option.key && /* @__PURE__ */ jsx(CheckCircle, {
+			size: 18,
+			"aria-hidden": "true",
+			weight: "filled"
+		})]
+	}, option.key))
+] });
+var getHomeSeparators = ({ sync, filterAction, sort, viewModeActions, menuActions, mobileToolbar }) => ({
+	afterMobile: Boolean(mobileToolbar && (sync || filterAction || sort || viewModeActions.length > 0 || menuActions.length > 0)),
+	beforeView: Boolean((filterAction || sort) && viewModeActions.length > 0),
+	beforeMenu: Boolean(menuActions.length > 0 && (sync || filterAction || sort || viewModeActions.length > 0))
+});
+var SheetHome = ({ sync, onSync, filterAction, sort, sortValue, viewModeActions, onViewModeChange, menuActions, mobileToolbar, setPage, renderActions }) => {
+	const separators = getHomeSeparators({
+		sync,
+		filterAction,
+		sort,
+		viewModeActions,
+		menuActions,
+		mobileToolbar
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		mobileToolbar,
+		separators.afterMobile && /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
+		sync && renderActions([{
+			key: "sync",
+			label: "Sync",
+			icon: "vx:refresh",
+			onAction: onSync
+		}]),
+		filterAction && /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			className: actionClass,
+			onPress: () => setPage("filter"),
+			children: [
+				/* @__PURE__ */ jsx(AppIcon, {
+					icon: filterAction.icon,
+					size: 18,
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1",
+					children: "Filter"
+				}),
+				/* @__PURE__ */ jsx(AltArrowRight, {
+					size: 18,
+					"aria-hidden": "true"
+				})
+			]
+		}),
+		sort && /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			className: actionClass,
+			onPress: () => setPage("sort"),
+			children: [
+				sortValue.direction === "ascending" ? /* @__PURE__ */ jsx(SortFromBottomToTop, {
+					size: 18,
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ jsx(SortFromTopToBottom, {
+					size: 18,
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1",
+					children: "Sort"
+				}),
+				/* @__PURE__ */ jsx(AltArrowRight, {
+					size: 18,
+					"aria-hidden": "true"
+				})
+			]
+		}),
+		separators.beforeView && /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
+		renderActions(viewModeActions.map((action) => ({
+			...action,
+			onAction: () => onViewModeChange(action.key)
+		}))),
+		separators.beforeMenu && /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
+		renderActions(menuActions)
+	] });
+};
+var SheetActions = ({ actions, path, setPath, run }) => actions.map((action) => /* @__PURE__ */ jsxs(Button, {
+	variant: "ghost",
+	className: actionClass,
+	onPress: () => action.children?.length ? setPath([...path, action]) : run(action.onAction),
+	children: [
+		/* @__PURE__ */ jsx(AppIcon, {
+			icon: action.icon,
+			size: 18,
+			"aria-hidden": "true"
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "flex-1",
+			children: action.label
+		}),
+		Boolean(action.children?.length) && /* @__PURE__ */ jsx(AltArrowRight, {
+			size: 18,
+			"aria-hidden": "true"
+		})
+	]
+}, action.key));
+var getSheetTitle = (mobilePage, page, current) => {
+	if (mobilePage) return mobilePage.title;
+	if (page === "filter") return "Filter";
+	if (page === "sort") return "Sort";
+	return current?.label ?? "More";
+};
+var ToolbarMoreSheet = ({ filterAction, filterGroups, menuActions, mobileToolbar, onSync, onToggleFilter, onViewModeChange, selectedFilters, sync, sort, sortValue, onSortChange, viewModeActions }) => {
+	const [open, setOpen] = useState(false);
+	const [page, setPage] = useState("home");
+	const [path, setPath] = useState([]);
+	const [mobilePage, setMobilePage] = useState(null);
+	const changeOpen = (value) => {
+		setOpen(value);
+		if (!value) {
+			setPage("home");
+			setPath([]);
+			setMobilePage(null);
+		}
+	};
+	const run = (action) => {
+		changeOpen(false);
+		action?.();
+	};
+	const current = path[path.length - 1];
+	const title = getSheetTitle(mobilePage, page, current);
+	const mobileToolbarNavigation = useMemo(() => ({
+		closeSheet: () => changeOpen(false),
+		page: mobilePage,
+		openPage: (nextPage) => {
+			setMobilePage(nextPage);
+			setPage("home");
+			setPath([]);
+		}
+	}), [mobilePage]);
+	const renderActions = (actions) => /* @__PURE__ */ jsx(SheetActions, {
+		actions,
+		path,
+		setPath,
+		run
+	});
+	return /* @__PURE__ */ jsx(MobileToolbarNavigationContext.Provider, {
+		value: mobileToolbarNavigation,
+		children: /* @__PURE__ */ jsx(MenuSheet, {
+			title: "Toolbar actions",
+			hideTitle: true,
+			isOpen: open,
+			onOpenChange: changeOpen,
+			trigger: /* @__PURE__ */ jsx(Button, {
+				isIconOnly: true,
+				variant: "ghost",
+				"aria-label": "More",
+				className: "h-9 w-9 min-w-9 rounded-full p-0",
+				children: /* @__PURE__ */ jsx(MenuDots, {
+					className: "rotate-90",
+					size: 18,
+					"aria-hidden": "true"
+				})
+			}),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [(page !== "home" || current || mobilePage) && /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					className: actionClass,
+					"aria-label": "Back to toolbar actions",
+					onPress: () => {
+						if (mobilePage) setMobilePage(null);
+						else if (current) setPath(path.slice(0, -1));
+						else setPage("home");
+					},
+					children: [/* @__PURE__ */ jsx(AltArrowLeft, {
+						size: 18,
+						"aria-hidden": "true"
+					}), title]
+				}), mobilePage ? mobileToolbar : page === "filter" ? /* @__PURE__ */ jsx(SheetFilters, {
+					filterGroups,
+					selectedFilters,
+					onToggleFilter
+				}) : page === "sort" ? /* @__PURE__ */ jsx(SheetSort, {
+					sortValue,
+					onSortChange
+				}) : current ? renderActions(current.children ?? []) : /* @__PURE__ */ jsx(SheetHome, {
+					sync,
+					onSync,
+					filterAction,
+					sort,
+					sortValue,
+					viewModeActions,
+					onViewModeChange,
+					menuActions,
+					mobileToolbar,
+					setPage,
+					renderActions
+				})]
+			}, `${page}:${mobilePage?.key ?? ""}:${path.map((action) => action.key).join(":")}`)
+		})
+	});
+};
+//#endregion
+export { ToolbarMoreSheet, useMobileToolbarNavigation };

package/dist/lib/layouts/section/toolbar.d.ts

@@ -0,0 +1,60 @@
+import { type ReactNode, type RefObject } from 'react';
+import type { AppNavigationItem } from '../../navigation';
+import { type SectionSort } from './sort-menu';
+export type SectionAction = {
+    key: string;
+    label: string;
+    icon: string;
+    onAction?: () => void;
+    children?: SectionAction[];
+};
+export type SectionSearch = {
+    value: string;
+    onChange: (value: string) => void;
+    onSearch?: () => void;
+    label?: string;
+    placeholder?: string;
+};
+export type SectionViewMode = 'grid' | 'list';
+export type SectionFilterKey = 'uploaded' | 'generated' | 'images' | 'documents' | 'spreadsheets' | 'presentations' | 'pdfs';
+export type SectionViewAction = {
+    key: SectionViewMode;
+    label: string;
+    icon: string;
+};
+type ToolbarSearch = SectionSearch & {
+    inputRef: RefObject<HTMLInputElement | null>;
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+};
+type Props = {
+    title: string;
+    tabs: AppNavigationItem[];
+    navigationControls: ReactNode;
+    isNavigationCollapsed?: boolean;
+    toolbar?: ReactNode;
+    mobileToolbar?: ReactNode;
+    search?: ToolbarSearch;
+    menuActions: SectionAction[];
+    primaryAction?: SectionAction;
+    onSync: () => void;
+    sync?: boolean;
+    filter?: boolean;
+    sort?: boolean;
+    sortValue?: SectionSort;
+    onSortChange?: (value: SectionSort) => void;
+    view?: SectionViewAction[];
+    selectedFilters: SectionFilterKey[];
+    onSelectedFiltersChange: (filters: SectionFilterKey[]) => void;
+    viewMode: SectionViewMode;
+    onViewModeChange: (viewMode: SectionViewMode) => void;
+    isMenuOpen: boolean;
+    onMenuOpenChange: (isOpen: boolean) => void;
+};
+declare const SectionActiveFilters: ({ selectedFilters, onSelectedFiltersChange }: {
+    selectedFilters: SectionFilterKey[];
+    onSelectedFiltersChange: (filters: SectionFilterKey[]) => void;
+}) => import("react").JSX.Element | null;
+declare const SectionToolbar: (props: Props) => import("react").JSX.Element;
+export { SectionActiveFilters, SectionToolbar };
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/lib/layouts/section/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/toolbar.tsx"],"names":[],"mappings":"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"}