@arcadeai/design-system 3.32.0 → 3.33.1

package/dist/components/ui/pages/chat-page.d.ts

@@ -0,0 +1,75 @@
+import { ChatMessageItem, ChatMessageListProps } from '../molecules/chat-message-list';
+import { SuggestionCardProps } from '../molecules/suggestion-card';
+import type * as React from "react";
+/** A suggestion card item extended with an id and optional action string. */
+export type ChatPageSuggestion = Pick<SuggestionCardProps, "icon" | "title" | "subtitle" | "onClick"> & {
+    id: string;
+    /** Message text to send when this suggestion is clicked. Used with `onSuggestionAction`. */
+    action?: string;
+};
+export type ChatPageProps = {
+    /** User information for greeting and sidebar avatar */
+    user?: {
+        name?: string;
+        email?: string;
+        avatarUrl?: string;
+    };
+    /** Logo element for the sidebar header */
+    logo?: React.ReactNode;
+    /** Suggested action cards shown when the chat is empty */
+    suggestedActions?: ChatPageSuggestion[];
+    /** Callback when a suggestion with an `action` string is clicked */
+    onSuggestionAction?: (action: string) => void;
+    /** Available models for the model selector dropdown */
+    models?: Array<{
+        id: string;
+        name: string;
+        description?: string;
+    }>;
+    /** Currently selected model ID */
+    selectedModelId?: string;
+    /** Callback when model changes */
+    onModelChange?: (id: string) => void;
+    /** Prompt input value (controlled) */
+    inputValue?: string;
+    /** Callback when input changes */
+    onInputChange?: (value: string) => void;
+    /** Callback when message is submitted */
+    onSubmit?: () => void;
+    /** Whether a response is loading / streaming */
+    isLoading?: boolean;
+    /** Callback to stop a streaming response */
+    onStop?: () => void;
+    /** Callback for creating a new chat */
+    onNewChat?: () => void;
+    /** Callback for deleting all chats */
+    onDeleteAll?: () => void;
+    /** Callback for sign out */
+    onSignOut?: () => void;
+    /** Callback for theme change */
+    onThemeChange?: (theme: "light" | "dark" | "system") => void;
+    /** Current theme */
+    theme?: "light" | "dark" | "system";
+    /** Chat history items for the sidebar */
+    chatHistory?: Array<{
+        id: string;
+        title: string;
+        isActive?: boolean;
+    }>;
+    /** Callback when a chat history item is selected */
+    onSelectChat?: (id: string) => void;
+    /** Whether the sidebar is open by default */
+    defaultSidebarOpen?: boolean;
+    /** Whether to show the sidebar. When false, the chat takes the full width. */
+    showSidebar?: boolean;
+    /** Normalized messages to render via ChatMessageList. When present with items, hides overview/suggestions. */
+    messages?: ChatMessageItem[];
+    /** Custom render function for individual messages (passed to ChatMessageList) */
+    renderMessage?: ChatMessageListProps["renderMessage"];
+    /** Custom loading indicator for streaming (passed to ChatMessageList) */
+    loadingIndicator?: React.ReactNode;
+    /** Children rendered in the body area. Overrides `messages` prop when present. */
+    children?: React.ReactNode;
+};
+export declare function ChatPage({ user, logo, suggestedActions, onSuggestionAction, models, selectedModelId, onModelChange, inputValue, onInputChange, onSubmit, isLoading, onStop, onNewChat, onDeleteAll, onSignOut, onThemeChange, theme, chatHistory, onSelectChat, defaultSidebarOpen, showSidebar, messages, renderMessage, loadingIndicator, children, }: ChatPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chat-page.d.ts.map

package/dist/components/ui/pages/chat-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-page.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/pages/chat-page.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/pages/chat-page.js

@@ -0,0 +1,300 @@
+import { jsxs as a, jsx as e, Fragment as X } from "react/jsx-runtime";
+import { PlusIcon as Y, SquareIcon as Z, ArrowUpIcon as _, Trash2Icon as $, SquarePenIcon as L, ChevronsUpDownIcon as T, SunIcon as ee, MoonIcon as ae, MonitorIcon as re, LogOutIcon as te } from "lucide-react";
+import { Avatar as w, AvatarImage as I, AvatarFallback as M } from "../atoms/avatar.js";
+import { Button as o } from "../atoms/button.js";
+import { ChatContainerRoot as ne, ChatContainerContent as le, ChatContainerScrollAnchor as ie } from "../atoms/chat-container.js";
+import { DropdownMenu as D, DropdownMenuTrigger as P, DropdownMenuContent as j, DropdownMenuRadioGroup as A, DropdownMenuRadioItem as p, DropdownMenuLabel as y, DropdownMenuSeparator as U, DropdownMenuItem as ce } from "../atoms/dropdown-menu.js";
+import { ScrollButton as se } from "../atoms/scroll-button.js";
+import { SidebarTrigger as de, SidebarProvider as oe, Sidebar as me, SidebarHeader as he, SidebarContent as pe, SidebarGroup as ue, SidebarGroupLabel as fe, SidebarGroupContent as ve, SidebarMenu as u, SidebarMenuItem as f, SidebarMenuButton as v, SidebarFooter as Ne, SidebarInset as ge } from "../atoms/sidebar.js";
+import { ChatMessageList as xe } from "../molecules/chat-message-list.js";
+import { PromptInput as be, PromptInputTextarea as Ce, PromptInputActions as Se, PromptInputAction as ze } from "../molecules/prompt-input.js";
+import { SuggestionCard as we } from "../molecules/suggestion-card.js";
+import { ChatTemplate as Ie, ChatTemplateHeader as Me, ChatTemplateHeaderGroup as k, ChatTemplateOverview as ye, ChatTemplateOverviewTitle as Ue, ChatTemplateOverviewSubtitle as ke, ChatTemplateFooter as Te, ChatTemplateSuggestions as De } from "../templates/chat-template.js";
+import { cn as Pe } from "../../../lib/utils.js";
+function je({
+  user: r,
+  theme: c = "system",
+  onThemeChange: l,
+  onSignOut: t
+}) {
+  const m = r?.name?.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase();
+  return l || t ? /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ a(D, { children: [
+    /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ a(
+      v,
+      {
+        className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+        size: "lg",
+        children: [
+          /* @__PURE__ */ a(w, { className: "size-8 rounded-lg", children: [
+            r?.avatarUrl && /* @__PURE__ */ e(I, { alt: r.name ?? "User", src: r.avatarUrl }),
+            /* @__PURE__ */ e(M, { className: "rounded-lg", children: m ?? "U" })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+            /* @__PURE__ */ e("span", { className: "truncate font-medium", children: r?.name ?? "User" }),
+            r?.email && /* @__PURE__ */ e("span", { className: "truncate text-muted-foreground text-xs", children: r.email })
+          ] }),
+          /* @__PURE__ */ e(T, { className: "ml-auto size-4" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ a(
+      j,
+      {
+        align: "end",
+        className: "w-56",
+        side: "top",
+        sideOffset: 4,
+        children: [
+          /* @__PURE__ */ e(y, { children: "My Account" }),
+          /* @__PURE__ */ e(U, {}),
+          l && /* @__PURE__ */ a(X, { children: [
+            /* @__PURE__ */ e(y, { className: "font-normal text-muted-foreground text-xs", children: "Theme" }),
+            /* @__PURE__ */ a(
+              A,
+              {
+                onValueChange: (s) => l(s),
+                value: c,
+                children: [
+                  /* @__PURE__ */ a(p, { value: "light", children: [
+                    /* @__PURE__ */ e(ee, { className: "size-4" }),
+                    "Light"
+                  ] }),
+                  /* @__PURE__ */ a(p, { value: "dark", children: [
+                    /* @__PURE__ */ e(ae, { className: "size-4" }),
+                    "Dark"
+                  ] }),
+                  /* @__PURE__ */ a(p, { value: "system", children: [
+                    /* @__PURE__ */ e(re, { className: "size-4" }),
+                    "System"
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(U, {})
+          ] }),
+          t && /* @__PURE__ */ a(ce, { onClick: t, children: [
+            /* @__PURE__ */ e(te, { className: "size-4" }),
+            "Sign out"
+          ] })
+        ]
+      }
+    )
+  ] }) }) }) : /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ a(v, { className: "cursor-default", size: "lg", children: [
+    /* @__PURE__ */ a(w, { className: "size-8 rounded-lg", children: [
+      r?.avatarUrl && /* @__PURE__ */ e(I, { alt: r.name ?? "User", src: r.avatarUrl }),
+      /* @__PURE__ */ e(M, { className: "rounded-lg", children: m ?? "U" })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+      /* @__PURE__ */ e("span", { className: "truncate font-medium", children: r?.name ?? "User" }),
+      r?.email && /* @__PURE__ */ e("span", { className: "truncate text-muted-foreground text-xs", children: r.email })
+    ] })
+  ] }) }) });
+}
+function Ae({
+  models: r,
+  selectedModelId: c,
+  onModelChange: l
+}) {
+  return !r || r.length === 0 ? null : /* @__PURE__ */ a(D, { children: [
+    /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ a(o, { className: "h-[34px] gap-1 px-2", variant: "outline", children: [
+      r.find((t) => t.id === c)?.name ?? "Select model",
+      /* @__PURE__ */ e(T, { className: "size-3" })
+    ] }) }),
+    /* @__PURE__ */ e(j, { align: "start", className: "min-w-[300px]", children: /* @__PURE__ */ e(
+      A,
+      {
+        onValueChange: l,
+        value: c,
+        children: r.map((t) => /* @__PURE__ */ e(p, { value: t.id, children: /* @__PURE__ */ a("div", { className: "flex flex-col items-start gap-1", children: [
+          /* @__PURE__ */ e("div", { className: "font-medium", children: t.name }),
+          t.description && /* @__PURE__ */ e("div", { className: "text-muted-foreground text-xs", children: t.description })
+        ] }) }, t.id))
+      }
+    ) })
+  ] });
+}
+function Xe({
+  user: r,
+  logo: c,
+  suggestedActions: l,
+  onSuggestionAction: t,
+  models: m,
+  selectedModelId: s,
+  onModelChange: H,
+  inputValue: N,
+  onInputChange: G,
+  onSubmit: g,
+  isLoading: i = !1,
+  onStop: B,
+  onNewChat: h,
+  onDeleteAll: x,
+  onSignOut: F,
+  onThemeChange: O,
+  theme: R = "system",
+  chatHistory: q,
+  onSelectChat: V,
+  defaultSidebarOpen: E = !0,
+  showSidebar: b = !0,
+  messages: d,
+  renderMessage: J,
+  loadingIndicator: K,
+  children: C
+}) {
+  const Q = !!C || d !== void 0 && d.length > 0, W = r?.name ?? "there", S = /* @__PURE__ */ a(Ie, { children: [
+    /* @__PURE__ */ a(Me, { children: [
+      /* @__PURE__ */ a(k, { children: [
+        b && /* @__PURE__ */ e(de, {}),
+        /* @__PURE__ */ e(
+          Ae,
+          {
+            models: m,
+            onModelChange: H,
+            selectedModelId: s
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "flex-1" }),
+      /* @__PURE__ */ e(k, { children: h && /* @__PURE__ */ a(
+        o,
+        {
+          "aria-label": "New chat",
+          className: "h-9 gap-1 px-2",
+          onClick: h,
+          variant: "outline",
+          children: [
+            /* @__PURE__ */ e(Y, { className: "size-4" }),
+            /* @__PURE__ */ e("span", { className: "md:sr-only", children: "New Chat" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ a(ne, { className: "relative min-w-0 flex-1 flex-col pt-4", children: [
+      /* @__PURE__ */ a(le, { className: "gap-6 pb-4", children: [
+        C || (d && d.length > 0 ? /* @__PURE__ */ e(
+          xe,
+          {
+            isStreaming: i,
+            loadingIndicator: K,
+            messages: d,
+            renderMessage: J
+          }
+        ) : /* @__PURE__ */ a(ye, { children: [
+          /* @__PURE__ */ a(Ue, { children: [
+            "Hi, ",
+            /* @__PURE__ */ e("span", { className: "text-primary/80", children: W })
+          ] }),
+          /* @__PURE__ */ e(ke, { children: "How can I help you today?" })
+        ] })),
+        /* @__PURE__ */ e(ie, {})
+      ] }),
+      /* @__PURE__ */ e("div", { className: "pointer-events-none absolute right-0 bottom-0 left-0 z-10 h-10 bg-gradient-to-t from-10% from-background to-transparent" }),
+      /* @__PURE__ */ e("div", { className: "pointer-events-none absolute right-0 bottom-4 left-0 z-20 flex justify-center px-4", children: /* @__PURE__ */ e("div", { className: "flex w-full max-w-3xl justify-end pr-4", children: /* @__PURE__ */ e(se, { className: "pointer-events-auto shadow-md" }) }) })
+    ] }),
+    /* @__PURE__ */ a(Te, { children: [
+      !Q && l && l.length > 0 && /* @__PURE__ */ e(De, { children: l.map((n, z) => /* @__PURE__ */ e(
+        "div",
+        {
+          className: Pe(
+            "col-span-12 sm:col-span-6",
+            z < 3 ? "md:col-span-4" : "md:col-span-6",
+            z > 1 && "hidden sm:block"
+          ),
+          children: /* @__PURE__ */ e(
+            we,
+            {
+              icon: n.icon,
+              onClick: n.onClick ?? (n.action ? () => t?.(n.action ?? "") : void 0),
+              subtitle: n.subtitle,
+              title: n.title
+            }
+          )
+        },
+        n.id
+      )) }),
+      /* @__PURE__ */ a(
+        be,
+        {
+          isLoading: i,
+          onSubmit: g,
+          onValueChange: G,
+          value: N,
+          children: [
+            /* @__PURE__ */ e(Ce, { placeholder: "Send a message..." }),
+            /* @__PURE__ */ e(Se, { className: "justify-end px-2 pb-2", children: /* @__PURE__ */ e(
+              ze,
+              {
+                tooltip: i ? "Stop generating" : "Send message",
+                children: /* @__PURE__ */ e(
+                  o,
+                  {
+                    "aria-label": i ? "Stop generating" : "Send message",
+                    disabled: !(i || N?.trim()),
+                    onClick: i ? B : g,
+                    size: "icon",
+                    variant: i ? "destructive" : "default",
+                    children: i ? /* @__PURE__ */ e(Z, { className: "size-4 fill-current" }) : /* @__PURE__ */ e(_, { className: "size-4" })
+                  }
+                )
+              }
+            ) })
+          ]
+        }
+      )
+    ] })
+  ] });
+  return b ? /* @__PURE__ */ a(oe, { defaultOpen: E, children: [
+    /* @__PURE__ */ a(me, { className: "group-data-[side=left]:border-r-0", children: [
+      /* @__PURE__ */ e(he, { children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+        c && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 px-2", children: c }),
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+          x && /* @__PURE__ */ e(
+            o,
+            {
+              "aria-label": "Delete all chats",
+              className: "size-8",
+              onClick: x,
+              size: "icon",
+              variant: "ghost",
+              children: /* @__PURE__ */ e($, { className: "size-4" })
+            }
+          ),
+          h && /* @__PURE__ */ e(
+            o,
+            {
+              "aria-label": "New chat",
+              className: "size-8",
+              onClick: h,
+              size: "icon",
+              variant: "ghost",
+              children: /* @__PURE__ */ e(L, { className: "size-4" })
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ a(ue, { children: [
+        /* @__PURE__ */ e(fe, { children: "History" }),
+        /* @__PURE__ */ e(ve, { children: /* @__PURE__ */ e(u, { children: q?.map((n) => /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(
+          v,
+          {
+            isActive: n.isActive,
+            onClick: () => V?.(n.id),
+            children: /* @__PURE__ */ e("span", { children: n.title })
+          }
+        ) }, n.id)) }) })
+      ] }) }),
+      /* @__PURE__ */ e(Ne, { children: /* @__PURE__ */ e(
+        je,
+        {
+          onSignOut: F,
+          onThemeChange: O,
+          theme: R,
+          user: r
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(ge, { children: S })
+  ] }) : S;
+}
+export {
+  Xe as ChatPage
+};

package/dist/components/ui/pages/index.d.ts

@@ -0,0 +1,6 @@
+/** biome-ignore-all lint/performance/noBarrelFile: Barrel files are acceptable for atomic component folders */
+export type { ChatPageProps, ChatPageSuggestion } from './chat-page';
+export { ChatPage } from './chat-page';
+export type { LoginPageProps } from './login-page';
+export { LoginPage } from './login-page';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/pages/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/pages/index.ts"],"names":[],"mappings":"AAAA,+GAA+G;AAE/G,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/ui/pages/index.js

@@ -0,0 +1,6 @@
+import { ChatPage as r } from "./chat-page.js";
+import { LoginPage as g } from "./login-page.js";
+export {
+  r as ChatPage,
+  g as LoginPage
+};

package/dist/components/ui/pages/login-page.d.ts

@@ -0,0 +1,20 @@
+export type LoginPageProps = {
+    /** Whether authentication is in progress */
+    isLoading?: boolean;
+    /** Text shown while loading (default: "Authenticating...") */
+    loadingText?: string;
+    /** Callback when the sign-in button is clicked */
+    onSubmit: () => void;
+    /** URL for the privacy policy link. Omit to hide. */
+    privacyHref?: string;
+    /** URL for the register link. Omit to hide the register prompt. */
+    registerHref?: string;
+    /** Text shown on the button (default: "Sign in with Arcade") */
+    submitText?: string;
+    /** URL for the terms link. Omit to hide legal section. */
+    termsHref?: string;
+    /** URL to the background video file. Defaults to the Arcade CDN-hosted video. Set to `undefined` to show only the gradient. */
+    videoSrc?: string;
+};
+export declare function LoginPage({ isLoading, loadingText, onSubmit, privacyHref, registerHref, submitText, termsHref, videoSrc, }: LoginPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=login-page.d.ts.map

package/dist/components/ui/pages/login-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"login-page.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/pages/login-page.tsx"],"names":[],"mappings":"AAyBA,MAAM,MAAM,cAAc,GAAG;IAC3B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+HAA+H;IAC/H,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAyCF,wBAAgB,SAAS,CAAC,EACxB,SAAiB,EACjB,WAAiC,EACjC,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,UAAkC,EAClC,SAAS,EACT,QAA4B,GAC7B,EAAE,cAAc,2CAiEhB"}

package/dist/components/ui/pages/login-page.js

@@ -0,0 +1,92 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Loader2 as p, LogIn as d } from "lucide-react";
+import { Fragment as f } from "react";
+import { ArcadeGrid as g } from "../../../assets/images/arcade-grid.js";
+import { ArcadeLogo as A } from "../../../assets/images/arcade-logo.js";
+import { Button as b } from "../atoms/button.js";
+import { AuthTemplate as T, AuthTemplateVideoBackground as v, AuthTemplateLogo as y, AuthTemplateCard as L, AuthTemplateHeader as N, AuthTemplateTitle as x, AuthTemplateDescription as k, AuthTemplateContent as z, AuthTemplateFooter as w, AuthTemplatePrompt as P, AuthTemplatePromptLink as _, AuthTemplateLegal as B, AuthTemplateLegalLink as C } from "../templates/auth-template.js";
+import { cn as m } from "../../../lib/utils.js";
+import { PUBLIC_VIDEO_URL as D } from "../../../metadata/constants.js";
+const I = `${D}/A_L_Orange_Pink.mp4`;
+function F({ isLoading: t }) {
+  return t ? /* @__PURE__ */ e(p, { className: "size-5 animate-spin" }) : /* @__PURE__ */ e(d, { className: "size-5" });
+}
+function j({
+  termsHref: t,
+  privacyHref: n
+}) {
+  const i = [
+    t && { href: t, label: "Terms of Service" },
+    n && { href: n, label: "Privacy Policy" }
+  ].filter((a) => !!a);
+  return i.length === 0 ? null : /* @__PURE__ */ r(B, { children: [
+    "By continuing, you agree to the",
+    " ",
+    i.map((a, o) => /* @__PURE__ */ r(f, { children: [
+      o > 0 && " and ",
+      /* @__PURE__ */ e(C, { href: a.href, children: a.label })
+    ] }, a.href))
+  ] });
+}
+function q({
+  isLoading: t = !1,
+  loadingText: n = "Authenticating...",
+  onSubmit: i,
+  privacyHref: a,
+  registerHref: o,
+  submitText: s = "Sign in with Arcade",
+  termsHref: l,
+  videoSrc: c = I
+}) {
+  const h = t ? n : s, u = o || l || a;
+  return /* @__PURE__ */ r(T, { children: [
+    /* @__PURE__ */ e("div", { className: "absolute -inset-4 z-0 bg-gradient-to-br from-rose-500/70 via-pink-400/50 to-amber-500/70 opacity-60 blur-lg brightness-50" }),
+    c && /* @__PURE__ */ e(v, { src: c }),
+    /* @__PURE__ */ e("div", { className: "absolute inset-0 z-1 opacity-[0.01]", children: /* @__PURE__ */ e(g, { className: "size-full", fill: "currentColor" }) }),
+    /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(A, { className: "h-12 w-auto text-zinc-900 dark:text-white" }) }),
+    /* @__PURE__ */ r(L, { children: [
+      /* @__PURE__ */ r(N, { children: [
+        /* @__PURE__ */ e(x, { children: "Welcome back" }),
+        /* @__PURE__ */ e(k, { children: "Sign in with your Arcade account to continue" })
+      ] }),
+      /* @__PURE__ */ e(z, { children: /* @__PURE__ */ r(
+        b,
+        {
+          className: m(
+            "group relative h-12 w-full overflow-hidden text-base transition-all duration-300",
+            "hover:scale-[1.01] hover:shadow-md hover:brightness-105 active:scale-[0.99]"
+          ),
+          disabled: t,
+          onClick: i,
+          size: "lg",
+          children: [
+            /* @__PURE__ */ r("span", { className: "relative z-10 flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ e(F, { isLoading: t }),
+              h
+            ] }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: m(
+                  "absolute inset-0 bg-gradient-to-r from-primary/5 via-primary/0 to-primary/5 transition-opacity duration-300 group-hover:opacity-100",
+                  t ? "pointer-events-none opacity-0" : "opacity-0"
+                )
+              }
+            )
+          ]
+        }
+      ) }),
+      u && /* @__PURE__ */ r(w, { children: [
+        o && /* @__PURE__ */ r(P, { children: [
+          /* @__PURE__ */ e("span", { className: "text-muted-foreground text-sm", children: "Don't have an account?" }),
+          " ",
+          /* @__PURE__ */ e(_, { href: o, children: "Register" })
+        ] }),
+        /* @__PURE__ */ e(j, { privacyHref: a, termsHref: l })
+      ] })
+    ] })
+  ] });
+}
+export {
+  q as LoginPage
+};

package/dist/components/ui/templates/auth-template.d.ts

@@ -0,0 +1,44 @@
+import type * as React from "react";
+export type AuthTemplateProps = React.ComponentProps<"div">;
+export declare function AuthTemplate({ className, ...props }: AuthTemplateProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateLogoProps = React.ComponentProps<"div">;
+export declare function AuthTemplateLogo({ className, ...props }: AuthTemplateLogoProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateCardProps = React.ComponentProps<"div">;
+export declare function AuthTemplateCard({ className, ...props }: AuthTemplateCardProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateHeaderProps = React.ComponentProps<"div">;
+export declare function AuthTemplateHeader({ className, ...props }: AuthTemplateHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateTitleProps = React.ComponentProps<"div">;
+export declare function AuthTemplateTitle({ className, ...props }: AuthTemplateTitleProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateDescriptionProps = React.ComponentProps<"div">;
+export declare function AuthTemplateDescription({ className, ...props }: AuthTemplateDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateContentProps = React.ComponentProps<"div">;
+export declare function AuthTemplateContent({ className, ...props }: AuthTemplateContentProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateFooterProps = React.ComponentProps<"div">;
+export declare function AuthTemplateFooter({ className, ...props }: AuthTemplateFooterProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplatePromptProps = React.ComponentProps<"div">;
+export declare function AuthTemplatePrompt({ className, ...props }: AuthTemplatePromptProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplatePromptLinkProps = React.ComponentProps<"a">;
+export declare function AuthTemplatePromptLink({ className, ...props }: AuthTemplatePromptLinkProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateLegalProps = React.ComponentProps<"p">;
+export declare function AuthTemplateLegal({ className, ...props }: AuthTemplateLegalProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateLegalLinkProps = React.ComponentProps<"a">;
+export declare function AuthTemplateLegalLink({ className, ...props }: AuthTemplateLegalLinkProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateDefaultBackgroundProps = React.ComponentProps<"div">;
+export declare function AuthTemplateDefaultBackground({ className, ...props }: AuthTemplateDefaultBackgroundProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateVideoBackgroundProps = {
+    /** Poster image shown while the video loads */
+    poster?: string;
+    /** Playback rate for the background video (default: 0.7) */
+    playbackRate?: number;
+    /** URL to the background video file */
+    src: string;
+    /** Class name for the video element */
+    videoClassName?: string;
+} & React.ComponentProps<"div">;
+export declare function AuthTemplateVideoBackground({ className, playbackRate, poster, src, videoClassName, ...props }: AuthTemplateVideoBackgroundProps): import("react/jsx-runtime").JSX.Element;
+export type AuthTemplateGridOverlayProps = {
+    /** URL to the grid SVG asset */
+    gridUrl: string;
+} & React.ComponentProps<"div">;
+export declare function AuthTemplateGridOverlay({ className, gridUrl, ...props }: AuthTemplateGridOverlayProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=auth-template.d.ts.map

package/dist/components/ui/templates/auth-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-template.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/templates/auth-template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAapC,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5D,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAUtE;AAID,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAUvB;AAID,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAUvB;AAID,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAElE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAEzB;AAID,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEjE,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAUxB;AAID,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEvE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,4BAA4B,2CAO9B;AAID,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEnE,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAE1B;AAID,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAElE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAUzB;AAID,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAElE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAEzB;AAID,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAEpE,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAU7B;AAID,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAE/D,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAUxB;AAID,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAEnE,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAU5B;AAID,MAAM,MAAM,kCAAkC,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE7E,wBAAgB,6BAA6B,CAAC,EAC5C,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kCAAkC,2CAUpC;AAID,MAAM,MAAM,gCAAgC,GAAG;IAC7C,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhC,wBAAgB,2BAA2B,CAAC,EAC1C,SAAS,EACT,YAAkB,EAClB,MAAM,EACN,GAAG,EACH,cAAc,EACd,GAAG,KAAK,EACT,EAAE,gCAAgC,2CA2BlC;AAID,MAAM,MAAM,4BAA4B,GAAG;IACzC,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAC;CACjB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhC,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,4BAA4B,2CAa9B"}