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

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

@@ -0,0 +1,322 @@
+import { VariantProps } from '@vezham/react-v3';
+declare const tva: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+        dark: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+        light: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+        glass: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+    };
+    placement: {
+        left: {
+            drawer_base: string;
+        };
+        right: {
+            drawer_base: string;
+        };
+        top: {
+            drawer_base: string;
+        };
+        bottom: {
+            drawer_base: string;
+        };
+    };
+    size: {
+        sm: {
+            drawer_base: string;
+            drawer_header: string;
+            header_title: string;
+            drawer_body: string;
+            drawer_footer: string;
+        };
+        md: {
+            drawer_base: string;
+            drawer_header: string;
+            header_title: string;
+            drawer_body: string;
+            drawer_footer: string;
+        };
+        lg: {
+            drawer_base: string;
+            drawer_header: string;
+            header_title: string;
+            drawer_body: string;
+            drawer_footer: string;
+        };
+    };
+    blur: {
+        none: {
+            drawer_content: string;
+        };
+        sm: {
+            drawer_content: string;
+        };
+        md: {
+            drawer_content: string;
+        };
+        lg: {
+            drawer_content: string;
+        };
+        xl: {
+            drawer_content: string;
+        };
+    };
+    border: {
+        none: {
+            drawer_content: string;
+        };
+        subtle: {
+            drawer_content: string;
+        };
+        prominent: {
+            drawer_content: string;
+        };
+    };
+}, {
+    drawer_base: string;
+    drawer_wrapper: string;
+    drawer_content: string;
+    drawer_header: string;
+    header_title: string;
+    close_button: string;
+    drawer_body: string;
+    scroll_shadow: string;
+    empty_state: string;
+    empty_state_icon: string;
+    drawer_footer: string;
+    chip: string;
+}, undefined, {
+    variant: {
+        default: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+        dark: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+        light: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+        glass: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+    };
+    placement: {
+        left: {
+            drawer_base: string;
+        };
+        right: {
+            drawer_base: string;
+        };
+        top: {
+            drawer_base: string;
+        };
+        bottom: {
+            drawer_base: string;
+        };
+    };
+    size: {
+        sm: {
+            drawer_base: string;
+            drawer_header: string;
+            header_title: string;
+            drawer_body: string;
+            drawer_footer: string;
+        };
+        md: {
+            drawer_base: string;
+            drawer_header: string;
+            header_title: string;
+            drawer_body: string;
+            drawer_footer: string;
+        };
+        lg: {
+            drawer_base: string;
+            drawer_header: string;
+            header_title: string;
+            drawer_body: string;
+            drawer_footer: string;
+        };
+    };
+    blur: {
+        none: {
+            drawer_content: string;
+        };
+        sm: {
+            drawer_content: string;
+        };
+        md: {
+            drawer_content: string;
+        };
+        lg: {
+            drawer_content: string;
+        };
+        xl: {
+            drawer_content: string;
+        };
+    };
+    border: {
+        none: {
+            drawer_content: string;
+        };
+        subtle: {
+            drawer_content: string;
+        };
+        prominent: {
+            drawer_content: string;
+        };
+    };
+}, {
+    drawer_base: string;
+    drawer_wrapper: string;
+    drawer_content: string;
+    drawer_header: string;
+    header_title: string;
+    close_button: string;
+    drawer_body: string;
+    scroll_shadow: string;
+    empty_state: string;
+    empty_state_icon: string;
+    drawer_footer: string;
+    chip: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+        dark: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+        light: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+        glass: {
+            drawer_content: string;
+            drawer_header: string;
+            header_title: string;
+            chip: string;
+        };
+    };
+    placement: {
+        left: {
+            drawer_base: string;
+        };
+        right: {
+            drawer_base: string;
+        };
+        top: {
+            drawer_base: string;
+        };
+        bottom: {
+            drawer_base: string;
+        };
+    };
+    size: {
+        sm: {
+            drawer_base: string;
+            drawer_header: string;
+            header_title: string;
+            drawer_body: string;
+            drawer_footer: string;
+        };
+        md: {
+            drawer_base: string;
+            drawer_header: string;
+            header_title: string;
+            drawer_body: string;
+            drawer_footer: string;
+        };
+        lg: {
+            drawer_base: string;
+            drawer_header: string;
+            header_title: string;
+            drawer_body: string;
+            drawer_footer: string;
+        };
+    };
+    blur: {
+        none: {
+            drawer_content: string;
+        };
+        sm: {
+            drawer_content: string;
+        };
+        md: {
+            drawer_content: string;
+        };
+        lg: {
+            drawer_content: string;
+        };
+        xl: {
+            drawer_content: string;
+        };
+    };
+    border: {
+        none: {
+            drawer_content: string;
+        };
+        subtle: {
+            drawer_content: string;
+        };
+        prominent: {
+            drawer_content: string;
+        };
+    };
+}, {
+    drawer_base: string;
+    drawer_wrapper: string;
+    drawer_content: string;
+    drawer_header: string;
+    header_title: string;
+    close_button: string;
+    drawer_body: string;
+    scroll_shadow: string;
+    empty_state: string;
+    empty_state_icon: string;
+    drawer_footer: string;
+    chip: string;
+}>>;
+type tvProps = VariantProps<typeof tva>;
+type tvSlots = keyof ReturnType<typeof tva>;
+export { tva };
+export type { tvProps, tvSlots };
+//# sourceMappingURL=variant.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/notification-center/variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,kBAAkB,CAAA;AAEnD,QAAA,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgKP,CAAA;AAEF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AACvC,KAAK,OAAO,GAAG,MAAM,UAAU,CAAC,OAAO,GAAG,CAAC,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,CAAA;AACd,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,CAAA"}

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

@@ -0,0 +1,119 @@
+import { tv } from "@vezham/react-v3";
+//#region src/lib/components/panel/footer/notification-center/variant.ts
+var tva = tv({
+	slots: {
+		drawer_base: "z-80 max-w-[384px] rounded-none border-none bg-transparent shadow-none md:translate-x-[106px]",
+		drawer_wrapper: "z-80 duration-180 ease-out data-[exiting=true]:duration-150 data-[exiting=true]:ease-out",
+		drawer_content: "w-full border-0 bg-transparent p-0 shadow-none [--drawer-enter-duration:180ms] [--drawer-enter-ease:cubic-bezier(0,0,0.58,1)] [--drawer-exit-duration:150ms] [--drawer-exit-ease:cubic-bezier(0,0,0.58,1)]",
+		drawer_header: "flex shrink-0 flex-row items-center justify-between gap-2",
+		header_title: "text-foreground min-w-0 flex-1 truncate text-base font-semibold",
+		close_button: "static shrink-0",
+		drawer_body: "flex min-h-0 flex-1 flex-col overflow-hidden",
+		scroll_shadow: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+		empty_state: "flex min-h-[320px] flex-col items-center justify-center text-center",
+		empty_state_icon: "text-muted",
+		drawer_footer: "flex shrink-0 items-center justify-center",
+		chip: "rounded-full"
+	},
+	variants: {
+		variant: {
+			default: {
+				drawer_content: "bg-black/5",
+				drawer_header: "text-white/90",
+				header_title: "",
+				chip: ""
+			},
+			dark: {
+				drawer_content: "bg-surface/80",
+				drawer_header: "text-white/70",
+				header_title: "",
+				chip: ""
+			},
+			light: {
+				drawer_content: "bg-surface/80",
+				drawer_header: "text-black/90",
+				header_title: "",
+				chip: ""
+			},
+			glass: {
+				drawer_content: "bg-surface/60 backdrop-blur-xl",
+				drawer_header: "text-white",
+				header_title: "",
+				chip: ""
+			}
+		},
+		placement: {
+			left: { drawer_base: "max-w-[384px] md:translate-x-[106px]" },
+			right: { drawer_base: "max-w-[384px] md:-translate-x-[106px]" },
+			top: { drawer_base: "max-h-[384px] max-w-full md:translate-y-[106px]" },
+			bottom: { drawer_base: "max-h-[384px] max-w-full md:-translate-y-[106px]" }
+		},
+		size: {
+			sm: {
+				drawer_base: "max-w-[320px] md:translate-x-[80px]",
+				drawer_header: "p-3",
+				header_title: "text-base",
+				drawer_body: "p-3",
+				drawer_footer: "p-3"
+			},
+			md: {
+				drawer_base: "max-w-[384px] md:translate-x-[106px]",
+				drawer_header: "p-4",
+				header_title: "text-base",
+				drawer_body: "p-4",
+				drawer_footer: "p-4"
+			},
+			lg: {
+				drawer_base: "max-w-[560px] md:translate-x-[133px]",
+				drawer_header: "p-5",
+				header_title: "text-xl",
+				drawer_body: "p-5",
+				drawer_footer: "p-5"
+			}
+		},
+		blur: {
+			none: { drawer_content: "backdrop-blur-none" },
+			sm: { drawer_content: "backdrop-blur-sm" },
+			md: { drawer_content: "backdrop-blur-md" },
+			lg: { drawer_content: "backdrop-blur-lg" },
+			xl: { drawer_content: "backdrop-blur-xl" }
+		},
+		border: {
+			none: { drawer_content: "border-none" },
+			subtle: { drawer_content: "border border-white/10" },
+			prominent: { drawer_content: "border-2 border-white/20" }
+		}
+	},
+	compoundVariants: [
+		{
+			placement: "left",
+			class: { drawer_base: "left-0 rounded-r-none" }
+		},
+		{
+			placement: "right",
+			class: { drawer_base: "right-0 rounded-l-none" }
+		},
+		{
+			placement: "top",
+			class: { drawer_base: "top-0 rounded-b-none" }
+		},
+		{
+			placement: "bottom",
+			class: { drawer_base: "bottom-0 rounded-t-none" }
+		},
+		{
+			variant: "glass",
+			blur: "xl",
+			class: { drawer_content: "bg-white/20" }
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		placement: "left",
+		size: "md",
+		blur: "lg",
+		border: "none"
+	}
+});
+//#endregion
+export { tva };

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

@@ -0,0 +1,49 @@
+type WidgetSize = 'small' | 'medium' | 'large';
+export type WidgetTileDefinition = {
+    id: string;
+    label: string;
+    category: string;
+    size: WidgetSize;
+};
+export declare const WidgetPreview: ({ tile, className }: {
+    tile: WidgetTileDefinition;
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const useWidgetTiles: () => {
+    editor: import("../control-center/editor").EditorState;
+    orderedTiles: ({
+        id: string;
+        label: string;
+        category: string;
+        size: "small";
+    } | {
+        id: string;
+        label: string;
+        category: string;
+        size: "medium";
+    } | {
+        id: string;
+        label: string;
+        category: string;
+        size: "large";
+    })[];
+    visibleTiles: ({
+        id: string;
+        label: string;
+        category: string;
+        size: "small";
+    } | {
+        id: string;
+        label: string;
+        category: string;
+        size: "medium";
+    } | {
+        id: string;
+        label: 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

@@ -0,0 +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"}

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

@@ -0,0 +1,182 @@
+import { useTileEditor } from "../control-center/editor.js";
+import { Surface } 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 widgetDefinitions = [
+	{
+		id: "calendar-month",
+		label: "Calendar",
+		category: "Calendar",
+		size: "small"
+	},
+	{
+		id: "world-clock",
+		label: "World Clock",
+		category: "Clock",
+		size: "small"
+	},
+	{
+		id: "weather-forecast",
+		label: "Weather",
+		category: "Weather",
+		size: "medium"
+	},
+	{
+		id: "reminders-list",
+		label: "Reminders",
+		category: "Reminders",
+		size: "medium"
+	},
+	{
+		id: "notes-summary",
+		label: "Notes",
+		category: "Notes",
+		size: "medium"
+	},
+	{
+		id: "focus-status",
+		label: "Focus",
+		category: "Focus",
+		size: "small"
+	},
+	{
+		id: "daily-summary",
+		label: "Daily Summary",
+		category: "Calendar",
+		size: "large"
+	}
+];
+var widgetSizeClasses = {
+	small: "aspect-square",
+	medium: "aspect-[2/1]",
+	large: "aspect-square"
+};
+var WidgetPreviewContent = ({ id }) => {
+	switch (id) {
+		case "calendar-month": return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(CalendarDate, {
+				"aria-hidden": "true",
+				className: "text-accent size-5"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "mt-2 text-xs font-semibold",
+				children: "October"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted text-xl font-semibold tabular-nums",
+				children: "18"
+			})
+		] });
+		case "world-clock": return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(ClockCircle, {
+				"aria-hidden": "true",
+				className: "text-accent size-5"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "mt-auto text-xl font-semibold tabular-nums",
+				children: "10:09"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted text-xs",
+				children: "New Delhi"
+			})
+		] });
+		case "weather-forecast": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-semibold",
+				children: "New Delhi"
+			}), /* @__PURE__ */ jsx(Sun, {
+				"aria-hidden": "true",
+				className: "text-warning size-5"
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-auto flex items-end justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-3xl font-semibold tabular-nums",
+				children: "25°"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted text-xs",
+				children: "Clear"
+			})]
+		})] });
+		case "reminders-list": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(ClipboardList, {
+				"aria-hidden": "true",
+				className: "text-accent size-5"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-semibold",
+				children: "Reminders"
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-muted mt-auto text-xs",
+			children: "No reminders today"
+		})] });
+		case "notes-summary": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(NotebookBookmark, {
+				"aria-hidden": "true",
+				className: "text-warning size-5"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-semibold",
+				children: "Notes"
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-muted mt-auto text-xs",
+			children: "No recent notes"
+		})] });
+		case "focus-status": return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(Moon, {
+				"aria-hidden": "true",
+				className: "text-accent size-5"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "mt-auto text-sm font-semibold",
+				children: "Focus"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted text-xs",
+				children: "Off"
+			})
+		] });
+		default: return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(CalendarDate, {
+				"aria-hidden": "true",
+				className: "text-accent size-5"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "mt-auto text-sm font-semibold",
+				children: "Today"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted text-xs",
+				children: "No events scheduled"
+			})
+		] });
+	}
+};
+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 useWidgetTiles = () => useTileEditor(widgetDefinitions, "vx:widgets");
+var WidgetTiles = () => {
+	const { visibleTiles } = useWidgetTiles();
+	return /* @__PURE__ */ jsx("div", {
+		className: "@container mx-auto w-full max-w-[352px]",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "grid auto-rows-[calc((100cqw-1rem)/2)] grid-cols-2 gap-4 pb-4",
+			children: visibleTiles.map((tile) => /* @__PURE__ */ jsx(WidgetPreview, {
+				tile,
+				className: "h-full"
+			}, tile.id))
+		})
+	});
+};
+//#endregion
+export { WidgetPreview, WidgetTiles, useWidgetTiles };

package/dist/lib/components/panel/footer/preferences/data.d.ts

@@ -0,0 +1,14 @@
+export type SidebarItem = {
+    id: string;
+    label: string;
+    icon?: string;
+    href?: string;
+    component?: React.ComponentType;
+    children?: SidebarItem[];
+};
+export type SidebarSection = {
+    title: string;
+    items: SidebarItem[];
+};
+export declare const settingsSidebar: SidebarSection[];
+//# sourceMappingURL=data.d.ts.map

package/dist/lib/components/panel/footer/preferences/data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/preferences/data.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,WAAW,EAAE,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,cAAc,EAwT3C,CAAA"}