@victusvinceere/saas-core 0.1.0

package/dist/components/auth/index.mjs

@@ -0,0 +1,696 @@
+"use client";
+
+// src/components/ui/avatar.tsx
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/avatar.tsx
+import { jsx } from "react/jsx-runtime";
+function Avatar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      className: cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/drawer.tsx
+import { Drawer as DrawerPrimitive } from "vaul";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DrawerPrimitive.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsx4(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs2(
+      DrawerPrimitive.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx4("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DrawerPrimitive.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+
+// src/components/auth/user-button.tsx
+import { signOut, useSession } from "next-auth/react";
+import { LogOut, Settings, User, CreditCard, Moon, Sun } from "lucide-react";
+import Link from "next/link";
+
+// src/hooks/use-mobile.ts
+import * as React from "react";
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(void 0);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+
+// src/components/auth/user-button.tsx
+import { useTheme } from "next-themes";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var defaultMenuItems = [
+  {
+    icon: User,
+    label: "Profile",
+    href: "/dashboard/settings/profile"
+  },
+  {
+    icon: CreditCard,
+    label: "Billing",
+    href: "/dashboard/settings/billing"
+  },
+  {
+    icon: Settings,
+    label: "Settings",
+    href: "/dashboard/settings"
+  }
+];
+function UserButton({
+  menuItems = defaultMenuItems,
+  signInHref = "/login",
+  showThemeToggle = true
+}) {
+  const { data: session } = useSession();
+  const isMobile = useIsMobile();
+  const { theme, setTheme } = useTheme();
+  if (!session?.user) {
+    return /* @__PURE__ */ jsx5(Button, { asChild: true, variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx5(Link, { href: signInHref, children: "Sign in" }) });
+  }
+  const initials = session.user.name?.split(" ").map((n) => n[0]).join("").toUpperCase() || session.user.email?.[0]?.toUpperCase() || "U";
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+  const handleSignOut = () => {
+    signOut({ callbackUrl: "/" });
+  };
+  const AvatarButton = /* @__PURE__ */ jsx5(Button, { variant: "ghost", className: "relative h-8 w-8 rounded-full", children: /* @__PURE__ */ jsxs3(Avatar, { className: "h-8 w-8", children: [
+    /* @__PURE__ */ jsx5(
+      AvatarImage,
+      {
+        src: session.user.image || void 0,
+        alt: session.user.name || "User"
+      }
+    ),
+    /* @__PURE__ */ jsx5(AvatarFallback, { className: "bg-primary/10 text-primary", children: initials })
+  ] }) });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs3(Drawer, { children: [
+      /* @__PURE__ */ jsx5(DrawerTrigger, { asChild: true, children: AvatarButton }),
+      /* @__PURE__ */ jsxs3(DrawerContent, { children: [
+        /* @__PURE__ */ jsx5(DrawerHeader, { className: "text-left", children: /* @__PURE__ */ jsx5(DrawerTitle, { children: "Account" }) }),
+        /* @__PURE__ */ jsxs3("div", { className: "px-4 pb-8", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "mb-6 flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs3(Avatar, { className: "h-12 w-12", children: [
+              /* @__PURE__ */ jsx5(
+                AvatarImage,
+                {
+                  src: session.user.image || void 0,
+                  alt: session.user.name || "User"
+                }
+              ),
+              /* @__PURE__ */ jsx5(AvatarFallback, { className: "bg-primary/10 text-primary text-lg", children: initials })
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { children: [
+              /* @__PURE__ */ jsx5("p", { className: "font-medium", children: session.user.name || "User" }),
+              /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: session.user.email })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+            menuItems.map((item) => /* @__PURE__ */ jsx5(
+              Button,
+              {
+                variant: "ghost",
+                className: "w-full justify-start",
+                asChild: true,
+                children: /* @__PURE__ */ jsxs3(Link, { href: item.href, children: [
+                  /* @__PURE__ */ jsx5(item.icon, { className: "mr-3 h-4 w-4" }),
+                  item.label
+                ] })
+              },
+              item.label
+            )),
+            showThemeToggle && /* @__PURE__ */ jsxs3(
+              Button,
+              {
+                variant: "ghost",
+                className: "w-full justify-start",
+                onClick: toggleTheme,
+                children: [
+                  theme === "dark" ? /* @__PURE__ */ jsx5(Sun, { className: "mr-3 h-4 w-4" }) : /* @__PURE__ */ jsx5(Moon, { className: "mr-3 h-4 w-4" }),
+                  theme === "dark" ? "Light mode" : "Dark mode"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx5("div", { className: "my-2 border-t" }),
+            /* @__PURE__ */ jsxs3(
+              Button,
+              {
+                variant: "ghost",
+                className: "w-full justify-start text-destructive hover:text-destructive",
+                onClick: handleSignOut,
+                children: [
+                  /* @__PURE__ */ jsx5(LogOut, { className: "mr-3 h-4 w-4" }),
+                  "Sign out"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx5(DropdownMenuTrigger, { asChild: true, children: AvatarButton }),
+    /* @__PURE__ */ jsxs3(DropdownMenuContent, { className: "w-56", align: "end", forceMount: true, children: [
+      /* @__PURE__ */ jsx5(DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col space-y-1", children: [
+        /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium leading-none", children: session.user.name || "User" }),
+        /* @__PURE__ */ jsx5("p", { className: "text-xs leading-none text-muted-foreground", children: session.user.email })
+      ] }) }),
+      /* @__PURE__ */ jsx5(DropdownMenuSeparator, {}),
+      menuItems.map((item) => /* @__PURE__ */ jsx5(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs3(Link, { href: item.href, children: [
+        /* @__PURE__ */ jsx5(item.icon, { className: "mr-2 h-4 w-4" }),
+        item.label
+      ] }) }, item.label)),
+      showThemeToggle && /* @__PURE__ */ jsxs3(DropdownMenuItem, { onClick: toggleTheme, children: [
+        theme === "dark" ? /* @__PURE__ */ jsx5(Sun, { className: "mr-2 h-4 w-4" }) : /* @__PURE__ */ jsx5(Moon, { className: "mr-2 h-4 w-4" }),
+        theme === "dark" ? "Light mode" : "Dark mode"
+      ] }),
+      /* @__PURE__ */ jsx5(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs3(
+        DropdownMenuItem,
+        {
+          onClick: handleSignOut,
+          className: "text-destructive focus:text-destructive",
+          children: [
+            /* @__PURE__ */ jsx5(LogOut, { className: "mr-2 h-4 w-4" }),
+            "Sign out"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/ui/input.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Label2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Separator2({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/auth/auth-form.tsx
+import { signIn } from "next-auth/react";
+import { useState as useState2 } from "react";
+import { Loader2 } from "lucide-react";
+import Link2 from "next/link";
+import { useSearchParams } from "next/navigation";
+import { Fragment, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function AuthForm({
+  mode,
+  providers = ["google", "email"],
+  signupHref = "/signup",
+  loginHref = "/login",
+  verifyRequestHref = "/verify-request",
+  defaultCallbackUrl = "/dashboard"
+}) {
+  const [email, setEmail] = useState2("");
+  const [isLoading, setIsLoading] = useState2(false);
+  const [isGoogleLoading, setIsGoogleLoading] = useState2(false);
+  const [isGithubLoading, setIsGithubLoading] = useState2(false);
+  const [error, setError] = useState2("");
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl") || defaultCallbackUrl;
+  const isLogin = mode === "login";
+  const showGoogle = providers.includes("google");
+  const showGithub = providers.includes("github");
+  const showEmail = providers.includes("email");
+  const handleEmailSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError("");
+    try {
+      const result = await signIn("resend", {
+        email,
+        callbackUrl,
+        redirect: false
+      });
+      if (result?.error) {
+        setError("Failed to send magic link. Please try again.");
+      } else {
+        window.location.href = verifyRequestHref;
+      }
+    } catch {
+      setError("Something went wrong");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleGoogleSignIn = async () => {
+    setIsGoogleLoading(true);
+    try {
+      await signIn("google", {
+        callbackUrl
+      });
+    } catch (error2) {
+      console.error("Google sign in error:", error2);
+    } finally {
+      setIsGoogleLoading(false);
+    }
+  };
+  const handleGithubSignIn = async () => {
+    setIsGithubLoading(true);
+    try {
+      await signIn("github", {
+        callbackUrl
+      });
+    } catch (error2) {
+      console.error("GitHub sign in error:", error2);
+    } finally {
+      setIsGithubLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "space-y-2 text-center", children: [
+      /* @__PURE__ */ jsx9("h1", { className: "text-2xl font-semibold tracking-tight", children: isLogin ? "Welcome back" : "Create an account" }),
+      /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground", children: isLogin ? "Sign in to your account to continue" : "Enter your email to get started" })
+    ] }),
+    error && /* @__PURE__ */ jsx9("div", { className: "p-3 text-sm text-destructive bg-destructive/10 rounded-md", children: error }),
+    showGoogle && /* @__PURE__ */ jsxs4(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        className: "w-full",
+        onClick: handleGoogleSignIn,
+        disabled: isGoogleLoading,
+        children: [
+          isGoogleLoading ? /* @__PURE__ */ jsx9(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxs4("svg", { className: "mr-2 h-4 w-4", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsx9(
+              "path",
+              {
+                d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+                fill: "#4285F4"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "path",
+              {
+                d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+                fill: "#34A853"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "path",
+              {
+                d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+                fill: "#FBBC05"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "path",
+              {
+                d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+                fill: "#EA4335"
+              }
+            )
+          ] }),
+          "Continue with Google"
+        ]
+      }
+    ),
+    showGithub && /* @__PURE__ */ jsxs4(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        className: "w-full",
+        onClick: handleGithubSignIn,
+        disabled: isGithubLoading,
+        children: [
+          isGithubLoading ? /* @__PURE__ */ jsx9(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx9("svg", { className: "mr-2 h-4 w-4", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx9("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }) }),
+          "Continue with GitHub"
+        ]
+      }
+    ),
+    showEmail && (showGoogle || showGithub) && /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx9(Separator2, { className: "w-full" }) }),
+      /* @__PURE__ */ jsx9("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx9("span", { className: "bg-background px-2 text-muted-foreground", children: "Or continue with email" }) })
+    ] }),
+    showEmail && /* @__PURE__ */ jsxs4("form", { onSubmit: handleEmailSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx9(Label2, { htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ jsx9(
+          Input,
+          {
+            id: "email",
+            type: "email",
+            placeholder: "name@example.com",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            required: true,
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx9(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx9(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+        "Sending magic link..."
+      ] }) : "Send magic link" })
+    ] }),
+    /* @__PURE__ */ jsx9("p", { className: "text-center text-sm text-muted-foreground", children: isLogin ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+      "Don't have an account?",
+      " ",
+      /* @__PURE__ */ jsx9(Link2, { href: signupHref, className: "text-primary hover:underline", children: "Sign up" })
+    ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+      "Already have an account?",
+      " ",
+      /* @__PURE__ */ jsx9(Link2, { href: loginHref, className: "text-primary hover:underline", children: "Sign in" })
+    ] }) })
+  ] });
+}
+export {
+  AuthForm,
+  UserButton
+};
+//# sourceMappingURL=index.mjs.map