love-ui 1.2.17 → 1.2.18

package/registry/default/blocks/404-2/components/not-found.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@/registry/default/ui/button";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyTitle,
+} from "@/registry/default/ui/empty";
+import { HomeIcon, CompassIcon } from "lucide-react";
+
+export function NotFoundPage() {
+	return (
+		<div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden">
+			<Empty>
+				<EmptyHeader>
+					<EmptyTitle className="mask-b-from-20% mask-b-to-80% font-extrabold text-9xl">
+						404
+					</EmptyTitle>
+					<EmptyDescription className="-mt-8 text-nowrap text-foreground/80">
+						The page you're looking for might have been <br />
+						moved or doesn't exist.
+					</EmptyDescription>
+				</EmptyHeader>
+				<EmptyContent>
+					<div className="flex gap-2">
+						<Button asChild>
+							<a href="#">
+								<HomeIcon data-icon="inline-start" />
+								Go Home
+							</a>
+						</Button>
+
+						<Button asChild variant="outline">
+							<a href="#">
+								<CompassIcon data-icon="inline-start" />{" "}
+								Explore
+							</a>
+						</Button>
+					</div>
+				</EmptyContent>
+			</Empty>
+		</div>
+	);
+}

package/registry/default/blocks/auth1/app/page.tsx

@@ -0,0 +1,5 @@
+import { AuthPage } from "../components/auth-page";
+
+export default function DemoPage() {
+	return <AuthPage />;
+}

package/registry/default/blocks/auth1/components/auth-page.tsx

@@ -0,0 +1,66 @@
+import { GithubIcon } from "./icons/github-icon";
+import { GoogleIcon } from "./icons/google-icon";
+import { Logo } from "./logo";
+import { Particles } from "./particles";
+import { Button } from "@/registry/default/ui/button";
+import { ChevronLeftIcon } from "lucide-react";
+
+export function AuthPage() {
+	return (
+		<div className="relative w-full md:h-screen md:overflow-hidden">
+			<Particles
+				className="absolute inset-0"
+				color="#666666"
+				ease={20}
+				quantity={120}
+			/>
+			<div className="relative mx-auto flex min-h-screen max-w-5xl flex-col justify-center px-8">
+				<Button asChild className="absolute top-4 left-4" variant="ghost">
+					<a href="#">
+						<ChevronLeftIcon data-icon="inline-start" />
+						Home
+					</a>
+				</Button>
+
+				<div className="mx-auto space-y-4 sm:w-sm">
+					<Logo className="h-5" />
+					<div className="flex flex-col space-y-1">
+						<h1 className="font-bold text-2xl tracking-wide">
+							Sign In or Join Now!
+						</h1>
+						<p className="text-base text-muted-foreground">
+							Sign in or create your LoveUI account.
+						</p>
+					</div>
+					<div className="space-y-2">
+						<Button className="w-full" type="button">
+							<GoogleIcon data-icon="inline-start" />
+							Continue with Google
+						</Button>
+						<Button className="w-full" type="button">
+							<GithubIcon data-icon="inline-start" />
+							Continue with GitHub
+						</Button>
+					</div>
+					<p className="mt-8 text-muted-foreground text-sm">
+						By clicking continue, you agree to our{" "}
+						<a
+							className="underline underline-offset-4 hover:text-primary"
+							href="#"
+						>
+							Terms of Service
+						</a>{" "}
+						and{" "}
+						<a
+							className="underline underline-offset-4 hover:text-primary"
+							href="#"
+						>
+							Privacy Policy
+						</a>
+						.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}

package/registry/default/blocks/auth1/components/icons/github-icon.tsx

@@ -0,0 +1,10 @@
+export function GithubIcon(props: React.ComponentProps<"svg">) {
+	return (
+		<svg viewBox="0 0 438.549 438.549" {...props}>
+			<path
+				d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}

package/registry/default/blocks/auth1/components/icons/google-icon.tsx

@@ -0,0 +1,14 @@
+export function GoogleIcon(props: React.ComponentProps<"svg">) {
+	return (
+		<svg
+			fill="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<g>
+				<path d="M12.479,14.265v-3.279h11.049c0.108,0.571,0.164,1.247,0.164,1.979c0,2.46-0.672,5.502-2.84,7.669C18.744,22.829,16.051,24,12.483,24C5.869,24,0.308,18.613,0.308,12S5.869,0,12.483,0c3.659,0,6.265,1.436,8.223,3.307L18.392,5.62c-1.404-1.317-3.307-2.341-5.913-2.341C7.65,3.279,3.873,7.171,3.873,12s3.777,8.721,8.606,8.721c3.132,0,4.916-1.258,6.059-2.401c0.927-0.927,1.537-2.251,1.777-4.059L12.479,14.265z" />
+			</g>
+		</svg>
+	);
+}

package/registry/default/blocks/auth1/components/logo.tsx

@@ -0,0 +1,88 @@
+export const Logo = (props: React.ComponentProps<"svg">) => (
+  <svg
+  width="220"
+  height="48"
+  viewBox="0 0 220 48"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <defs>
+    <linearGradient id="loveui-blue" x1="0" y1="0" x2="48" y2="48">
+      <stop stopColor="#38A3FF" />
+      <stop offset="0.55" stopColor="#1266F1" />
+      <stop offset="1" stopColor="#0B3FD8" />
+    </linearGradient>
+
+    <linearGradient id="loveui-shine" x1="0" y1="0" x2="1" y2="1">
+      <stop stopColor="#FFFFFF" stopOpacity="0.9" />
+      <stop offset="1" stopColor="#BBD8FF" stopOpacity="0.4" />
+    </linearGradient>
+  </defs>
+
+  <g transform="translate(0 0)">
+    <rect
+      x="0"
+      y="0"
+      width="48"
+      height="48"
+      rx="12"
+      fill="url(#loveui-blue)"
+    />
+
+    <path
+      d="
+        M12 10
+        C12 8.3 13.3 7 15 7
+        H18
+        C19.7 7 21 8.3 21 10
+        V25
+        C21 27.2 22.8 29 25 29
+        H35
+        C36.7 29 38 30.3 38 32
+        V34
+        C38 35.7 36.7 37 35 37
+        H15
+        C13.3 37 12 35.7 12 34
+        Z"
+      fill="white"
+    />
+
+    <rect
+      x="28"
+      y="14"
+      width="9"
+      height="9"
+      rx="3"
+      fill="white"
+    />
+
+    <path
+      d="
+        M21 25
+        C21 27.2 22.8 29 25 29
+        H27
+        V34
+        C27 35.7 25.7 37 24 37
+        H15
+        C13.3 37 12 35.7 12 34
+        V29
+        H18
+        C19.7 29 21 27.7 21 25
+        Z"
+      fill="url(#loveui-shine)"
+      opacity="0.5"
+    />
+  </g>
+  <text
+    x="62"
+    y="31"
+    fontFamily="Inter, Geist, sans-serif"
+    fontSize="24"
+    fontWeight="700"
+    letterSpacing="-0.04em"
+    fill="currentColor"
+  >
+    LoveUI
+  </text>
+</svg>
+);

package/registry/default/blocks/auth1/components/particles.tsx

@@ -0,0 +1,321 @@
+"use client"
+
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react"
+
+import { cn } from "@/lib/utils"
+
+interface MousePosition {
+  x: number
+  y: number
+}
+
+function MousePosition(): MousePosition {
+  const [mousePosition, setMousePosition] = useState<MousePosition>({
+    x: 0,
+    y: 0,
+  })
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      setMousePosition({ x: event.clientX, y: event.clientY })
+    }
+
+    window.addEventListener("mousemove", handleMouseMove)
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove)
+    }
+  }, [])
+
+  return mousePosition
+}
+
+interface ParticlesProps extends ComponentPropsWithoutRef<"div"> {
+  className?: string
+  quantity?: number
+  staticity?: number
+  ease?: number
+  size?: number
+  refresh?: boolean
+  color?: string
+  vx?: number
+  vy?: number
+}
+
+function hexToRgb(hex: string): number[] {
+  hex = hex.replace("#", "")
+
+  if (hex.length === 3) {
+    hex = hex
+      .split("")
+      .map((char) => char + char)
+      .join("")
+  }
+
+  const hexInt = parseInt(hex, 16)
+  const red = (hexInt >> 16) & 255
+  const green = (hexInt >> 8) & 255
+  const blue = hexInt & 255
+  return [red, green, blue]
+}
+
+type Circle = {
+  x: number
+  y: number
+  translateX: number
+  translateY: number
+  size: number
+  alpha: number
+  targetAlpha: number
+  dx: number
+  dy: number
+  magnetism: number
+}
+
+export const Particles: React.FC<ParticlesProps> = ({
+  className = "",
+  quantity = 100,
+  staticity = 50,
+  ease = 50,
+  size = 0.4,
+  refresh = false,
+  color = "#ffffff",
+  vx = 0,
+  vy = 0,
+  ...props
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const canvasContainerRef = useRef<HTMLDivElement>(null)
+  const context = useRef<CanvasRenderingContext2D | null>(null)
+  const circles = useRef<Circle[]>([])
+  const mousePosition = MousePosition()
+  const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+  const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1
+  const rafID = useRef<number | null>(null)
+  const resizeTimeout = useRef<NodeJS.Timeout | null>(null)
+  const initCanvasRef = useRef<() => void>(() => {})
+  const onMouseMoveRef = useRef<() => void>(() => {})
+  const animateRef = useRef<() => void>(() => {})
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      context.current = canvasRef.current.getContext("2d")
+    }
+    initCanvasRef.current()
+    animateRef.current()
+
+    const handleResize = () => {
+      if (resizeTimeout.current) {
+        clearTimeout(resizeTimeout.current)
+      }
+      resizeTimeout.current = setTimeout(() => {
+        initCanvasRef.current()
+      }, 200)
+    }
+
+    window.addEventListener("resize", handleResize)
+
+    return () => {
+      if (rafID.current != null) {
+        window.cancelAnimationFrame(rafID.current)
+      }
+      if (resizeTimeout.current) {
+        clearTimeout(resizeTimeout.current)
+      }
+      window.removeEventListener("resize", handleResize)
+    }
+  }, [color])
+
+  useEffect(() => {
+    onMouseMoveRef.current()
+  }, [mousePosition.x, mousePosition.y])
+
+  useEffect(() => {
+    initCanvasRef.current()
+  }, [refresh])
+
+  const initCanvas = () => {
+    resizeCanvas()
+    drawParticles()
+  }
+
+  const onMouseMove = () => {
+    if (canvasRef.current) {
+      const rect = canvasRef.current.getBoundingClientRect()
+      const { w, h } = canvasSize.current
+      const x = mousePosition.x - rect.left - w / 2
+      const y = mousePosition.y - rect.top - h / 2
+      const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2
+      if (inside) {
+        mouse.current.x = x
+        mouse.current.y = y
+      }
+    }
+  }
+
+  const resizeCanvas = () => {
+    if (canvasContainerRef.current && canvasRef.current && context.current) {
+      canvasSize.current.w = canvasContainerRef.current.offsetWidth
+      canvasSize.current.h = canvasContainerRef.current.offsetHeight
+
+      canvasRef.current.width = canvasSize.current.w * dpr
+      canvasRef.current.height = canvasSize.current.h * dpr
+      canvasRef.current.style.width = `${canvasSize.current.w}px`
+      canvasRef.current.style.height = `${canvasSize.current.h}px`
+      context.current.scale(dpr, dpr)
+
+      // Clear existing particles and create new ones with exact quantity
+      circles.current = []
+      for (let i = 0; i < quantity; i++) {
+        const circle = circleParams()
+        drawCircle(circle)
+      }
+    }
+  }
+
+  const circleParams = (): Circle => {
+    const x = Math.floor(Math.random() * canvasSize.current.w)
+    const y = Math.floor(Math.random() * canvasSize.current.h)
+    const translateX = 0
+    const translateY = 0
+    const pSize = Math.floor(Math.random() * 2) + size
+    const alpha = 0
+    const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1))
+    const dx = (Math.random() - 0.5) * 0.1
+    const dy = (Math.random() - 0.5) * 0.1
+    const magnetism = 0.1 + Math.random() * 4
+    return {
+      x,
+      y,
+      translateX,
+      translateY,
+      size: pSize,
+      alpha,
+      targetAlpha,
+      dx,
+      dy,
+      magnetism,
+    }
+  }
+
+  const rgb = hexToRgb(color)
+
+  const drawCircle = (circle: Circle, update = false) => {
+    if (context.current) {
+      const { x, y, translateX, translateY, size, alpha } = circle
+      context.current.translate(translateX, translateY)
+      context.current.beginPath()
+      context.current.arc(x, y, size, 0, 2 * Math.PI)
+      context.current.fillStyle = `rgba(${rgb.join(", ")}, ${alpha})`
+      context.current.fill()
+      context.current.setTransform(dpr, 0, 0, dpr, 0, 0)
+
+      if (!update) {
+        circles.current.push(circle)
+      }
+    }
+  }
+
+  const clearContext = () => {
+    if (context.current) {
+      context.current.clearRect(
+        0,
+        0,
+        canvasSize.current.w,
+        canvasSize.current.h
+      )
+    }
+  }
+
+  const drawParticles = () => {
+    clearContext()
+    const particleCount = quantity
+    for (let i = 0; i < particleCount; i++) {
+      const circle = circleParams()
+      drawCircle(circle)
+    }
+  }
+
+  const remapValue = (
+    value: number,
+    start1: number,
+    end1: number,
+    start2: number,
+    end2: number
+  ): number => {
+    const remapped =
+      ((value - start1) * (end2 - start2)) / (end1 - start1) + start2
+    return remapped > 0 ? remapped : 0
+  }
+
+  const animate = () => {
+    clearContext()
+    circles.current.forEach((circle: Circle, i: number) => {
+      // Handle the alpha value
+      const edge = [
+        circle.x + circle.translateX - circle.size, // distance from left edge
+        canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge
+        circle.y + circle.translateY - circle.size, // distance from top edge
+        canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge
+      ]
+      const closestEdge = edge.reduce((a, b) => Math.min(a, b))
+      const remapClosestEdge = parseFloat(
+        remapValue(closestEdge, 0, 20, 0, 1).toFixed(2)
+      )
+      if (remapClosestEdge > 1) {
+        circle.alpha += 0.02
+        if (circle.alpha > circle.targetAlpha) {
+          circle.alpha = circle.targetAlpha
+        }
+      } else {
+        circle.alpha = circle.targetAlpha * remapClosestEdge
+      }
+      circle.x += circle.dx + vx
+      circle.y += circle.dy + vy
+      circle.translateX +=
+        (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) /
+        ease
+      circle.translateY +=
+        (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) /
+        ease
+
+      drawCircle(circle, true)
+
+      // circle gets out of the canvas
+      if (
+        circle.x < -circle.size ||
+        circle.x > canvasSize.current.w + circle.size ||
+        circle.y < -circle.size ||
+        circle.y > canvasSize.current.h + circle.size
+      ) {
+        // remove the circle from the array
+        circles.current.splice(i, 1)
+        // create a new circle
+        const newCircle = circleParams()
+        drawCircle(newCircle)
+      }
+    })
+    rafID.current = window.requestAnimationFrame(animateRef.current)
+  }
+
+  initCanvasRef.current = initCanvas
+  onMouseMoveRef.current = onMouseMove
+  animateRef.current = animate
+
+  return (
+    <div
+      className={cn("pointer-events-none", className)}
+      ref={canvasContainerRef}
+      aria-hidden="true"
+      {...props}
+    >
+      <canvas ref={canvasRef} className="size-full" />
+    </div>
+  )
+}

package/registry/default/blocks/auth2/app/page.tsx

@@ -0,0 +1,5 @@
+import { AuthPage } from "../components/auth";
+
+export default function DemoPage() {
+	return <AuthPage />;
+}

package/registry/default/blocks/auth2/components/auth.tsx

@@ -0,0 +1,87 @@
+import { cn } from "@/lib/utils";
+import { GithubIcon } from "./icons/github-icon";
+import { GoogleIcon } from "./icons/google-icon";
+import { Button } from "@/registry/default/ui/button";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupInput,
+} from "@/registry/default/ui/input-group";
+import { AuthDivider } from "./ui/auth-divider";
+import { DecorIcon } from "./ui/decor-icon";
+import { AtSignIcon } from "lucide-react";
+
+export function AuthPage() {
+	return (
+		<div className="relative flex h-screen w-full items-center justify-center overflow-hidden px-6 md:px-8">
+			<div
+				className={cn(
+					"relative flex w-full max-w-sm flex-col justify-between p-6 md:p-8",
+					"dark:bg-[radial-gradient(50%_80%_at_20%_0%,--theme(--color-foreground/.1),transparent)]"
+				)}
+			>
+				<div className="absolute -inset-y-6 -left-px w-px bg-border" />
+				<div className="absolute -inset-y-6 -right-px w-px bg-border" />
+				<div className="absolute -inset-x-6 -top-px h-px bg-border" />
+				<div className="absolute -inset-x-6 -bottom-px h-px bg-border" />
+				<DecorIcon position="top-left" />
+				<DecorIcon position="bottom-right" />
+
+				<div className="w-full max-w-sm animate-in space-y-8">
+						<div className="flex flex-col space-y-1">
+							<h1 className="font-bold text-2xl tracking-wide">Join Now!</h1>
+							<p className="text-base text-muted-foreground">
+							Sign in or create your LoveUI account.
+							</p>
+						</div>
+					<div className="space-y-4">
+						<form className="space-y-2">
+							<InputGroup>
+								<InputGroupInput
+									placeholder="your.email@example.com"
+									type="email"
+								/>
+								<InputGroupAddon align="inline-start">
+									<AtSignIcon
+									/>
+								</InputGroupAddon>
+							</InputGroup>
+
+							<Button className="w-full" size="sm" type="button">
+								Continue With Email
+							</Button>
+						</form>
+						<AuthDivider>OR</AuthDivider>
+						<div className="grid grid-cols-2 gap-2">
+							<Button className="h-11 w-full" type="button" variant="outline">
+								<GoogleIcon data-icon="inline-start" />
+								Google
+							</Button>
+							<Button className="h-11 w-full" type="button" variant="outline">
+								<GithubIcon data-icon="inline-start" />
+								GitHub
+							</Button>
+						</div>
+					</div>
+					<p className="text-muted-foreground text-sm">
+						By clicking continue, you agree to our{" "}
+						<a
+							className="underline underline-offset-4 hover:text-primary"
+							href="#"
+						>
+							Terms of Service
+						</a>{" "}
+						and{" "}
+						<a
+							className="underline underline-offset-4 hover:text-primary"
+							href="#"
+						>
+							Privacy Policy
+						</a>
+						.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}

package/registry/default/blocks/auth2/components/icons/github-icon.tsx

@@ -0,0 +1,10 @@
+export function GithubIcon(props: React.ComponentProps<"svg">) {
+	return (
+		<svg viewBox="0 0 438.549 438.549" {...props}>
+			<path
+				d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}

package/registry/default/blocks/auth2/components/icons/google-icon.tsx

@@ -0,0 +1,14 @@
+export function GoogleIcon(props: React.ComponentProps<"svg">) {
+	return (
+		<svg
+			fill="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<g>
+				<path d="M12.479,14.265v-3.279h11.049c0.108,0.571,0.164,1.247,0.164,1.979c0,2.46-0.672,5.502-2.84,7.669C18.744,22.829,16.051,24,12.483,24C5.869,24,0.308,18.613,0.308,12S5.869,0,12.483,0c3.659,0,6.265,1.436,8.223,3.307L18.392,5.62c-1.404-1.317-3.307-2.341-5.913-2.341C7.65,3.279,3.873,7.171,3.873,12s3.777,8.721,8.606,8.721c3.132,0,4.916-1.258,6.059-2.401c0.927-0.927,1.537-2.251,1.777-4.059L12.479,14.265z" />
+			</g>
+		</svg>
+	);
+}