feat(astro): Add appearance option to Astro unstyled components

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<ButtonProps<Tag>> & SignInButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
@@ -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={{ 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);
+      return clerk.openSignIn({ ...signInOptions, appearance: props.appearance });
     }
 
     return clerk.redirectToSignIn({

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'
 

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<ButtonProps<Tag>> & SignUpButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
@@ -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={{ 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);
+      return clerk.openSignUp({ ...signUpOptions, appearance: props.appearance });
     }
 
     return clerk.redirectToSignUp({

packages/astro/src/types.ts

@@ -82,5 +82,4 @@ export type ButtonProps<Tag> = {
    */
   as: Tag;
   asChild?: boolean;
-  mode?: 'redirect' | 'modal';
 };