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

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

@@ -0,0 +1,38 @@
+import type { StatusTimingOption, SuggestedStatusOption, UserStatus } from './types';
+declare const STATUS_OPTIONS: readonly [{
+    readonly id: "active";
+    readonly label: "Available";
+    readonly icon: "🟢";
+    readonly color: "bg-success";
+}, {
+    readonly id: "away";
+    readonly label: "Away";
+    readonly icon: "🌙";
+    readonly color: "bg-warning";
+}, {
+    readonly id: "idle";
+    readonly label: "Idle";
+    readonly icon: "💤";
+    readonly color: "bg-primary";
+}, {
+    readonly id: "busy";
+    readonly label: "Busy";
+    readonly icon: "🔴";
+    readonly color: "bg-danger";
+}, {
+    readonly id: "dnd";
+    readonly label: "Do not disturb";
+    readonly icon: "⛔";
+    readonly color: "bg-muted";
+}];
+declare const DEFAULT_STATUS_OPTION: {
+    readonly id: "active";
+    readonly label: "Available";
+    readonly icon: "🟢";
+    readonly color: "bg-success";
+};
+declare const SUGGESTED_STATUS_OPTIONS: readonly SuggestedStatusOption[];
+declare const STATUS_TIMING_OPTIONS: readonly StatusTimingOption[];
+declare const isColorStatus: (status?: UserStatus) => status is "active" | "away" | "busy";
+export { DEFAULT_STATUS_OPTION, STATUS_OPTIONS, STATUS_TIMING_OPTIONS, SUGGESTED_STATUS_OPTIONS, isColorStatus };
+//# sourceMappingURL=data.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/footer/data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,qBAAqB,EACrB,UAAU,EAEX,MAAM,SAAS,CAAA;AAEhB,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;EAM4B,CAAA;AAEhD,QAAA,MAAM,qBAAqB;;;;;CAAoB,CAAA;AAE/C,QAAA,MAAM,wBAAwB,EAAE,SAAS,qBAAqB,EAM7D,CAAA;AAED,QAAA,MAAM,qBAAqB,EAAE,SAAS,kBAAkB,EAOvD,CAAA;AAED,QAAA,MAAM,aAAa,GAAI,SAAS,UAAU,yCACqB,CAAA;AAE/D,OAAO,EACL,qBAAqB,EACrB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,aAAa,EACd,CAAA"}

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

@@ -0,0 +1,90 @@
+//#region src/lib/components/panel/footer/data.ts
+var STATUS_OPTIONS = [
+	{
+		id: "active",
+		label: "Available",
+		icon: "🟢",
+		color: "bg-success"
+	},
+	{
+		id: "away",
+		label: "Away",
+		icon: "🌙",
+		color: "bg-warning"
+	},
+	{
+		id: "idle",
+		label: "Idle",
+		icon: "💤",
+		color: "bg-primary"
+	},
+	{
+		id: "busy",
+		label: "Busy",
+		icon: "🔴",
+		color: "bg-danger"
+	},
+	{
+		id: "dnd",
+		label: "Do not disturb",
+		icon: "⛔",
+		color: "bg-muted"
+	}
+];
+var DEFAULT_STATUS_OPTION = STATUS_OPTIONS[0];
+var SUGGESTED_STATUS_OPTIONS = [
+	{
+		id: "meeting",
+		label: "In a meeting",
+		emoji: "🗓️"
+	},
+	{
+		id: "commuting",
+		label: "Commuting",
+		emoji: "🚌"
+	},
+	{
+		id: "sick",
+		label: "Out sick",
+		emoji: "🤒"
+	},
+	{
+		id: "vacation",
+		label: "Vacationing",
+		emoji: "🌴"
+	},
+	{
+		id: "remote",
+		label: "Working remotely",
+		emoji: "🏡"
+	}
+];
+var STATUS_TIMING_OPTIONS = [
+	{
+		id: "15min",
+		label: "For 15 minutes"
+	},
+	{
+		id: "1hour",
+		label: "For 1 hour"
+	},
+	{
+		id: "8hours",
+		label: "For 8 hours"
+	},
+	{
+		id: "24hours",
+		label: "For 24 hours"
+	},
+	{
+		id: "3days",
+		label: "For 3 days"
+	},
+	{
+		id: "forever",
+		label: "Forever"
+	}
+];
+var isColorStatus = (status) => status === "active" || status === "away" || status === "busy";
+//#endregion
+export { DEFAULT_STATUS_OPTION, STATUS_OPTIONS, STATUS_TIMING_OPTIONS, SUGGESTED_STATUS_OPTIONS, isColorStatus };

package/dist/lib/components/panel/footer/drawer-accessors.d.ts

@@ -0,0 +1,46 @@
+type Slot = (options: {
+    class?: string;
+}) => string;
+type DrawerSlots = {
+    drawer_base: Slot;
+    drawer_wrapper: Slot;
+    drawer_content: Slot;
+    drawer_header: Slot;
+    close_button: Slot;
+    empty_state: Slot;
+    empty_state_icon: Slot;
+};
+type DrawerClassNames = Partial<Record<keyof DrawerSlots, string>>;
+export declare const createFooterDrawerAccessors: <Ref, OtherProps extends object>({ slots, classNames, className, id, domRef, otherProps }: {
+    slots: DrawerSlots;
+    classNames?: DrawerClassNames;
+    className?: string;
+    id?: string;
+    domRef: Ref;
+    otherProps: OtherProps;
+}) => {
+    getDrawerBaseProps: () => OtherProps & {
+        id: string | undefined;
+        ref: Ref;
+        className: string;
+    };
+    getDrawerWrapperProps: () => {
+        className: string;
+    };
+    getDrawerContentProps: () => {
+        className: string;
+    };
+    getDrawerHeaderProps: () => {
+        className: string;
+    };
+    closeButtonClassName: string;
+    getEmptyStateProps: () => {
+        className: string;
+    };
+    getEmptyStateIconProps: () => {
+        size: number;
+        className: string;
+    };
+};
+export {};
+//# sourceMappingURL=drawer-accessors.d.ts.map

package/dist/lib/components/panel/footer/drawer-accessors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-accessors.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/footer/drawer-accessors.ts"],"names":[],"mappings":"AAEA,KAAK,IAAI,GAAG,CAAC,OAAO,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,MAAM,CAAA;AACnD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,IAAI,CAAA;IACjB,cAAc,EAAE,IAAI,CAAA;IACpB,cAAc,EAAE,IAAI,CAAA;IACpB,aAAa,EAAE,IAAI,CAAA;IACnB,YAAY,EAAE,IAAI,CAAA;IAClB,WAAW,EAAE,IAAI,CAAA;IACjB,gBAAgB,EAAE,IAAI,CAAA;CACvB,CAAA;AACD,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,WAAW,EAAE,MAAM,CAAC,CAAC,CAAA;AAElE,eAAO,MAAM,2BAA2B,GAAI,GAAG,EAAE,UAAU,SAAS,MAAM,EAAE,0DAOzE;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,GAAG,CAAA;IACX,UAAU,EAAE,UAAU,CAAA;CACvB;;;;;;;;;;;;;;;;;;;;;;;CA4BC,CAAA"}

package/dist/lib/components/panel/footer/drawer-accessors.js

@@ -0,0 +1,21 @@
+import { cn } from "@vezham/react-v3";
+//#region src/lib/components/panel/footer/drawer-accessors.ts
+var createFooterDrawerAccessors = ({ slots, classNames, className, id, domRef, otherProps }) => ({
+	getDrawerBaseProps: () => ({
+		...otherProps,
+		id,
+		ref: domRef,
+		className: slots.drawer_base({ class: cn(classNames?.drawer_base, className) })
+	}),
+	getDrawerWrapperProps: () => ({ className: slots.drawer_wrapper({ class: classNames?.drawer_wrapper }) }),
+	getDrawerContentProps: () => ({ className: slots.drawer_content({ class: classNames?.drawer_content }) }),
+	getDrawerHeaderProps: () => ({ className: slots.drawer_header({ class: classNames?.drawer_header }) }),
+	closeButtonClassName: slots.close_button({ class: classNames?.close_button }),
+	getEmptyStateProps: () => ({ className: slots.empty_state({ class: classNames?.empty_state }) }),
+	getEmptyStateIconProps: () => ({
+		size: 64,
+		className: slots.empty_state_icon({ class: classNames?.empty_state_icon })
+	})
+});
+//#endregion
+export { createFooterDrawerAccessors };

package/dist/lib/components/panel/footer/drawer-frame.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export declare const FooterDrawerFrame: ({ isOpen, onClose, backdrop, placement, wrapperClassName, contentClassName, dialogClassName, children }: {
+    isOpen: boolean;
+    onClose: () => void;
+    backdrop: "transparent" | "blur" | "opaque";
+    placement: "left" | "right" | "top" | "bottom";
+    wrapperClassName: string;
+    contentClassName: string;
+    dialogClassName: string;
+    children: ReactNode;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=drawer-frame.d.ts.map

package/dist/lib/components/panel/footer/drawer-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-frame.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/footer/drawer-frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,eAAO,MAAM,iBAAiB,GAAI,yGAS/B;IACD,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAA;IAC3C,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC9C,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB,gCAUA,CAAA"}

package/dist/lib/components/panel/footer/drawer-frame.js

@@ -0,0 +1,19 @@
+import { Drawer } from "@vezham/react-v3";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/components/panel/footer/drawer-frame.tsx
+var FooterDrawerFrame = ({ isOpen, onClose, backdrop, placement, wrapperClassName, contentClassName, dialogClassName, children }) => /* @__PURE__ */ jsx(Drawer.Backdrop, {
+	isOpen,
+	onOpenChange: (open) => !open && onClose(),
+	variant: backdrop,
+	className: wrapperClassName,
+	children: /* @__PURE__ */ jsx(Drawer.Content, {
+		placement,
+		className: contentClassName,
+		children: /* @__PURE__ */ jsx(Drawer.Dialog, {
+			className: dialogClassName,
+			children
+		})
+	})
+});
+//#endregion
+export { FooterDrawerFrame };

package/dist/lib/components/panel/footer/index.d.ts

@@ -0,0 +1,4 @@
+import type { FooterActionsProps } from './types';
+declare const Footer: ({ user, showAI, showControlCenter, controlCenter, showNotifications, showUserInfo, notificationCount, onAI, onNotificationsClick, onUserClick, toolbarAction, className }: FooterActionsProps) => import("react").JSX.Element;
+export { Footer };
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/panel/footer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/footer/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAoFjD,QAAA,MAAM,MAAM,GAAI,2KAab,kBAAkB,gCA+EpB,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

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

@@ -0,0 +1,147 @@
+import { FooterControlCenterContext } from "./control-center/footer-context.js";
+import { ACCOUNT_BUBBLE_MEDIA_QUERY } from "../responsive.js";
+import { useUser } from "../../../store/users/useUserStore.js";
+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 { 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";
+var FooterAction = ({ children, label, onPress }) => {
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		delay: 0,
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			className: "size-5 leading-none",
+			children: /* @__PURE__ */ jsx(Button, {
+				"aria-label": label,
+				isIconOnly: true,
+				variant: "ghost",
+				size: "sm",
+				className: footerActionClassName,
+				onPress,
+				children
+			})
+		}), /* @__PURE__ */ jsx(Tooltip.Content, {
+			placement: "right",
+			children: label
+		})]
+	});
+};
+var CompactActions = ({ showAI, showControlCenter, onControlCenter, showNotifications, notificationCount, onAI, onNotificationsClick }) => {
+	if (!showAI && !showNotifications && !showControlCenter) return null;
+	return /* @__PURE__ */ jsxs(Dropdown, { children: [/* @__PURE__ */ jsx(Dropdown.Trigger, {
+		"aria-label": "Open footer actions",
+		className: "button button--ghost flex h-10 w-10 items-center justify-center rounded-full",
+		children: /* @__PURE__ */ jsx(MenuDots, {
+			size: 20,
+			"aria-hidden": "true"
+		})
+	}), /* @__PURE__ */ jsx(Dropdown.Popover, { children: /* @__PURE__ */ jsxs(Dropdown.Menu, {
+		"aria-label": "Footer actions",
+		children: [
+			showControlCenter ? /* @__PURE__ */ jsxs(Dropdown.Item, {
+				onPress: onControlCenter,
+				children: [/* @__PURE__ */ jsx(Settings, {
+					size: 20,
+					"aria-hidden": "true"
+				}), "Control center"]
+			}) : null,
+			showNotifications ? /* @__PURE__ */ jsxs(Dropdown.Item, {
+				onPress: onNotificationsClick,
+				children: [
+					/* @__PURE__ */ jsx(Bell, {
+						size: 20,
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1",
+						children: "Notifications"
+					}),
+					notificationCount && notificationCount > 0 ? /* @__PURE__ */ jsx(Badge, {
+						content: String(notificationCount),
+						color: "danger",
+						size: "sm"
+					}) : null
+				]
+			}) : null,
+			showAI ? /* @__PURE__ */ jsxs(Dropdown.Item, {
+				onPress: onAI,
+				children: [/* @__PURE__ */ jsx(VezhamTamizhi, {
+					size: 20,
+					"aria-hidden": "true"
+				}), "Tamizhi AI"]
+			}) : null
+		]
+	}) })] });
+};
+var Footer = ({ user, showAI = false, showControlCenter = false, controlCenter, showNotifications = false, showUserInfo = true, notificationCount = 0, onAI, onNotificationsClick, onUserClick, toolbarAction, className }) => {
+	const { clearUser } = useUser();
+	const compact = useMediaQuery(ACCOUNT_BUBBLE_MEDIA_QUERY, { initializeWithValue: false });
+	const [controlCenterOpen, setControlCenterOpen] = useState(false);
+	const controlCenterContext = useMemo(() => ({
+		compact,
+		isOpen: controlCenterOpen,
+		onOpenChange: setControlCenterOpen
+	}), [compact, controlCenterOpen]);
+	return /* @__PURE__ */ jsxs(Fragment, { 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: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "hidden md:contents",
+				children: [showAI ? /* @__PURE__ */ jsx(FooterAction, {
+					label: "Tamizhi AI",
+					onPress: onAI,
+					children: /* @__PURE__ */ jsx(VezhamTamizhi, {
+						size: 20,
+						"aria-hidden": "true"
+					})
+				}) : null, showNotifications ? /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ jsx(FooterAction, {
+						label: "Notifications",
+						onPress: onNotificationsClick,
+						children: /* @__PURE__ */ jsx(Bell, {
+							size: 20,
+							"aria-hidden": "true"
+						})
+					}), notificationCount > 0 ? /* @__PURE__ */ jsx("span", {
+						className: "bg-danger text-danger-foreground pointer-events-none absolute -top-1 -right-1 min-w-4 rounded-full px-1 text-center text-[10px] leading-4",
+						children: notificationCount
+					}) : null]
+				}) : null]
+			}),
+			showControlCenter && /* @__PURE__ */ jsx(FooterControlCenterContext.Provider, {
+				value: controlCenterContext,
+				children: controlCenter ?? /* @__PURE__ */ jsx(DefaultControlCenter, { placement: "right bottom" })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "md:hidden",
+				children: /* @__PURE__ */ jsx(CompactActions, {
+					showControlCenter,
+					onControlCenter: () => setControlCenterOpen(true),
+					showAI,
+					showNotifications,
+					notificationCount,
+					onAI,
+					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",
+				children: toolbarAction
+			})
+		]
+	})] });
+};
+//#endregion
+export { Footer };

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

@@ -0,0 +1,4 @@
+import { Props } from './types';
+declare const NotificationDrawer: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { NotificationDrawer };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/notification-center/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,KAAK,EAAY,MAAM,SAAS,CAAA;AAGzC,QAAA,MAAM,kBAAkB,+GA8HtB,CAAA;AAIF,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

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

@@ -0,0 +1,98 @@
+import { useSettingsNavigation } from "../../../../pages/settings/navigation.js";
+import { ACCOUNT_BUBBLE_MEDIA_QUERY } from "../../responsive.js";
+import { InfoPanelSheet } from "../../info-panel/sheet.js";
+import { FooterDrawerFrame } from "../drawer-frame.js";
+import { useProps } from "./types.js";
+import { WidgetTiles, useWidgetTiles } from "./widget-tiles.js";
+import { useNavigate } from "@tanstack/react-router";
+import { forwardRef } from "react";
+import { Button, CloseButton, Drawer, ScrollShadow, useMediaQuery } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EmptyState } from "@vezham/react-pro-v3/empty-state";
+//#region src/lib/components/panel/footer/notification-center/index.tsx
+var NotificationDrawer = forwardRef((props, ref) => {
+	const { Component, getDrawerBaseProps, getDrawerWrapperProps, getDrawerContentProps, getDrawerHeaderProps, getHeaderTitleProps, closeButtonClassName, getDrawerBodyProps, getScrollShadowProps, getDrawerFooterProps, getEditButtonProps, isOpen, onClose, backdrop, placement, title, onEdit, isEmpty } = useProps({
+		...props,
+		ref
+	});
+	const drawerBaseProps = getDrawerBaseProps();
+	const navigate = useNavigate();
+	const compact = useMediaQuery(ACCOUNT_BUBBLE_MEDIA_QUERY, { initializeWithValue: false });
+	const openSettings = useSettingsNavigation();
+	const { visibleTiles } = useWidgetTiles();
+	const showEmptyState = isEmpty || visibleTiles.length === 0;
+	const content = /* @__PURE__ */ jsx(ScrollShadow, {
+		...getScrollShadowProps(),
+		children: showEmptyState ? /* @__PURE__ */ jsx(EmptyState, {
+			size: "sm",
+			className: "py-12",
+			children: /* @__PURE__ */ jsxs(EmptyState.Header, { children: [/* @__PURE__ */ jsx(EmptyState.Title, { children: "No widgets yet" }), /* @__PURE__ */ jsx(EmptyState.Description, { children: "Add widgets to personalize your Notification Center." })] })
+		}) : /* @__PURE__ */ jsx(WidgetTiles, {})
+	});
+	const handleEdit = () => {
+		if (openSettings) {
+			onClose();
+			openSettings("Edit Widgets");
+		} else if (onEdit) onEdit();
+		else {
+			onClose();
+			navigate({ to: "/widgets" });
+		}
+	};
+	const editButton = /* @__PURE__ */ jsx(Button, {
+		variant: "secondary",
+		size: "sm",
+		...getEditButtonProps(),
+		onPress: handleEdit,
+		children: "Edit Widgets"
+	});
+	if (compact) return /* @__PURE__ */ jsx(InfoPanelSheet, {
+		isOpen,
+		heading: title,
+		panel: {
+			title: typeof title === "string" ? title : "Notification Center",
+			scrollable: false,
+			content: /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full min-h-0 flex-col",
+				children: [content, editButton && /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 justify-center pt-3",
+					children: editButton
+				})]
+			})
+		},
+		onClose
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		...drawerBaseProps,
+		children: /* @__PURE__ */ jsxs(FooterDrawerFrame, {
+			isOpen,
+			onClose,
+			backdrop,
+			placement,
+			wrapperClassName: getDrawerWrapperProps().className,
+			contentClassName: `${drawerBaseProps.className} overflow-hidden`,
+			dialogClassName: getDrawerContentProps().className,
+			children: [
+				/* @__PURE__ */ jsxs(Drawer.Header, {
+					...getDrawerHeaderProps(),
+					children: [/* @__PURE__ */ jsx(Drawer.Heading, { ...getHeaderTitleProps() }), /* @__PURE__ */ jsx(CloseButton, {
+						"aria-label": "Close Notification Center",
+						className: closeButtonClassName,
+						onPress: onClose
+					})]
+				}),
+				/* @__PURE__ */ jsx(Drawer.Body, {
+					...getDrawerBodyProps(),
+					children: content
+				}),
+				editButton && /* @__PURE__ */ jsx(Drawer.Footer, {
+					...getDrawerFooterProps(),
+					children: editButton
+				})
+			]
+		})
+	});
+});
+NotificationDrawer.displayName = "NotificationDrawer";
+//#endregion
+export { NotificationDrawer };