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

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

@@ -5,7 +5,7 @@ import { DefaultControlCenter } from "./control-center/default.js";
 import { UserMenu } from "./user-menu.js";
 import { useMemo, useState } from "react";
 import { Badge, Button, Dropdown, Separator, Surface, Tooltip, useMediaQuery } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Bell, MenuDots, Settings, VezhamTamizhi } from "@vezham/icons-react";
 //#region src/lib/components/panel/footer/index.tsx
 var footerActionClassName = "text-muted hover:text-foreground h-5 w-5 min-w-0 p-0 [&_svg]:size-5";
@@ -29,7 +29,7 @@ var FooterAction = ({ children, label, onPress }) => {
 		})]
 	});
 };
-var CompactActions = ({ showAI, showControlCenter, onControlCenter, showNotifications, notificationCount, onAI, onNotificationsClick }) => {
+var CompactActions = ({ showAI, showControlCenter, onControlCenter, showNotifications, notificationCount = 0, onAI, onNotificationsClick }) => {
 	if (!showAI && !showNotifications && !showControlCenter) return null;
 	return /* @__PURE__ */ jsxs(Dropdown, { children: [/* @__PURE__ */ jsx(Dropdown.Trigger, {
 		"aria-label": "Open footer actions",
@@ -59,7 +59,7 @@ var CompactActions = ({ showAI, showControlCenter, onControlCenter, showNotifica
 						className: "flex-1",
 						children: "Notifications"
 					}),
-					notificationCount && notificationCount > 0 ? /* @__PURE__ */ jsx(Badge, {
+					notificationCount > 0 ? /* @__PURE__ */ jsx(Badge, {
 						content: String(notificationCount),
 						color: "danger",
 						size: "sm"
@@ -85,7 +85,7 @@ var Footer = ({ user, showAI = false, showControlCenter = false, controlCenter,
 		isOpen: controlCenterOpen,
 		onOpenChange: setControlCenterOpen
 	}), [compact, controlCenterOpen]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, { className: "hidden md:block" }), /* @__PURE__ */ jsxs(Surface, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, { className: "hidden md:block" }), /* @__PURE__ */ jsxs(Surface, {
 		variant: "transparent",
 		className: `flex items-center justify-center gap-2 md:flex-col md:gap-3 ${className ?? ""}`,
 		children: [
@@ -117,7 +117,19 @@ var Footer = ({ user, showAI = false, showControlCenter = false, controlCenter,
 				value: controlCenterContext,
 				children: controlCenter ?? /* @__PURE__ */ jsx(DefaultControlCenter, { placement: "right bottom" })
 			}),
-			/* @__PURE__ */ jsx("div", {
+			showUserInfo ? /* @__PURE__ */ jsx(UserMenu, {
+				user,
+				showAI,
+				showControlCenter,
+				showNotifications,
+				notificationCount,
+				onAI,
+				onControlCenter: () => setControlCenterOpen(true),
+				onNotifications: onNotificationsClick,
+				onProfile: () => onUserClick?.(user, "profiles"),
+				onPreferences: () => onUserClick?.(user, "account"),
+				onLogout: clearUser
+			}) : /* @__PURE__ */ jsx("div", {
 				className: "md:hidden",
 				children: /* @__PURE__ */ jsx(CompactActions, {
 					showControlCenter,
@@ -129,12 +141,6 @@ var Footer = ({ user, showAI = false, showControlCenter = false, controlCenter,
 					onNotificationsClick
 				})
 			}),
-			showUserInfo ? /* @__PURE__ */ jsx(UserMenu, {
-				user,
-				onProfile: () => onUserClick?.(user, "profiles"),
-				onPreferences: () => onUserClick?.(user, "account"),
-				onLogout: clearUser
-			}) : null,
 			toolbarAction && /* @__PURE__ */ jsx(Surface, {
 				variant: "transparent",
 				className: "md:hidden",

package/dist/lib/components/panel/footer/notification-center/index.js

@@ -32,7 +32,7 @@ var NotificationDrawer = forwardRef((props, ref) => {
 	const handleEdit = () => {
 		if (openSettings) {
 			onClose();
-			openSettings("Edit Widgets");
+			openSettings("Widget Center");
 		} else if (onEdit) onEdit();
 		else {
 			onClose();
@@ -44,7 +44,7 @@ var NotificationDrawer = forwardRef((props, ref) => {
 		size: "sm",
 		...getEditButtonProps(),
 		onPress: handleEdit,
-		children: "Edit Widgets"
+		children: "Widget Center"
 	});
 	if (compact) return /* @__PURE__ */ jsx(InfoPanelSheet, {
 		isOpen,

package/dist/lib/components/panel/footer/notification-center/widget-tiles.d.ts

@@ -1,12 +1,92 @@
-type WidgetSize = 'small' | 'medium' | 'large';
+export declare const widgetSizes: readonly ["small", "medium", "large"];
+export type WidgetSize = (typeof widgetSizes)[number];
+export declare const notificationCenterWidgetVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        small: {
+            gallerySuggestion: string;
+            preview: string;
+        };
+        medium: {
+            tile: string;
+            gallerySuggestion: string;
+            preview: string;
+        };
+        large: {
+            tile: string;
+            gallerySuggestion: string;
+            preview: string;
+        };
+    };
+}, {
+    container: string;
+    grid: string;
+    tile: string;
+    preview: string;
+    galleryPreview: string;
+    gallerySuggestion: string;
+}, undefined, {
+    size: {
+        small: {
+            gallerySuggestion: string;
+            preview: string;
+        };
+        medium: {
+            tile: string;
+            gallerySuggestion: string;
+            preview: string;
+        };
+        large: {
+            tile: string;
+            gallerySuggestion: string;
+            preview: string;
+        };
+    };
+}, {
+    container: string;
+    grid: string;
+    tile: string;
+    preview: string;
+    galleryPreview: string;
+    gallerySuggestion: string;
+}, import('tailwind-variants').TVReturnTypeLike<{
+    size: {
+        small: {
+            gallerySuggestion: string;
+            preview: string;
+        };
+        medium: {
+            tile: string;
+            gallerySuggestion: string;
+            preview: string;
+        };
+        large: {
+            tile: string;
+            gallerySuggestion: string;
+            preview: string;
+        };
+    };
+}, {
+    container: string;
+    grid: string;
+    tile: string;
+    preview: string;
+    galleryPreview: string;
+    gallerySuggestion: string;
+}>>;
 export type WidgetTileDefinition = {
     id: string;
     label: string;
+    description: string;
     category: string;
     size: WidgetSize;
 };
+export declare const getWidgetSize: (tile: WidgetTileDefinition & {
+    span?: string;
+}) => WidgetSize;
 export declare const WidgetPreview: ({ tile, className }: {
-    tile: WidgetTileDefinition;
+    tile: WidgetTileDefinition & {
+        span?: string;
+    };
     className?: string;
 }) => import("react").JSX.Element;
 export declare const useWidgetTiles: () => {
@@ -14,36 +94,41 @@ export declare const useWidgetTiles: () => {
     orderedTiles: ({
         id: string;
         label: string;
+        description: string;
         category: string;
         size: "small";
     } | {
         id: string;
         label: string;
+        description: string;
         category: string;
         size: "medium";
     } | {
         id: string;
         label: string;
+        description: string;
         category: string;
         size: "large";
     })[];
     visibleTiles: ({
         id: string;
         label: string;
+        description: string;
         category: string;
         size: "small";
     } | {
         id: string;
         label: string;
+        description: string;
         category: string;
         size: "medium";
     } | {
         id: string;
         label: string;
+        description: string;
         category: string;
         size: "large";
     })[];
 };
 export declare const WidgetTiles: () => import("react").JSX.Element;
-export {};
 //# sourceMappingURL=widget-tiles.d.ts.map

package/dist/lib/components/panel/footer/notification-center/widget-tiles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widget-tiles.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/notification-center/widget-tiles.tsx"],"names":[],"mappings":"AAYA,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE9C,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,UAAU,CAAA;CACjB,CAAA;AAkID,eAAO,MAAM,aAAa,GAAI,qBAG3B;IACD,IAAI,EAAE,oBAAoB,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,gCAQA,CAAA;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACqB,CAAA;AAEhD,eAAO,MAAM,WAAW,mCAWvB,CAAA"}
+{"version":3,"file":"widget-tiles.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/notification-center/widget-tiles.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,WAAW,uCAAwC,CAAA;AAChE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAErD,eAAO,MAAM,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4B3C,CAAA;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,UAAU,CAAA;CACjB,CAAA;AAwDD,eAAO,MAAM,aAAa,GACxB,MAAM,oBAAoB,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,KAC7C,UAGY,CAAA;AAwFf,eAAO,MAAM,aAAa,GAAI,qBAG3B;IACD,IAAI,EAAE,oBAAoB,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,gCAWA,CAAA;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACqB,CAAA;AAEhD,eAAO,MAAM,WAAW,mCAWvB,CAAA"}

package/dist/lib/components/panel/footer/notification-center/widget-tiles.js

@@ -1,57 +1,92 @@
 import { useTileEditor } from "../control-center/editor.js";
-import { Surface } from "@vezham/react-v3";
+import { Surface, tv } from "@vezham/react-v3";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CalendarDate, ClipboardList, ClockCircle, Moon, NotebookBookmark, Sun } from "@vezham/icons-react";
 //#region src/lib/components/panel/footer/notification-center/widget-tiles.tsx
+var widgetSizes = [
+	"small",
+	"medium",
+	"large"
+];
+var notificationCenterWidgetVariants = tv({
+	slots: {
+		container: "@container mx-auto w-full max-w-[252px]",
+		grid: "grid auto-rows-[calc((100cqw-1rem)/2)] grid-cols-2 gap-4 pb-4",
+		tile: "min-w-0",
+		preview: "aspect-square",
+		galleryPreview: "@container mx-auto min-h-0 w-full max-w-[260px] flex-1 overflow-y-auto p-1",
+		gallerySuggestion: "shrink-0"
+	},
+	variants: { size: {
+		small: {
+			gallerySuggestion: "w-[7.375rem]",
+			preview: "aspect-square"
+		},
+		medium: {
+			tile: "col-span-2",
+			gallerySuggestion: "w-[15.75rem] max-w-full",
+			preview: "aspect-[2/1]"
+		},
+		large: {
+			tile: "col-span-2 row-span-2",
+			gallerySuggestion: "w-[15.75rem] max-w-full",
+			preview: "aspect-square"
+		}
+	} }
+});
 var widgetDefinitions = [
 	{
 		id: "calendar-month",
 		label: "Calendar",
+		description: "See your upcoming events.",
 		category: "Calendar",
 		size: "small"
 	},
 	{
 		id: "world-clock",
 		label: "World Clock",
+		description: "Check the time in New Delhi.",
 		category: "Clock",
 		size: "small"
 	},
 	{
 		id: "weather-forecast",
 		label: "Weather",
+		description: "View the current forecast.",
 		category: "Weather",
 		size: "medium"
 	},
 	{
 		id: "reminders-list",
 		label: "Reminders",
+		description: "Keep track of today’s tasks.",
 		category: "Reminders",
 		size: "medium"
 	},
 	{
 		id: "notes-summary",
 		label: "Notes",
+		description: "View your latest notes.",
 		category: "Notes",
 		size: "medium"
 	},
 	{
 		id: "focus-status",
 		label: "Focus",
+		description: "See your current Focus status.",
 		category: "Focus",
 		size: "small"
 	},
 	{
 		id: "daily-summary",
 		label: "Daily Summary",
+		description: "Review your day at a glance.",
 		category: "Calendar",
 		size: "large"
 	}
 ];
-var widgetSizeClasses = {
-	small: "aspect-square",
-	medium: "aspect-[2/1]",
-	large: "aspect-square"
-};
+var widgetStyles = notificationCenterWidgetVariants();
+var getWidgetSize = (tile) => widgetSizes.includes(tile.span) ? tile.span : tile.size;
 var WidgetPreviewContent = ({ id }) => {
 	switch (id) {
 		case "calendar-month": return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -83,13 +118,13 @@ var WidgetPreviewContent = ({ id }) => {
 			})
 		] });
 		case "weather-forecast": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between",
+			className: "flex min-w-0 items-center justify-between gap-2",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-sm font-semibold",
+				className: "min-w-0 truncate text-sm font-semibold",
 				children: "New Delhi"
 			}), /* @__PURE__ */ jsx(Sun, {
 				"aria-hidden": "true",
-				className: "text-warning size-5"
+				className: "text-warning size-5 shrink-0"
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "mt-auto flex items-end justify-between",
@@ -102,12 +137,12 @@ var WidgetPreviewContent = ({ id }) => {
 			})]
 		})] });
 		case "reminders-list": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
+			className: "flex min-w-0 items-center gap-2",
 			children: [/* @__PURE__ */ jsx(ClipboardList, {
 				"aria-hidden": "true",
-				className: "text-accent size-5"
+				className: "text-accent size-5 shrink-0"
 			}), /* @__PURE__ */ jsx("span", {
-				className: "text-sm font-semibold",
+				className: "min-w-0 truncate text-sm font-semibold",
 				children: "Reminders"
 			})]
 		}), /* @__PURE__ */ jsx("span", {
@@ -115,12 +150,12 @@ var WidgetPreviewContent = ({ id }) => {
 			children: "No reminders today"
 		})] });
 		case "notes-summary": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
+			className: "flex min-w-0 items-center gap-2",
 			children: [/* @__PURE__ */ jsx(NotebookBookmark, {
 				"aria-hidden": "true",
-				className: "text-warning size-5"
+				className: "text-warning size-5 shrink-0"
 			}), /* @__PURE__ */ jsx("span", {
-				className: "text-sm font-semibold",
+				className: "min-w-0 truncate text-sm font-semibold",
 				children: "Notes"
 			})]
 		}), /* @__PURE__ */ jsx("span", {
@@ -157,20 +192,23 @@ var WidgetPreviewContent = ({ id }) => {
 		] });
 	}
 };
-var WidgetPreview = ({ tile, className = "" }) => /* @__PURE__ */ jsx(Surface, {
-	variant: "transparent",
-	"data-widget-size": tile.size,
-	"aria-label": tile.label,
-	className: `bg-surface-secondary flex min-w-0 flex-col rounded-2xl p-3 shadow-sm ${widgetSizeClasses[tile.size]} ${tile.size === "large" ? "col-span-2 row-span-2" : tile.size === "medium" ? "col-span-2" : ""} ${className}`,
-	children: /* @__PURE__ */ jsx(WidgetPreviewContent, { id: tile.id })
-});
+var WidgetPreview = ({ tile, className = "" }) => {
+	const size = getWidgetSize(tile);
+	return /* @__PURE__ */ jsx(Surface, {
+		variant: "transparent",
+		"data-widget-size": size,
+		"aria-label": tile.label,
+		className: `bg-surface-secondary flex min-w-0 flex-col rounded-2xl p-3 shadow-sm ${widgetStyles.tile({ size })} ${widgetStyles.preview({ size })} ${className}`,
+		children: /* @__PURE__ */ jsx(WidgetPreviewContent, { id: tile.id })
+	});
+};
 var useWidgetTiles = () => useTileEditor(widgetDefinitions, "vx:widgets");
 var WidgetTiles = () => {
 	const { visibleTiles } = useWidgetTiles();
 	return /* @__PURE__ */ jsx("div", {
-		className: "@container mx-auto w-full max-w-[352px]",
+		className: widgetStyles.container(),
 		children: /* @__PURE__ */ jsx("div", {
-			className: "grid auto-rows-[calc((100cqw-1rem)/2)] grid-cols-2 gap-4 pb-4",
+			className: widgetStyles.grid(),
 			children: visibleTiles.map((tile) => /* @__PURE__ */ jsx(WidgetPreview, {
 				tile,
 				className: "h-full"
@@ -179,4 +217,4 @@ var WidgetTiles = () => {
 	});
 };
 //#endregion
-export { WidgetPreview, WidgetTiles, useWidgetTiles };
+export { WidgetPreview, WidgetTiles, getWidgetSize, notificationCenterWidgetVariants, useWidgetTiles, widgetSizes };

package/dist/lib/components/panel/footer/user-menu.d.ts

@@ -4,7 +4,14 @@ type Props = {
     onLogout: () => void;
     onProfile?: () => void;
     onPreferences?: () => void;
+    showAI?: boolean;
+    showControlCenter?: boolean;
+    showNotifications?: boolean;
+    notificationCount?: number;
+    onAI?: () => void;
+    onControlCenter?: () => void;
+    onNotifications?: () => void;
 };
-declare const UserMenu: ({ user, onLogout, onProfile, onPreferences }: Props) => import("react").JSX.Element;
+declare const UserMenu: ({ user, onLogout, onProfile, onPreferences, showAI, showControlCenter, showNotifications, notificationCount, onAI, onControlCenter, onNotifications }: Props) => import("react").JSX.Element;
 export { UserMenu };
 //# sourceMappingURL=user-menu.d.ts.map

package/dist/lib/components/panel/footer/user-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/footer/user-menu.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAGV,QAAQ,EAGT,MAAM,SAAS,CAAA;AAEhB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;CAC3B,CAAA;AAsGD,QAAA,MAAM,QAAQ,GAAI,8CAA8C,KAAK,gCAuNpE,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/footer/user-menu.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAGV,QAAQ,EAGT,MAAM,SAAS,CAAA;AAEhB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B,CAAA;AA4XD,QAAA,MAAM,QAAQ,GAAI,uJAYf,KAAK,gCA6GP,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}