From 0b007718aa2a4e7b6d8726f54f041d09982a290b Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 11 Feb 2025 09:39:52 -0800
Subject: [PATCH 1/3] chore: Add appearance option to Astro unstyled components

---
 .../src/astro-components/unstyled/SignInButton.astro      | 8 ++++----
 .../src/astro-components/unstyled/SignOutButton.astro     | 2 +-
 .../src/astro-components/unstyled/SignUpButton.astro      | 8 ++++----
 packages/astro/src/types.ts                               | 1 -
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 12b355b3eb0..03a155da4ab 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -1,10 +1,10 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import type { SignInProps } from '@clerk/types'
+import type { SignInButtonProps } from '@clerk/types'
 import type { ButtonProps } from '../../types';
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignInProps & ButtonProps<Tag>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignInButtonProps & ButtonProps<Tag>>
 
 import { generateSafeId } from '@clerk/astro/internal';
 
@@ -50,14 +50,14 @@ if (asChild) {
   )
 }
 
-<script is:inline define:vars={{ signInOptions, mode, safeId }}>
+<script is:inline define:vars={{ elementProps, signInOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignIn(signInOptions);
+      return clerk.openSignIn({ ...signInOptions, appearance: elementProps.appearance });
     }
 
     return clerk.redirectToSignIn({
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index e0a69a5661a..b855ed37fc3 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -4,7 +4,7 @@ import type { SignOutOptions, Without } from '@clerk/types'
 import type { ButtonProps } from '../../types';
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & Without<ButtonProps<Tag>, 'mode'>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & ButtonProps<Tag>>
 
 import { generateSafeId } from '@clerk/astro/internal'
 
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index a88b65b817d..0b80d8c4260 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -1,10 +1,10 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import type { SignUpProps } from '@clerk/types'
+import type { SignUpButtonProps } from '@clerk/types'
 import type { ButtonProps } from '../../types'
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignUpProps & ButtonProps<Tag>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignUpButtonProps & ButtonProps<Tag>>
 
 import { generateSafeId } from '@clerk/astro/internal';
 
@@ -52,14 +52,14 @@ if (asChild) {
   )
 }
 
-<script is:inline define:vars={{ signUpOptions, mode, safeId }}>
+<script is:inline define:vars={{ elementProps, signUpOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignUp(signUpOptions);
+      return clerk.openSignUp({ ...signUpOptions, appearance: elementProps.appearance });
     }
 
     return clerk.redirectToSignUp({
diff --git a/packages/astro/src/types.ts b/packages/astro/src/types.ts
index bbc326975b5..49054017e2c 100644
--- a/packages/astro/src/types.ts
+++ b/packages/astro/src/types.ts
@@ -82,5 +82,4 @@ export type ButtonProps<Tag> = {
    */
   as: Tag;
   asChild?: boolean;
-  mode?: 'redirect' | 'modal';
 };

From c3232f63f55b9943cb7ce17103405b7cb7115a31 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 11 Feb 2025 09:41:19 -0800
Subject: [PATCH 2/3] chore: rename rest props

---
 .../src/astro-components/unstyled/SignInButton.astro      | 8 ++++----
 .../src/astro-components/unstyled/SignUpButton.astro      | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 03a155da4ab..85c3628f0fd 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -22,7 +22,7 @@ const {
   signUpFallbackRedirectUrl,
   signUpForceRedirectUrl,
   mode,
-  ...elementProps
+  ...props
 } = Astro.props
 
 const signInOptions = {
@@ -44,20 +44,20 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+    <Tag {...props} data-clerk-unstyled-id={safeId}>
       <slot>Sign in</slot>
     </Tag >
   )
 }
 
-<script is:inline define:vars={{ elementProps, signInOptions, mode, safeId }}>
+<script is:inline define:vars={{ props, signInOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignIn({ ...signInOptions, appearance: elementProps.appearance });
+      return clerk.openSignIn({ ...signInOptions, appearance: props.appearance });
     }
 
     return clerk.redirectToSignIn({
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index 0b80d8c4260..3dfd80a74af 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -23,7 +23,7 @@ const {
   signInForceRedirectUrl,
   mode,
   unsafeMetadata,
-  ...elementProps
+  ...props
 } = Astro.props
 
 const signUpOptions = {
@@ -46,20 +46,20 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+    <Tag {...props} data-clerk-unstyled-id={safeId}>
       <slot>Sign up</slot>
     </Tag >
   )
 }
 
-<script is:inline define:vars={{ elementProps, signUpOptions, mode, safeId }}>
+<script is:inline define:vars={{ props, signUpOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignUp({ ...signUpOptions, appearance: elementProps.appearance });
+      return clerk.openSignUp({ ...signUpOptions, appearance: props.appearance });
     }
 
     return clerk.redirectToSignUp({

From 0e4211f01e42a949316cc2becf6704f21066c07f Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 11 Feb 2025 10:36:17 -0800
Subject: [PATCH 3/3] chore: fix unions

---
 packages/astro/src/astro-components/unstyled/SignInButton.astro | 2 +-
 packages/astro/src/astro-components/unstyled/SignUpButton.astro | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 85c3628f0fd..ed95f51168b 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -4,7 +4,7 @@ import type { SignInButtonProps } from '@clerk/types'
 import type { ButtonProps } from '../../types';
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignInButtonProps & ButtonProps<Tag>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignInButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index 3dfd80a74af..3576892b1b8 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -4,7 +4,7 @@ import type { SignUpButtonProps } from '@clerk/types'
 import type { ButtonProps } from '../../types'
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignUpButtonProps & ButtonProps<Tag>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignUpButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';