@vezham/react 26.0.0-alpha.9 → 26.0.0-beta.1

package/dist/lib/pages/settings/tile-gallery.js

@@ -1,12 +1,17 @@
-import { useId, useState } from "react";
+import { controlCenterVariants } from "../../components/panel/footer/control-center/variant.js";
+import { notificationCenterWidgetVariants } from "../../components/panel/footer/notification-center/widget-tiles.js";
+import { Fragment, useId, useState } from "react";
 import { Button, Drawer, SearchField, Surface, Tooltip } from "@vezham/react-v3";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Add, AltArrowLeft, Minus, Settings, Sidebar } from "@vezham/icons-react";
 //#region src/lib/pages/settings/tile-gallery.tsx
+var controlCenterStyles = controlCenterVariants();
+var widgetStyles = notificationCenterWidgetVariants();
+var controlSpan = (shape) => shape;
+var widgetSize = (shape) => shape;
 var useGallery = ({ kind, tiles, editor }) => {
 	const dragInstructionsId = useId();
 	const [draggedId, setDraggedId] = useState(null);
-	const [draggedHeight, setDraggedHeight] = useState(0);
 	const [dropTarget, setDropTarget] = useState(null);
 	const [announcement, setAnnouncement] = useState("");
 	const [query, setQuery] = useState("");
@@ -18,19 +23,43 @@ var useGallery = ({ kind, tiles, editor }) => {
 	const categories = ["All", ...new Set(tiles.map((tile) => tile.category))];
 	const matchingTiles = tiles.filter((tile) => `${tile.label} ${tile.category}`.toLowerCase().includes(normalizedQuery));
 	const matchingCategories = [...new Set(matchingTiles.map((tile) => tile.category))];
-	const available = tiles.filter((tile) => `${tile.label} ${tile.category}`.toLowerCase().includes(normalizedQuery) && (category === "All" || tile.category === category));
+	const availableTiles = tiles.filter((tile) => `${tile.label} ${tile.category}`.toLowerCase().includes(normalizedQuery) && (category === "All" || tile.category === category));
+	const seenSuggestionGroups = /* @__PURE__ */ new Set();
+	const available = availableTiles.filter((tile) => {
+		const group = tile.suggestionGroup ?? tile.id;
+		if (seenSuggestionGroups.has(group)) return false;
+		seenSuggestionGroups.add(group);
+		return true;
+	}).flatMap((tile) => tile.suggestionShapes ? tile.suggestionShapes.map((shape) => ({
+		...tile,
+		shape,
+		preview: tile.suggestionPreview?.(shape) ?? tile.preview,
+		suggestionKey: `${tile.id}:${shape}`
+	})) : [{
+		...tile,
+		suggestionKey: tile.id
+	}]);
+	const availableGroups = Array.from(available.reduce((groups, tile) => {
+		const group = tile.suggestionGroup ?? tile.id;
+		const existing = groups.get(group);
+		if (existing) existing.tiles.push(tile);
+		else groups.set(group, {
+			id: group,
+			label: tile.label,
+			tiles: [tile]
+		});
+		return groups;
+	}, /* @__PURE__ */ new Map()).values());
 	const visible = editor.items.filter((item) => item.visible).flatMap((item) => tiles.filter((tile) => tile.id === item.id));
 	const itemFor = (id) => editor.items.find((item) => item.id === id);
 	const finishDrag = () => {
 		setDraggedId(null);
 		setDropTarget(null);
-		setDraggedHeight(0);
 	};
-	const startDrag = (event, id) => {
+	const startDrag = (event, id, span) => {
 		event.dataTransfer.setData("application/x-vx-settings-tile", id);
+		if (span) event.dataTransfer.setData("application/x-vx-settings-tile-span", span);
 		event.dataTransfer.effectAllowed = "move";
-		const currentTile = event.currentTarget;
-		setDraggedHeight((currentTile.hasAttribute("data-preview-tile") ? currentTile : currentTile.querySelector("[inert]"))?.getBoundingClientRect().height ?? 64);
 		setDraggedId(id);
 	};
 	const moveTile = (id, offset) => {
@@ -49,11 +78,14 @@ var useGallery = ({ kind, tiles, editor }) => {
 		event.preventDefault();
 		event.stopPropagation();
 		const id = event.dataTransfer.getData("application/x-vx-settings-tile");
+		const requestedSpan = event.dataTransfer.getData("application/x-vx-settings-tile-span");
 		const item = itemFor(id);
+		const span = tiles.find((tile) => tile.id === id)?.suggestionShapes?.includes(requestedSpan) ? requestedSpan : void 0;
 		finishDrag();
 		if (!item?.editable) return;
 		if (editor.onPlace) {
-			editor.onPlace(id, target);
+			if (span) editor.onPlace(id, target, span);
+			else editor.onPlace(id, target);
 			return;
 		}
 		if (!item.visible) editor.onVisibilityChange(id, true);
@@ -87,18 +119,17 @@ var useGallery = ({ kind, tiles, editor }) => {
 		className: `w-full justify-start rounded-lg text-sm ${category === value ? "bg-surface-secondary font-semibold" : "text-muted"}`,
 		children: [/* @__PURE__ */ jsx(Settings, { size: 16 }), value === "All" ? `All ${kind}` : value]
 	}, value));
-	const tileSpan = (tile) => kind === "widgets" ? tile.shape === "large" ? "col-span-2 row-span-2" : tile.shape === "medium" ? "col-span-2" : "" : tile.shape === "compact" ? "" : tile.shape === "standard" ? "col-span-2" : tile.shape === "wide" ? "col-span-3" : "col-span-4";
+	const tileSpan = (tile) => kind === "widgets" ? widgetStyles.tile({ size: widgetSize(tile.shape) }) : controlCenterStyles.tileContainer({ span: controlSpan(tile.shape) });
 	const draggedTile = tiles.find((tile) => tile.id === draggedId);
 	const blankWidget = (tile) => /* @__PURE__ */ jsx(Surface, {
 		variant: "transparent",
 		"aria-hidden": "true",
-		className: `bg-surface-secondary border-border w-full rounded-2xl border ${tile.shape === "large" ? "aspect-square" : tile.shape === "medium" ? "aspect-[2/1]" : "aspect-square"}`,
+		className: `bg-surface-secondary border-border w-full rounded-2xl border ${widgetStyles.preview({ size: widgetSize(tile.shape) })}`,
 		children: null
 	});
 	return {
 		dragInstructionsId,
 		draggedId,
-		draggedHeight,
 		dropTarget,
 		announcement,
 		query,
@@ -107,12 +138,18 @@ var useGallery = ({ kind, tiles, editor }) => {
 		isCategoryMenuOpen,
 		showPreview,
 		available,
+		availableGroups,
 		visible,
 		itemFor,
 		finishDrag,
 		startDrag,
 		moveTile,
 		dropTile,
+		addTile: (tile) => {
+			if (editor.onAdd && tile.suggestionShapes) editor.onAdd(tile.id, tile.shape);
+			else if (editor.onPlace && tile.suggestionShapes) editor.onPlace(tile.id, void 0, tile.shape);
+			else editor.onVisibilityChange(tile.id, true);
+		},
 		search,
 		categoryButtons,
 		tileSpan,
@@ -123,19 +160,9 @@ var useGallery = ({ kind, tiles, editor }) => {
 		setShowPreview
 	};
 };
-var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHeight, dropTarget, itemFor, startDrag, finishDrag, moveTile, dropTile, tileSpan, blankWidget, dragInstructionsId, draggedTile, setDropTarget }) => /* @__PURE__ */ jsxs("aside", {
+var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, dropTarget, itemFor, startDrag, finishDrag, moveTile, dropTile, tileSpan, blankWidget, dragInstructionsId, draggedTile, setDropTarget }) => /* @__PURE__ */ jsxs("aside", {
 	"aria-label": `Current ${kind}`,
 	className: `${showPreview ? "flex" : "hidden xl:flex"} border-border min-h-0 min-w-0 flex-1 flex-col p-5 xl:w-96 xl:flex-none xl:border-l`,
-	onDragOver: (event) => {
-		if (!event.dataTransfer.types.includes("application/x-vx-settings-tile")) return;
-		event.preventDefault();
-		event.dataTransfer.dropEffect = "move";
-		setDropTarget("empty");
-	},
-	onDragLeave: (event) => {
-		if (!event.currentTarget.contains(event.relatedTarget)) setDropTarget(null);
-	},
-	onDrop: (event) => dropTile(event),
 	children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: "mb-4 flex items-center justify-between gap-3",
@@ -148,7 +175,18 @@ var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHe
 			})]
 		}),
 		/* @__PURE__ */ jsxs("div", {
-			className: "@container mx-auto min-h-0 w-full max-w-[352px] flex-1 overflow-y-auto px-2 pt-3 pb-4",
+			"data-preview-drop-area": true,
+			className: `relative ${kind === "widgets" ? widgetStyles.galleryPreview() : controlCenterStyles.galleryPreview()}`,
+			onDragOver: (event) => {
+				if (!event.dataTransfer.types.includes("application/x-vx-settings-tile")) return;
+				event.preventDefault();
+				event.dataTransfer.dropEffect = "move";
+				setDropTarget("empty");
+			},
+			onDragLeave: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) setDropTarget(null);
+			},
+			onDrop: (event) => dropTile(event),
 			children: [visible.length === 0 && /* @__PURE__ */ jsxs("p", {
 				className: "text-muted py-8 text-center text-sm",
 				children: [
@@ -156,11 +194,13 @@ var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHe
 					kind,
 					" added. Choose a tile from the gallery."
 				]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: `grid gap-4 ${kind === "widgets" ? "auto-rows-[calc((100cqw-1rem)/2)] grid-cols-2" : "grid-cols-4 items-start"}`,
-				children: [visible.map((tile) => {
+			}), /* @__PURE__ */ jsx("div", {
+				className: kind === "widgets" ? widgetStyles.grid() : controlCenterStyles.home(),
+				children: visible.map((tile, index) => {
 					const editable = itemFor(tile.id)?.editable;
-					return /* @__PURE__ */ jsxs("div", {
+					const nextTile = visible[index + 1];
+					const emptyWidgetSlot = kind === "widgets" && draggedTile !== void 0 && tile.shape === "small" && nextTile?.shape !== "small";
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 						"data-preview-tile": tile.id,
 						draggable: editable,
 						role: "group",
@@ -180,7 +220,7 @@ var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHe
 						onDrop: (event) => dropTile(event, tile.id),
 						"data-dragging": draggedId === tile.id || void 0,
 						"data-drop-target": dropTarget === tile.id || void 0,
-						className: `group focus-visible:outline-focus data-[drop-target]:bg-accent-soft data-[drop-target]:outline-accent/40 group-focus-within:[&>div>*]:ring-foreground/35 group-hover:[&>div>*]:ring-foreground/35 relative min-w-0 rounded-2xl focus-visible:outline-2 focus-visible:outline-offset-2 data-[dragging]:opacity-40 data-[drop-target]:outline data-[drop-target]:outline-offset-2 [&>div>*]:transition-[box-shadow] group-focus-within:[&>div>*]:ring-1 group-hover:[&>div>*]:ring-1 ${editable ? "cursor-grab active:cursor-grabbing" : ""} ${tileSpan(tile)}`,
+						className: `group focus-visible:outline-focus data-[drop-target]:bg-accent-soft data-[drop-target]:outline-accent/40 group-focus-within:[&>div>*]:ring-foreground/35 group-hover:[&>div>*]:ring-foreground/35 relative min-w-0 overflow-visible rounded-2xl focus-visible:outline-2 focus-visible:outline-offset-2 data-[dragging]:opacity-40 data-[drop-target]:outline data-[drop-target]:outline-offset-2 [&>div>*]:transition-[box-shadow] group-focus-within:[&>div>*]:ring-1 group-hover:[&>div>*]:ring-1 ${editable ? "cursor-grab active:cursor-grabbing" : ""} ${tileSpan(tile)}`,
 						children: [
 							/* @__PURE__ */ jsx("div", {
 								inert: true,
@@ -215,24 +255,32 @@ var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHe
 								isIconOnly: true,
 								size: "sm",
 								variant: "secondary",
-								className: "text-muted absolute -top-2 -left-2 z-10 size-6 min-w-0 rounded-full p-0 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100",
+								className: "border-danger text-danger hover:bg-danger/10! absolute -top-1 -left-1 z-20 size-6! min-w-0 rounded-full border bg-transparent! p-0 opacity-0 shadow-md transition-opacity group-focus-within:opacity-100 group-hover:opacity-100",
 								"aria-label": `Remove ${tile.label}`,
 								onPress: () => editor.onVisibilityChange(tile.id, false),
 								children: /* @__PURE__ */ jsx(Minus, {
 									"aria-hidden": "true",
-									className: "size-3.5"
+									className: "size-3"
 								})
 							}), /* @__PURE__ */ jsxs(Tooltip.Content, { children: ["Remove ", tile.label] })] })
 						]
-					}, tile.id);
-				}), draggedTile && /* @__PURE__ */ jsx("div", {
-					"data-preview-empty-drop": true,
-					"aria-label": `Drop ${draggedTile.label} here`,
-					"data-drop-target": dropTarget === "empty" || void 0,
-					className: `border-border text-muted data-[drop-target]:border-accent/40 data-[drop-target]:bg-accent-soft flex items-center justify-center rounded-2xl border border-dashed text-xs ${tileSpan(draggedTile)}`,
-					style: kind === "controls" ? { height: draggedHeight } : void 0,
-					children: "Drop here"
-				})]
+					}), emptyWidgetSlot && /* @__PURE__ */ jsx("div", {
+						"data-preview-empty-slot": tile.id,
+						"data-drop-target": dropTarget === `after:${tile.id}` || void 0,
+						onDragOver: (event) => {
+							if (!event.dataTransfer.types.includes("application/x-vx-settings-tile")) return;
+							event.preventDefault();
+							event.stopPropagation();
+							event.dataTransfer.dropEffect = "move";
+							setDropTarget(`after:${tile.id}`);
+						},
+						onDragLeave: (event) => {
+							if (!event.currentTarget.contains(event.relatedTarget)) setDropTarget((current) => current === `after:${tile.id}` ? null : current);
+						},
+						onDrop: (event) => dropTile(event, nextTile?.id),
+						className: "aspect-square"
+					})] }, tile.id);
+				})
 			})]
 		}),
 		/* @__PURE__ */ jsxs(Button, {
@@ -243,67 +291,94 @@ var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHe
 		})
 	]
 });
-var GalleryAvailable = ({ kind, editor, isSearching, showPreview, category, available, itemFor, startDrag, finishDrag, blankWidget }) => /* @__PURE__ */ jsxs("section", {
-	"aria-label": `Available ${kind}`,
-	className: `${showPreview ? "hidden xl:flex" : "flex"} min-h-0 min-w-0 flex-1 flex-col p-4 md:p-6`,
-	children: [
-		/* @__PURE__ */ jsx("h2", {
-			className: "mb-1 text-sm font-semibold",
-			children: isSearching ? "Search results" : category === "All" ? "Suggestions" : category
-		}),
-		/* @__PURE__ */ jsx("p", {
-			className: "text-muted mb-5 text-xs",
-			children: "Add or drag a tile into your preview. Changes save automatically."
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: "min-h-0 flex-1 overflow-y-auto p-1",
-			children: [available.length === 0 && /* @__PURE__ */ jsxs("p", {
-				role: "status",
-				className: "text-muted py-8 text-sm",
-				children: [
-					"No ",
-					kind,
-					" found."
-				]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "grid grid-cols-2 items-start gap-4 sm:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5",
-				children: available.map((tile) => {
-					const item = itemFor(tile.id);
-					return /* @__PURE__ */ jsxs("div", {
-						"data-gallery-tile": tile.id,
-						draggable: item?.editable,
-						onDragStart: (event) => startDrag(event, tile.id),
-						onDragEnd: finishDrag,
-						className: `group relative min-w-0 ${tile.shape === "medium" || tile.shape === "large" || tile.shape === "full" || tile.shape === "wide" ? "col-span-2" : ""}`,
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								inert: true,
-								className: "pointer-events-none flex min-h-24 items-center justify-center [&>button]:w-full",
-								children: kind === "widgets" ? tile.preview ?? blankWidget(tile) : tile.preview
-							}),
-							item?.editable && !item.visible && /* @__PURE__ */ jsx(Button, {
-								isIconOnly: true,
-								size: "sm",
-								variant: "ghost",
-								"aria-label": `Quick add ${tile.label}`,
-								className: "bg-success hover:bg-success/90 absolute -top-1 -left-1 z-10 size-7 min-w-0 rounded-full p-0 text-white opacity-0 shadow-sm transition-opacity group-focus-within:opacity-100 group-hover:opacity-100",
-								onPress: () => editor.onVisibilityChange(tile.id, true),
-								children: /* @__PURE__ */ jsx(Add, {
-									"aria-hidden": "true",
-									className: "size-4"
-								})
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "mt-2 min-w-0 truncate text-xs",
-								children: tile.label
-							})
-						]
-					}, tile.id);
+var GalleryAvailable = ({ kind, isSearching, showPreview, category, available, availableGroups, itemFor, startDrag, finishDrag, blankWidget, addTile }) => {
+	const suggestionTile = (tile) => {
+		const item = itemFor(tile.id);
+		const isAdded = item?.visible === true;
+		const isCompactControl = kind === "controls" && tile.shape === "compact";
+		const size = kind === "controls" ? controlCenterStyles.gallerySuggestion({ span: controlSpan(tile.shape) }) : widgetStyles.gallerySuggestion({ size: widgetSize(tile.shape) });
+		return /* @__PURE__ */ jsxs("div", {
+			"data-gallery-tile": tile.suggestionKey,
+			"data-control-span": kind === "controls" ? tile.shape : void 0,
+			"data-widget-size": kind === "widgets" ? tile.shape : void 0,
+			"data-added": isAdded || void 0,
+			draggable: item?.editable,
+			onDragStart: (event) => startDrag(event, tile.id, tile.suggestionShapes ? tile.shape : void 0),
+			onDragEnd: finishDrag,
+			className: `group relative min-w-0 justify-self-center transition-opacity ${kind === "widgets" ? "grid h-full grid-rows-[minmax(0,1fr)_auto] self-stretch" : ""} ${isAdded ? "opacity-50" : ""} ${size}`,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					inert: true,
+					className: `pointer-events-none flex items-center justify-center [&>section]:w-full ${isCompactControl ? "mx-auto size-14 [&>button]:size-14" : "[&>button]:w-full"} ${kind === "widgets" ? "h-full min-h-24 [&>[data-widget-size]]:w-full" : ""}`,
+					children: kind === "widgets" ? tile.preview ?? blankWidget(tile) : tile.preview
+				}),
+				item?.editable && !item.visible && /* @__PURE__ */ jsx(Button, {
+					isIconOnly: true,
+					size: "sm",
+					variant: "ghost",
+					"aria-label": `Quick add ${tile.label}${tile.suggestionKey === tile.id ? "" : ` (${tile.shape})`}`,
+					className: "bg-success hover:bg-success/90 absolute -top-1 -left-1 z-10 size-6 min-w-0 rounded-full p-0 text-white opacity-0 shadow-sm transition-opacity group-focus-within:opacity-100 group-hover:opacity-100",
+					onPress: () => addTile(tile),
+					children: /* @__PURE__ */ jsx(Add, {
+						"aria-hidden": "true",
+						className: "size-3"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-2 min-w-0 text-center",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "truncate text-sm font-medium",
+						children: tile.label
+					}), kind === "widgets" && tile.description && /* @__PURE__ */ jsx("p", {
+						className: "text-muted mt-0.5 line-clamp-2 text-xs",
+						children: tile.description
+					})]
 				})
-			})]
-		})
-	]
-});
+			]
+		}, tile.suggestionKey);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": `Available ${kind}`,
+		className: `${showPreview ? "hidden xl:flex" : "flex"} min-h-0 min-w-0 flex-1 flex-col p-4 md:p-6`,
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "mb-1 text-sm font-semibold",
+				children: isSearching ? "Search results" : category === "All" ? "Suggestions" : category
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted mb-5 text-xs",
+				children: "Add or drag a tile into your preview. Changes save automatically."
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-h-0 flex-1 overflow-y-auto p-3",
+				children: [available.length === 0 && /* @__PURE__ */ jsxs("p", {
+					role: "status",
+					className: "text-muted py-8 text-sm",
+					children: [
+						"No ",
+						kind,
+						" found."
+					]
+				}), available.some((tile) => tile.suggestionShapes) ? /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-6",
+					children: availableGroups.map((group) => /* @__PURE__ */ jsxs("section", {
+						"aria-label": `${group.label} sizes`,
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-sm font-light",
+							children: group.label
+						}), /* @__PURE__ */ jsx("div", {
+							className: `mt-3 grid grid-cols-1 justify-items-center gap-x-8 gap-y-4 min-[600px]:grid-cols-2 min-[820px]:grid-cols-3 ${kind === "widgets" ? "items-stretch" : ""}`,
+							children: group.tiles.map(suggestionTile)
+						})]
+					}, group.id))
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-2 items-start gap-4 sm:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5",
+					children: available.map(suggestionTile)
+				})]
+			})
+		]
+	});
+};
 var TileGallery = (props) => {
 	const context = {
 		...props,
@@ -316,7 +391,7 @@ var TileGallery = (props) => {
 			/* @__PURE__ */ jsx("span", {
 				id: dragInstructionsId,
 				className: "sr-only",
-				children: "Drag the tile to reorder, or focus it and use the arrow keys."
+				children: "Drag the tile to reorder or drop it anywhere in the preview. You can also focus it and use the arrow keys."
 			}),
 			/* @__PURE__ */ jsx("span", {
 				role: "status",

package/dist/lib/store/useBookmarks/index.js

@@ -1,4 +1,4 @@
-import { bookmarksData } from "./data.js";
+import { bookmarksData, sampleFavorites } from "./data.js";
 import { Bookmarks } from "./action.js";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/lib/store/useBookmarks/index.ts
@@ -26,4 +26,4 @@ var useBookmarks = {
 	actions: useBookmarksActions
 };
 //#endregion
-export { useBookmarks };
+export { bookmarksData, sampleFavorites, useBookmarks };

package/dist/lib/store/useStorage/index.js

@@ -10,4 +10,4 @@ var useStorageList = (rq = {}) => useQuery({
 });
 var useStorage = { list: useStorageList };
 //#endregion
-export { useStorage };
+export { storageData, useStorage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vezham/react",
-  "version": "26.0.0-alpha.9",
+  "version": "26.0.0-beta.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vezham/vx-fe-pkgs.git",
@@ -109,7 +109,7 @@
   ],
   "dependencies": {
     "@tanstack/react-hotkeys": "^0.10.0",
-    "@vezham/hooks": "26.0.0-alpha.9",
+    "@vezham/hooks": "26.0.0-beta.1",
     "react-aria-components": "1.21.1"
   }
 }