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

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.map

@@ -1 +1 @@
-{"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;AAsGD,QAAA,MAAM,QAAQ,GAAI,uJAYf,KAAK,gCA0SP,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"}