startx 1.0.2 → 1.0.4

package/packages/ui/src/components/custom/page-section.tsx

@@ -1,23 +1,20 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import type { ReactNode } from 'react';
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ReactNode } from "react";
 
-import { cn } from '../lib/utils';
-import { Separator } from '../ui/separator';
-const pageSectionVariant = cva(
-	'flex flex-col space-y-4 rounded-lg  bg-background/70 p-6 md:px-6 px-2 w-full h-full ',
-	{
-		variants: {
-			variant: {
-				default: '',
-				outline: 'border',
-				transparent: 'bg-transparent md:px-0 px-0',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
+import { cn } from "@repo/ui/lib/utils";
+import { Separator } from "../ui/separator";
+const pageSectionVariant = cva("flex flex-col space-y-4 rounded-lg  bg-background/70 p-6 md:px-6 px-2 w-full h-full ", {
+	variants: {
+		variant: {
+			default: "",
+			outline: "border",
+			transparent: "bg-transparent md:px-0 px-0",
 		},
 	},
-);
+	defaultVariants: {
+		variant: "default",
+	},
+});
 type PageSectionProps = {
 	icon?: ReactNode;
 	title: ReactNode;

package/packages/ui/src/components/custom/simple-popover.tsx

@@ -1,12 +1,12 @@
-import type { ClassNameValue } from 'tailwind-merge';
+import type { ClassNameValue } from "tailwind-merge";
 
-import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
-import { cn } from '../lib/utils';
+import { cn } from "@repo/ui/lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover";
 
 interface SimplePopoverProps {
 	children: React.ReactNode;
 	trigger: React.ReactNode;
-	side?: 'top' | 'right' | 'bottom' | 'left';
+	side?: "top" | "right" | "bottom" | "left";
 	sideOffset?: number;
 	open?: boolean;
 	onOpenChange?: (open: boolean) => void;
@@ -17,11 +17,7 @@ export const SimplePopover = (props: SimplePopoverProps) => {
 	return (
 		<Popover open={props.open} onOpenChange={props.onOpenChange}>
 			<PopoverTrigger asChild>{props.trigger}</PopoverTrigger>
-			<PopoverContent
-				side={props.side}
-				sideOffset={props.sideOffset}
-				className={cn(props.className)}
-			>
+			<PopoverContent side={props.side} sideOffset={props.sideOffset} className={cn(props.className)}>
 				{props.children}
 			</PopoverContent>
 		</Popover>

package/packages/ui/src/components/custom/theme-provider.tsx

@@ -1,61 +1,136 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import { Toaster } from 'sonner';
-type Theme = 'dark' | 'light' | 'system';
+import * as React from "react";
+import { Toaster } from "../ui/sonner";
+
+export type Mode = "dark" | "light" | "system";
+export type ThemeColor =
+	| "default"
+	| "orange"
+	| "purple"
+	| "emerald"
+	| "rose"
+	| "amber"
+	| "brick"
+	| "rust"
+	| "cyan"
+	| "indigo"
+	| "blue";
+
+export const themes: Record<ThemeColor, string> = {
+	default: "default",
+	orange: "orange",
+	purple: "purple",
+	emerald: "emerald",
+	rose: "rose",
+	amber: "amber",
+	brick: "brick",
+	rust: "rust",
+	cyan: "cyan",
+	indigo: "indigo",
+	blue: "blue",
+};
 
 type ThemeProviderProps = {
 	children: React.ReactNode;
-	defaultTheme?: Theme;
-	storageKey?: string;
+	defaultMode?: Mode;
+	defaultColor?: ThemeColor;
+	storageKeyPrefix?: string;
 };
 
 type ThemeProviderState = {
-	theme: Theme;
-	setTheme: (theme: Theme) => void;
+	mode: Mode;
+	setMode: (mode: Mode) => void;
+	color: ThemeColor;
+	setColor: (color: ThemeColor) => void;
 };
 
-const initialState: ThemeProviderState = {
-	theme: 'system',
-	setTheme: () => null,
-};
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+const ThemeProviderContext = React.createContext<ThemeProviderState | undefined>(undefined);
 
-export const ThemeProvider = ({
+export function ThemeProvider({
 	children,
-	defaultTheme = 'dark',
-	storageKey = 'vite-ui-theme',
+	defaultMode = "system",
+	defaultColor = "default",
+	storageKeyPrefix = "app-theme",
 	...props
-}: ThemeProviderProps) => {
-	const [theme, setTheme] = useState<Theme>(
-		() =>
-			(typeof window !== 'undefined' && (localStorage.getItem(storageKey) as Theme)) ||
-			defaultTheme,
+}: ThemeProviderProps) {
+	const modeKey = `${storageKeyPrefix}-mode`;
+	const colorKey = `${storageKeyPrefix}-color`;
+
+	// --- State ---
+	const [mode, setModeState] = React.useState<Mode>(() => (localStorage.getItem(modeKey) as Mode) || defaultMode);
+
+	const [color, setColorState] = React.useState<ThemeColor>(
+		() => (localStorage.getItem(colorKey) as ThemeColor) || defaultColor
+	);
+
+	// --- Actions ---
+	const setMode = React.useCallback(
+		(newMode: Mode) => {
+			if (!document.startViewTransition) {
+				localStorage.setItem(modeKey, newMode);
+				setModeState(newMode);
+				return;
+			}
+
+			document.startViewTransition(() => {
+				localStorage.setItem(modeKey, newMode);
+				setModeState(newMode);
+			});
+		},
+		[modeKey]
 	);
 
-	useEffect(() => {
-		const root = window.document.documentElement;
+	const setColor = React.useCallback(
+		(newColor: ThemeColor) => {
+			if (!document.startViewTransition) {
+				localStorage.setItem(colorKey, newColor);
+				setColorState(newColor);
+				return;
+			}
 
-		root.classList.remove('light', 'dark');
+			document.startViewTransition(() => {
+				localStorage.setItem(colorKey, newColor);
+				setColorState(newColor);
+			});
+		},
+		[colorKey]
+	);
 
-		if (theme === 'system') {
-			const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-				? 'dark'
-				: 'light';
+	// --- Apply Mode (Light/Dark) ---
+	React.useEffect(() => {
+		const root = document.documentElement;
+		root.classList.remove("light", "dark");
 
+		if (mode === "system") {
+			const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 			root.classList.add(systemTheme);
 			return;
 		}
 
-		root.classList.add(theme);
-	}, [theme]);
+		root.classList.add(mode);
+	}, [mode]);
 
-	const value = {
-		theme,
-		setTheme: (theme: Theme) => {
-			localStorage.setItem(storageKey, theme);
-			setTheme(theme);
-		},
-	};
+	// --- Apply Color Scheme ---
+	React.useEffect(() => {
+		const root = document.documentElement;
+		if (color === "default") {
+			root.removeAttribute("data-theme");
+		} else {
+			root.setAttribute("data-theme", color);
+		}
+	}, [color]);
+
+	// --- System Mode Listener ---
+	React.useEffect(() => {
+		if (mode !== "system") return;
+
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const handleChange = () => setModeState("system");
+
+		mediaQuery.addEventListener("change", handleChange);
+		return () => mediaQuery.removeEventListener("change", handleChange);
+	}, [mode]);
+
+	const value = React.useMemo(() => ({ mode, setMode, color, setColor }), [mode, color, setMode, setColor]);
 
 	return (
 		<ThemeProviderContext.Provider {...props} value={value}>
@@ -63,12 +138,12 @@ export const ThemeProvider = ({
 			{children}
 		</ThemeProviderContext.Provider>
 	);
-};
+}
 
 export const useTheme = () => {
-	const context = useContext(ThemeProviderContext);
-
-	if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
-
+	const context = React.useContext(ThemeProviderContext);
+	if (context === undefined) {
+		throw new Error("useTheme must be used within a ThemeProvider");
+	}
 	return context;
 };

package/packages/ui/src/components/custom/typography.tsx

@@ -1,6 +1,6 @@
-import type React from 'react';
+import type React from "react";
 
-import { cn } from '../lib/utils';
+import { cn } from "@repo/ui/lib/utils";
 
 interface TypographyProps {
 	children: React.ReactNode; // Text content to display
@@ -8,71 +8,69 @@ interface TypographyProps {
 }
 
 const H1: React.FC<TypographyProps> = ({ children, className }) => (
-	<h1 className={cn('text-4xl font-bold', className)}>{children}</h1>
+	<h1 className={cn("text-4xl font-bold", className)}>{children}</h1>
 );
 
 const H2: React.FC<TypographyProps> = ({ children, className }) => (
-	<h2 className={cn('text-3xl font-semibold', className)}>{children}</h2>
+	<h2 className={cn("text-3xl font-semibold", className)}>{children}</h2>
 );
 
 const H3: React.FC<TypographyProps> = ({ children, className }) => (
-	<h3 className={cn('text-2xl font-medium', className)}>{children}</h3>
+	<h3 className={cn("text-2xl font-medium", className)}>{children}</h3>
 );
 
 const H4: React.FC<TypographyProps> = ({ children, className }) => (
-	<h4 className={cn('text-xl font-semibold', className)}>{children}</h4>
+	<h4 className={cn("text-xl font-semibold", className)}>{children}</h4>
 );
 
 const H5: React.FC<TypographyProps> = ({ children, className }) => (
-	<h5 className={cn('text-lg font-medium', className)}>{children}</h5>
+	<h5 className={cn("text-lg font-medium", className)}>{children}</h5>
 );
 
 const H6: React.FC<TypographyProps> = ({ children, className }) => (
-	<h6 className={cn('font-semibold', className)}>{children}</h6>
+	<h6 className={cn("font-semibold", className)}>{children}</h6>
 );
 
-const Default: React.FC<TypographyProps> = ({ children, className }) => (
-	<p className={cn(className)}>{children}</p>
-);
+const Default: React.FC<TypographyProps> = ({ children, className }) => <p className={cn(className)}>{children}</p>;
 
 const Secondary: React.FC<TypographyProps> = ({ children, className }) => (
-	<span className={cn('text-muted-foreground', className)}>{children}</span>
+	<span className={cn("text-muted-foreground", className)}>{children}</span>
 );
 
 const Primary: React.FC<TypographyProps> = ({ children, className }) => (
-	<span className={cn('text-primary', className)}>{children}</span>
+	<span className={cn("text-primary", className)}>{children}</span>
 );
 
 const Error: React.FC<TypographyProps> = ({ children, className }) => (
-	<span className={cn('text-destructive text-sm', className)}>{children}</span>
+	<span className={cn("text-destructive text-sm", className)}>{children}</span>
 );
 
 const Warning: React.FC<TypographyProps> = ({ children, className }) => (
-	<span className={cn('text-yellow-500 text-sm', className)}>{children}</span>
+	<span className={cn("text-yellow-500 text-sm", className)}>{children}</span>
 );
 
 const Success: React.FC<TypographyProps> = ({ children, className }) => (
-	<span className={cn('text-green-500 text-sm', className)}>{children}</span>
+	<span className={cn("text-green-500 text-sm", className)}>{children}</span>
 );
 
 const Hint: React.FC<TypographyProps> = ({ children, className }) => (
-	<span className={cn('text-muted-foreground text-xs', className)}>{children}</span>
+	<span className={cn("text-muted-foreground text-xs", className)}>{children}</span>
 );
 
 const Grayed: React.FC<TypographyProps> = ({ children, className }) => (
-	<p className={cn('text-gray-500', className)}>{children}</p>
+	<p className={cn("text-gray-500", className)}>{children}</p>
 );
 
 const Muted: React.FC<TypographyProps> = ({ children, className }) => (
-	<p className={cn('text-muted', className)}>{children}</p>
+	<p className={cn("text-muted", className)}>{children}</p>
 );
 
 const Key: React.FC<TypographyProps> = ({ children, className }) => (
-	<span className={cn('font-thin text-xs', className)}>{children}</span>
+	<span className={cn("font-thin text-xs", className)}>{children}</span>
 );
 
 const Value: React.FC<TypographyProps> = ({ children, className }) => (
-	<span className={cn('text-lg', className)}>{children}</span>
+	<span className={cn("text-lg", className)}>{children}</span>
 );
 
 const List: React.FC<TypographyProps & { label?: string }> = ({ children, className, label }) => (
@@ -82,7 +80,7 @@ const List: React.FC<TypographyProps & { label?: string }> = ({ children, classN
 	</ul>
 );
 const Item: React.FC<TypographyProps> = ({ children, className }) => (
-	<li className={cn('ml-6 text-sm list-disc', className)}>{children}</li>
+	<li className={cn("ml-6 text-sm list-disc", className)}>{children}</li>
 );
 
 // Combine all typography components into a single object

package/packages/ui/src/components/extensions/timeline.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const Timeline = React.forwardRef<HTMLOListElement, React.HTMLAttributes<HTMLOListElement>>(
+	({ className, ...props }, ref) => <ol ref={ref} className={cn("flex flex-col", className)} {...props} />
+);
+Timeline.displayName = "Timeline";
+
+const TimelineItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement> & { className: string }>(
+	({ className, ...props }, ref) => (
+		<li ref={ref} className={cn("relative flex flex-col p-6 pl-3 pt-0 [&>*]:mb-2", className)} {...props} />
+	)
+);
+TimelineItem.displayName = "TimelineItem";
+
+const TimelineTime = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+	({ className, ...props }, ref) => (
+		<p
+			ref={ref}
+			className={cn(
+				"absolute translate-x-36 md:-translate-x-24 text-sm font-semibold leading-none text-secondary-foreground",
+				className
+			)}
+			{...props}
+		/>
+	)
+);
+TimelineTime.displayName = "TimelineTime";
+
+const TimelineConnector = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn("absolute top-[5px] left-[30px] -translate-x-1/2 translate-y-2 h-full w-px bg-primary", className)}
+			{...props}
+		/>
+	)
+);
+TimelineConnector.displayName = "TimelineConnector";
+
+const TimelineHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center gap-4", className)} {...props} />
+);
+TimelineHeader.displayName = "TimelineHeader";
+
+const TimelineTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+	({ className, children, ...props }, ref) => (
+		<h3
+			ref={ref}
+			className={cn("font-semibold leading-none tracking-tight text-secondary-foreground", className)}
+			{...props}
+		>
+			{children}
+		</h3>
+	)
+);
+TimelineTitle.displayName = "CardTitle";
+
+const TimelineIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn(
+				"grid place-content-center flex-col text-center items-center  size-7 justify-center relative left-1 bg-primary rounded-full",
+				className
+			)}
+			{...props}
+		>
+			{props.children}
+		</div>
+	)
+);
+TimelineIcon.displayName = "TimelineIcon";
+
+const TimelineDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+	({ className, ...props }, ref) => (
+		<p ref={ref} className={cn("text-sm text-muted-foreground max-w-sm ml-5", className)} {...props} />
+	)
+);
+TimelineDescription.displayName = "TimelineDescription";
+
+const TimelineContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("flex flex-col items-start p-6 pt-0", className)} {...props} />
+	)
+);
+TimelineContent.displayName = "TimelineContent";
+
+export {
+	Timeline,
+	TimelineItem,
+	TimelineConnector,
+	TimelineHeader,
+	TimelineTitle,
+	TimelineIcon,
+	TimelineDescription,
+	TimelineContent,
+	TimelineTime,
+};

package/packages/ui/src/components/ui/alert-dialog.tsx

@@ -1,118 +1,56 @@
-"use client";
-
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import React from "react";
-
-import { buttonVariants } from "@/components/ui/button";
-
-import { cn } from "../lib/utils";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const alertVariants = cva(
+	"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+	{
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+);
 
-const AlertDialogOverlay = React.forwardRef<
-	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-	<AlertDialogPrimitive.Overlay
-		className={cn(
-			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-			className
-		)}
-		{...props}
-		ref={ref}
-	/>
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
+}
 
-const AlertDialogContent = React.forwardRef<
-	React.ElementRef<typeof AlertDialogPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-	<AlertDialogPortal>
-		<AlertDialogOverlay />
-		<AlertDialogPrimitive.Content
-			ref={ref}
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-title"
 			className={cn(
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
 				className
 			)}
 			{...props}
 		/>
-	</AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
+	);
+}
 
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div
-		className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-		{...props}
-	/>
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-	React.ElementRef<typeof AlertDialogPrimitive.Title>,
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-	<AlertDialogPrimitive.Title
-		ref={ref}
-		className={cn("text-lg font-semibold", className)}
-		{...props}
-	/>
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-	React.ElementRef<typeof AlertDialogPrimitive.Description>,
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-	<AlertDialogPrimitive.Description
-		ref={ref}
-		className={cn("text-sm text-muted-foreground", className)}
-		{...props}
-	/>
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-	React.ElementRef<typeof AlertDialogPrimitive.Action>,
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-	<AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+				className
+			)}
+			{...props}
+		/>
+	);
+}
 
-const AlertDialogCancel = React.forwardRef<
-	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-	<AlertDialogPrimitive.Cancel
-		ref={ref}
-		className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-		{...props}
-	/>
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props} />;
+}
 
-export {
-	AlertDialog,
-	AlertDialogPortal,
-	AlertDialogOverlay,
-	AlertDialogTrigger,
-	AlertDialogContent,
-	AlertDialogHeader,
-	AlertDialogFooter,
-	AlertDialogTitle,
-	AlertDialogDescription,
-	AlertDialogAction,
-	AlertDialogCancel,
-};
+export { Alert, AlertTitle, AlertDescription, AlertAction };