@better-auth-ui/react 1.6.0

package/src/components/icons/tiktok.tsx

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithRef } from "react"
+
+/**
+ * Renders the TikTok logo as an inline SVG.
+ *
+ * The component forwards received props to the root `<svg>` element.
+ *
+ * @returns The SVG element representing the TikTok logo.
+ */
+export function TikTok(props: ComponentPropsWithRef<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 290"
+      role="img"
+      aria-label="TikTok"
+      {...props}
+    >
+      <path
+        fill="#ff004f"
+        d="M189.72 104.421c18.678 13.345 41.56 21.197 66.273 21.197v-47.53a67 67 0 0 1-13.918-1.456v37.413c-24.711 0-47.59-7.851-66.272-21.195v96.996c0 48.523-39.356 87.855-87.9 87.855c-18.113 0-34.949-5.473-48.934-14.86c15.962 16.313 38.222 26.432 62.848 26.432c48.548 0 87.905-39.332 87.905-87.857v-96.995zm17.17-47.952c-9.546-10.423-15.814-23.893-17.17-38.785v-6.113h-13.189c3.32 18.927 14.644 35.097 30.358 44.898M69.673 225.607a40 40 0 0 1-8.203-24.33c0-22.192 18.001-40.186 40.21-40.186a40.3 40.3 0 0 1 12.197 1.883v-48.593c-4.61-.631-9.262-.9-13.912-.801v37.822a40.3 40.3 0 0 0-12.203-1.882c-22.208 0-40.208 17.992-40.208 40.187c0 15.694 8.997 29.281 22.119 35.9"
+      />
+
+      <path d="M175.803 92.849c18.683 13.344 41.56 21.195 66.272 21.195V76.631c-13.794-2.937-26.005-10.141-35.186-20.162c-15.715-9.802-27.038-25.972-30.358-44.898h-34.643v189.843c-.079 22.132-18.049 40.052-40.21 40.052c-13.058 0-24.66-6.221-32.007-15.86c-13.12-6.618-22.118-20.206-22.118-35.898c0-22.193 18-40.187 40.208-40.187c4.255 0 8.356.662 12.203 1.882v-37.822c-47.692.985-86.047 39.933-86.047 87.834c0 23.912 9.551 45.589 25.053 61.428c13.985 9.385 30.82 14.86 48.934 14.86c48.545 0 87.9-39.335 87.9-87.857z" />
+
+      <path
+        fill="#00f2ea"
+        d="M242.075 76.63V66.516a66.3 66.3 0 0 1-35.186-10.047a66.47 66.47 0 0 0 35.186 20.163M176.53 11.57a68 68 0 0 1-.728-5.457V0h-47.834v189.845c-.076 22.13-18.046 40.05-40.208 40.05a40.06 40.06 0 0 1-18.09-4.287c7.347 9.637 18.949 15.857 32.007 15.857c22.16 0 40.132-17.918 40.21-40.05V11.571zM99.966 113.58v-10.769a89 89 0 0 0-12.061-.818C39.355 101.993 0 141.327 0 189.845c0 30.419 15.467 57.227 38.971 72.996c-15.502-15.838-25.053-37.516-25.053-61.427c0-47.9 38.354-86.848 86.048-87.833"
+      />
+    </svg>
+  )
+}

package/src/components/icons/twitch.tsx

@@ -0,0 +1,50 @@
+import type { ComponentPropsWithRef } from "react"
+
+/**
+ * Renders the Twitch logo as an inline SVG element.
+ *
+ * @param props - Props spread onto the root `<svg>` element for customization (e.g., className, style, width, height, aria attributes).
+ * @returns The SVG element representing the Twitch logo.
+ */
+export function Twitch(props: ComponentPropsWithRef<"svg">) {
+  return (
+    <svg
+      version="1.1"
+      viewBox="0 0 2400 2800"
+      x="0px"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      y="0px"
+      role="img"
+      aria-label="Twitch"
+      {...props}
+    >
+      <style type="text/css">
+        {`
+                .st0{fill:#FFFFFF}
+                .st1{fill:#9146FF}
+            `}
+      </style>
+
+      <g>
+        <polygon
+          className="st0"
+          points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200"
+        />
+
+        <g>
+          <g>
+            <path
+              className="st1"
+              d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600V1300z"
+            />
+
+            <rect className="st1" height="600" width="200" x="1700" y="550" />
+            <rect className="st1" height="600" width="200" x="1150" y="550" />
+          </g>
+        </g>
+      </g>
+    </svg>
+  )
+}

package/src/components/icons/vercel.tsx

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithRef } from "react"
+
+/**
+ * Renders the Vercel logo as an SVG icon.
+ *
+ * @param props - Props forwarded to the root `<svg>` element (e.g., className, style, width, height, aria-*).
+ * @returns An SVG element representing the Vercel logo.
+ */
+export function Vercel(props: ComponentPropsWithRef<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      role="img"
+      aria-label="Vercel"
+      {...props}
+    >
+      <path fill="currentColor" d="M23 21.648H1L12 2.352z"></path>
+    </svg>
+  )
+}

package/src/components/icons/vk.tsx

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef } from "react"
+
+/**
+ * Render the VK social icon as an SVG element.
+ *
+ * @param props - SVG attributes and ref forwarded to the root `<svg>` element
+ * @returns An `<svg>` element containing the VK icon path
+ */
+export function VK(props: ComponentPropsWithRef<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 576 512"
+      role="img"
+      aria-label="VK"
+      {...props}
+    >
+      <path
+        fill="#0076FF"
+        d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7c0 0-30 73.1-72.4 120.5c-13.7 13.7-20 18.1-27.5 18.1c-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5c0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5c-20 0-68.6-73.4-97.4-157.4c-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7c0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9c0-66.8-3.4-73.1 15.4-73.1c8.7 0 23.7 4.4 58.7 38.1c40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25c-11.2-34.9-86.9-106.7-90.3-111.5c-8.7-11.2-6.2-16.2 0-26.2c.1-.1 72-101.3 79.4-135.6"
+      />
+    </svg>
+  )
+}

package/src/components/icons/wechat.tsx

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef } from "react"
+
+/**
+ * Renders an "X" icon as an SVG React component.
+ *
+ * @param props - Props to spread onto the underlying `svg` element (e.g., className, style, ref).
+ * @returns The SVG element representing the "X" icon with its path filled by `currentColor`.
+ */
+export function WeChat(props: ComponentPropsWithRef<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      role="img"
+      aria-label="WeChat"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M9.5 4C5.36 4 2 6.69 2 10c0 1.89 1.08 3.56 2.78 4.66L4 17l2.5-1.5c.89.31 1.87.5 2.91.5A5.2 5.2 0 0 1 9 14c0-3.31 3.13-6 7-6c.19 0 .38 0 .56.03C15.54 5.69 12.78 4 9.5 4m-3 2.5a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m5 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1M16 9c-3.31 0-6 2.24-6 5s2.69 5 6 5c.67 0 1.31-.08 1.91-.25L20 20l-.62-1.87C20.95 17.22 22 15.71 22 14c0-2.76-2.69-5-6-5m-2 2.5a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1"
+      ></path>
+    </svg>
+  )
+}

package/src/components/icons/x.tsx

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef } from "react"
+
+/**
+ * Renders an "X" icon as an SVG React component.
+ *
+ * @param props - Props to spread onto the underlying `svg` element (e.g., className, style, ref).
+ * @returns The SVG element representing the "X" icon with its path filled by `currentColor`.
+ */
+export function X(props: ComponentPropsWithRef<"svg">) {
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="X"
+      {...props}
+    >
+      <path
+        d="M389.2 48h70.6L305.6 224.2L487 464H345L233.7 318.6L106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/components/icons/zoom.tsx

@@ -0,0 +1,48 @@
+import { type ComponentPropsWithRef, useId } from "react"
+
+/**
+ * Renders a stylized "Zoom" SVG icon featuring a blue multi-stop gradient and a white interior highlight.
+ *
+ * @param props - Props are forwarded to the root `<svg>` element (e.g., className, style, width, height, aria-*).
+ * @returns The SVG element for the Zoom icon.
+ */
+export function Zoom(props: ComponentPropsWithRef<"svg">) {
+  const gradientId = useId()
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+      role="img"
+      aria-label="Zoom"
+      {...props}
+    >
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1="23.666%"
+          x2="76.334%"
+          y1="95.612%"
+          y2="4.388%"
+        >
+          <stop offset="0%" stopColor="#0845bf"></stop>
+          <stop offset="19.11%" stopColor="#0950de"></stop>
+          <stop offset="38.23%" stopColor="#0b59f6"></stop>
+          <stop offset="50%" stopColor="#0b5cff"></stop>
+          <stop offset="67.32%" stopColor="#0e5efe"></stop>
+          <stop offset="77.74%" stopColor="#1665fc"></stop>
+          <stop offset="86.33%" stopColor="#246ff9"></stop>
+          <stop offset="93.88%" stopColor="#387ff4"></stop>
+          <stop offset="100%" stopColor="#4f90ee"></stop>
+        </linearGradient>
+      </defs>
+      <path
+        fill={`url(#${gradientId})`}
+        d="M256 128c0 13.568-1.024 27.136-3.328 40.192c-6.912 43.264-41.216 77.568-84.48 84.48C155.136 254.976 141.568 256 128 256s-27.136-1.024-40.192-3.328c-43.264-6.912-77.568-41.216-84.48-84.48C1.024 155.136 0 141.568 0 128s1.024-27.136 3.328-40.192c6.912-43.264 41.216-77.568 84.48-84.48C100.864 1.024 114.432 0 128 0s27.136 1.024 40.192 3.328c43.264 6.912 77.568 41.216 84.48 84.48C254.976 100.864 256 114.432 256 128"
+      ></path>
+      <path
+        fill="#fff"
+        d="M204.032 207.872H75.008c-8.448 0-16.64-4.608-20.48-12.032c-4.608-8.704-2.816-19.2 4.096-26.112l89.856-89.856H83.968c-17.664 0-32-14.336-32-32h118.784c8.448 0 16.64 4.608 20.48 12.032c4.608 8.704 2.816 19.2-4.096 26.112l-89.6 90.112h74.496c17.664 0 32 14.08 32 31.744"
+      ></path>
+    </svg>
+  )
+}

package/src/components/settings/account/theme-preview.tsx

@@ -0,0 +1,271 @@
+export function ThemePreviewSystem(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 240 117"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="System theme preview"
+      {...props}
+    >
+      <defs>
+        {/* Diagonal clip for light (top-left) */}
+        <clipPath id="systemDiagonalLight">
+          <polygon points="0,0 240,0 0,117" />
+        </clipPath>
+        {/* Diagonal clip for dark (bottom-right) */}
+        <clipPath id="systemDiagonalDark">
+          <polygon points="240,0 240,117 0,117" />
+        </clipPath>
+      </defs>
+
+      {/* Light side (top-left diagonal) */}
+      <g clipPath="url(#systemDiagonalLight)">
+        <path
+          d="M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z"
+          fill="white"
+        />
+        <path
+          d="M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z"
+          stroke="#E4E4E7"
+        />
+        <path
+          d="M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z"
+          fill="#F4F4F5"
+        />
+        <path
+          d="M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z"
+          fill="#F4F4F5"
+        />
+        <path
+          d="M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z"
+          fill="#E4E4E7"
+        />
+        <path
+          d="M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z"
+          fill="#F4F4F5"
+        />
+        <path
+          d="M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z"
+          fill="#F4F4F5"
+        />
+        <path
+          d="M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z"
+          fill="#F4F4F5"
+        />
+        <path
+          d="M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z"
+          fill="#F4F4F5"
+        />
+        <path
+          d="M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z"
+          fill="#F4F4F5"
+        />
+        <path
+          d="M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z"
+          fill="#E4E4E7"
+        />
+        <path
+          d="M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z"
+          fill="#F4F4F5"
+        />
+        <path
+          d="M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z"
+          fill="#F4F4F5"
+        />
+        <circle cx="22.5" cy="25.5" fill="#E4E4E7" r="5.5" />
+      </g>
+
+      {/* Dark side (bottom-right diagonal) */}
+      <g clipPath="url(#systemDiagonalDark)">
+        <path
+          d="M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z"
+          fill="black"
+        />
+        <path
+          d="M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z"
+          stroke="#3F3F46"
+        />
+        <path
+          d="M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z"
+          fill="#27272A"
+        />
+        <path
+          d="M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z"
+          fill="#27272A"
+        />
+        <path
+          d="M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z"
+          fill="#3F3F46"
+        />
+        <path
+          d="M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z"
+          fill="#27272A"
+        />
+        <path
+          d="M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z"
+          fill="#27272A"
+        />
+        <path
+          d="M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z"
+          fill="#27272A"
+        />
+        <path
+          d="M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z"
+          fill="#27272A"
+        />
+        <path
+          d="M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z"
+          fill="#27272A"
+        />
+        <path
+          d="M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z"
+          fill="#3F3F46"
+        />
+        <path
+          d="M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z"
+          fill="#27272A"
+        />
+        <path
+          d="M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z"
+          fill="#27272A"
+        />
+        <circle cx="22.5" cy="25.5" fill="#3F3F46" r="5.5" />
+      </g>
+    </svg>
+  )
+}
+
+export function ThemePreviewLight(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 240 117"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Light"
+      {...props}
+    >
+      <path
+        d="M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z"
+        fill="white"
+      />
+      <path
+        d="M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z"
+        stroke="#E4E4E7"
+      />
+      <path
+        d="M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z"
+        fill="#E4E4E7"
+      />
+      <path
+        d="M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z"
+        fill="#E4E4E7"
+      />
+      <path
+        d="M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z"
+        fill="#F4F4F5"
+      />
+      <path
+        d="M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z"
+        fill="#F4F4F5"
+      />
+      <circle cx="22.5" cy="25.5" fill="#E4E4E7" r="5.5" />
+    </svg>
+  )
+}
+
+export function ThemePreviewDark(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 240 117"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Dark"
+      {...props}
+    >
+      <path
+        d="M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z"
+        fill="black"
+      />
+      <path
+        d="M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z"
+        stroke="#3F3F46"
+      />
+      <path
+        d="M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z"
+        fill="#27272A"
+      />
+      <path
+        d="M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z"
+        fill="#27272A"
+      />
+      <path
+        d="M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z"
+        fill="#3F3F46"
+      />
+      <path
+        d="M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z"
+        fill="#27272A"
+      />
+      <path
+        d="M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z"
+        fill="#27272A"
+      />
+      <path
+        d="M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z"
+        fill="#27272A"
+      />
+      <path
+        d="M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z"
+        fill="#27272A"
+      />
+      <path
+        d="M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z"
+        fill="#27272A"
+      />
+      <path
+        d="M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z"
+        fill="#3F3F46"
+      />
+      <path
+        d="M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z"
+        fill="#27272A"
+      />
+      <path
+        d="M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z"
+        fill="#27272A"
+      />
+      <circle cx="22.5" cy="25.5" fill="#3F3F46" r="5.5" />
+    </svg>
+  )
+}

package/src/core.ts

@@ -0,0 +1 @@
+export * from "@better-auth-ui/core"

package/src/hooks/auth/use-auth-mutation.ts

@@ -0,0 +1,56 @@
+import {
+  type UseMutationOptions,
+  type UseMutationResult,
+  useMutation
+} from "@tanstack/react-query"
+import type { BetterFetchError } from "better-auth/react"
+
+// biome-ignore lint/suspicious/noExplicitAny: any
+type AuthFn = (...args: any) => Promise<any>
+
+type MutationParams<TFn extends AuthFn> = undefined extends Parameters<TFn>[0]
+  ? // biome-ignore lint/suspicious/noConfusingVoidType: void is needed for mutations with optional params
+    void | Omit<NonNullable<Parameters<TFn>[0]>, "fetchOptions">
+  : Omit<Parameters<TFn>[0], "fetchOptions">
+
+type InferMutationData<TFn extends AuthFn> = TFn extends (
+  ...args: infer _A
+) => infer R
+  ? Extract<Awaited<R>, { error: null }> extends { data: infer D }
+    ? D
+    : Awaited<R>
+  : Awaited<ReturnType<TFn>>
+
+export type UseAuthMutationOptions<TFn extends AuthFn> = Omit<
+  UseMutationOptions<
+    InferMutationData<TFn>,
+    BetterFetchError,
+    MutationParams<TFn>
+  >,
+  "mutationFn"
+>
+
+export type UseAuthMutationResult<TFn extends AuthFn> = UseMutationResult<
+  InferMutationData<TFn>,
+  BetterFetchError,
+  MutationParams<TFn>
+>
+
+type UseAuthMutationProps<TFn extends AuthFn> = {
+  authFn: TFn
+  options?: UseAuthMutationOptions<TFn>
+}
+
+export function useAuthMutation<TFn extends AuthFn>({
+  authFn,
+  options
+}: UseAuthMutationProps<TFn>): UseAuthMutationResult<TFn> {
+  return useMutation({
+    mutationFn: (params) =>
+      authFn({
+        ...params,
+        fetchOptions: { throw: true }
+      }),
+    ...options
+  })
+}

package/src/hooks/auth/use-auth-query.ts

@@ -0,0 +1,50 @@
+import {
+  type UseQueryOptions,
+  type UseQueryResult,
+  useQuery
+} from "@tanstack/react-query"
+import type { BetterFetchError, BetterFetchOption } from "better-auth/react"
+
+type BetterFetchFn = (options: {
+  fetchOptions?: BetterFetchOption
+}) => Promise<{ data: unknown }>
+
+type InferData<TFn> = TFn extends (options: {
+  fetchOptions?: BetterFetchOption
+}) => Promise<{ data: infer TData }>
+  ? TData
+  : never
+
+type OmitFetchOptions<T> = {
+  [K in keyof T as K extends "fetchOptions" ? never : K]: T[K]
+}
+
+export type UseAuthQueryOptions<TFn extends BetterFetchFn> = Omit<
+  UseQueryOptions<InferData<TFn>, BetterFetchError>,
+  "queryFn"
+>
+
+export type UseAuthQueryResult<TFn extends BetterFetchFn> = UseQueryResult<
+  InferData<TFn>,
+  BetterFetchError
+>
+
+type UseAuthQueryProps<TFn extends BetterFetchFn> = {
+  authFn: TFn
+  params?: OmitFetchOptions<Parameters<TFn>[0]>
+  options: UseAuthQueryOptions<TFn>
+}
+
+export function useAuthQuery<TFn extends BetterFetchFn>({
+  authFn,
+  params,
+  options
+}: UseAuthQueryProps<TFn>) {
+  return useQuery<InferData<TFn>, BetterFetchError>({
+    queryFn: async () => {
+      const result = await authFn({ ...params, fetchOptions: { throw: true } })
+      return result as InferData<TFn>
+    },
+    ...options
+  })
+}

package/src/hooks/auth/use-authenticate.ts

@@ -0,0 +1,35 @@
+import { type AuthClient, useAuth } from "@better-auth-ui/react"
+import { useEffect } from "react"
+import type { UseAuthQueryOptions, UseAuthQueryResult } from "./use-auth-query"
+import { useSession } from "./use-session"
+
+/**
+ * Redirects unauthenticated users to the sign-in page while preserving the current URL and exposes the active auth session state.
+ *
+ * @param options - Query options forwarded to the session query hook
+ * @returns An object containing `data` (the current session or `undefined`), `isPending` (whether the session query is in progress), and other session query state
+ */
+export function useAuthenticate(
+  options?: Partial<UseAuthQueryOptions<AuthClient["getSession"]>>
+): UseAuthQueryResult<AuthClient["getSession"]> {
+  const { basePaths, viewPaths, navigate } = useAuth()
+  const session = useSession(options)
+
+  useEffect(() => {
+    if (session.data || session.isPending) return
+
+    const currentURL = window.location.pathname + window.location.search
+    const redirectTo = encodeURIComponent(currentURL)
+    const signInPath = `${basePaths.auth}/${viewPaths.auth.signIn}?redirectTo=${redirectTo}`
+
+    navigate({ to: signInPath, replace: true })
+  }, [
+    basePaths.auth,
+    session.data,
+    session.isPending,
+    viewPaths.auth.signIn,
+    navigate
+  ])
+
+  return session
+}

package/src/hooks/auth/use-request-password-reset.ts

@@ -0,0 +1,24 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "./use-auth-mutation"
+
+export { useAuthMutation } from "./use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for the forgot-password flow.
+ *
+ * The mutation sends a password reset request for the submitted email,
+ * and navigates to the sign-in view on success.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useRequestPasswordReset(
+  options?: UseAuthMutationOptions<AuthClient["requestPasswordReset"]>
+) {
+  const { authClient } = useAuth()
+
+  return useAuthMutation({ authFn: authClient.requestPasswordReset, options })
+}